New Zenner
- Join Date:
- Nov 2011
- Posts:
- 4
- Plugin Contributions:
- 0
Adding Javascript -> Poshy Tooltip
Greetings
I'm using Zen-Cart v1.3.9h.
I'm trying to use Poshy Tooltip (http://vadikom.com/demos/poshytip/), a jquery plugin on my product info page.
The problem is, it works perfectly outside zen-cart but I can't seem to get it work inside my zen-cart installation.
Here is the code that I use outside zen-cart.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Poshy Tip jQuery Plugin Demo Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<!-- Tooltip classes -->
<link rel="stylesheet" href="tip-skyblue/tip-skyblue.css" type="text/css" />
<!-- jQuery and the Poshy Tip plugin files -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.poshytip.js"></script>
<!-- Setup examples on this page -->
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#test').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});
});
//]]>
</script>
</head>
<body>
<!-- #demo-tip-skyblue -->
<p><a id="test" title="Hey, there! This is a tooltip." href="#">.tip-skyblue</a></p>
</body>
</html>
So when adding javascript I used the proper method (I think) that I found on the wikipage.
http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Javascript
My shop/includes/modules/pages/product_info, now lists both:
- jscript_jquery.poshytip.js
- jscript_jquery-1.4.2.min.js
I then added the script code to the main block inside jscript_main.php. Here is the contents of that file:
<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers |
// | |
// | http://www.zen-cart.com/index.php |
// | |
// | Portions Copyright (c) 2003 osCommerce |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license, |
// | that is bundled with this package in the file LICENSE, and is |
// | available through the world-wide-web at the following url: |
// | http://www.zen-cart.com/license/2_0.txt. |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to |
// | [email protected] so we can mail you a copy immediately. |
// +----------------------------------------------------------------------+
// $Id: jscript_main.php 5444 2006-12-29 06:45:56Z drbyte $
//
?>
<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#test').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});
});
//]]>
</script>
And I put this in the /shop/includes/templates/cherry_zen/templates/tpl_product_info_display.php:
<p><a id="test" title="Hey, there! This is a tooltip.">.tip-skyblue</a></p>
And finally I just added this inside tpl_product_info_display:
<link rel="stylesheet" href="tip-skyblue/tip-skyblue.css" type="text/css" />
So basically, exactly the same as in the files outside zen-cart.
My source of index.php?main_page=product_info&cPath=66_16045&products_id=6&language=en contains the proper links, I can see them in my browser.
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_jquery.poshytip.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_textarea_counter.js"></script>
<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#test').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});
});
//]]>
</script>
And my firebug reports:
$("#test").poshytip is not a function
I also tried linking to the page directly in tpl_product_info_display.php, but I found out that it wasn't recommended.
The only thing that I think is off place is the link, normally you put this in the head tag, how do I do that? I don't think it's relevant tbh, because I also have another css and that works perfectly fine...
I really don't know what's wrong? Does anybody have a clue? I hope I provided you with enough information, if not please say so and I will do so.
