Magento Question posted in
The official documentation can be found here.

How to include custom jQuery / javascript in magento 1.8

I have a custom javascript and jQuery code.

I am new to magento and need to know how to add those jquery and JS snippet into my magento so that it identifies those.

Im trying to show tooltip on page load and hide after sometime using the below JS fiddle link:

http://jsfiddle.net/Lvzuz/17/

The fiddle uses the following files:

1) jquery
2) bootstrap.js
3) bootstrap.css

Accordingly i have updated my magento files as:

In appdesignfrontendraudefaulttemplatepagehtmlpager.phtml

<?php if($followupbuttonshow){?>
    <div class="thiscategory">
        <a class="followlink" href="javascript:void" rel="tooltip" data-original-title="Place your stuff here"> <?php echo $this->__('Follow'); ?></a>  
    </div>
<?php } ?>

UPDATED:

In appdesignfrontendraudefaultlayoutlocal.xml

<reference name="head">
      <action method="addJs"><js>jquery/jquery.js</js></action>
      <action method="addJs"><js>jquery/jquery.noconflict.js</js></action>
      <action method="addLinkRel"><rel>text/javascript</rel><href>https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js</href></action>
      <action method="addLinkRel"><rel>text/css</rel><href>https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css</href></action>
   </reference>
...

in appdesignfrontendraudefaultlayoutpage.xml

<default translate="label" module="page">
   <action method="addJs"><script>js/custom.js</script></action>

In rauqaskinfrontendraudefaultjscustom.js

jQuery(document).ready(function () {
    console.log('tooltipp js....');
    $j('.thiscategory .followlink').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
    $j(this).tooltip('enable');
    });

setTimeout(function() {
$j('.thiscategory .followlink').tooltip().eq(0).tooltip('hide').tooltip('enable');
}, 5000);

});

Error in console:

tooltipp js….

tooltip.js?q=29032018:3 Uncaught TypeError: $j(…).tooltip is not a function

at HTMLDocument. (tooltip.js?q=29032018:3)

at j (jquery.min.js?q=29032018:2)

at Object.fireWith [as resolveWith] (jquery.min.js?q=29032018:2)

at Function.ready (jquery.min.js?q=29032018:2)

at HTMLDocument.J (jquery.min.js?q=29032018:2)

To Verify if the js are loaded below is the screenshot:

custom.js file loaded

enter image description here

jquery loaded- not sure if this is the actual jquery file

This is the only jquery loaded
enter image description here

cdn for bootstrap.js and css loaded

enter image description here

Link to jquery :

enter image description here

Problem:

Not sure if i have included all the files correctly in the correct manner (html, xml)

Please point out where the issue is.. And the way i have to include the scripts for magento to identify.

Tags:

2

Answers


  1. 0

    You will just need to put the pasted script into the phtml file and it should work. If jquery is not linked to the page, then link it. Also, pay attention to the naming of the jquery variable. In many cases its name is $, but you use it as jQuery in your script.

    Login or Signup to reply.
  2. 0

    I believe your JavaScript file is missing closing:
    );

    Edit for new error: $ is Prototype in Magento, but you’re using jQuery in the code. If you have jQuery added, use the alias that was assigned to it (such as $j). Or:

    jQuery(document).ready(function(){
    console.log('tooltipp....');
    jQuery('.thiscategory .followlink').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
        jQuery(this).tooltip('enable');
    });

    setTimeout(function() {
        jQuery('.thiscategory .followlink').tooltip().eq(0).tooltip('hide').tooltip('enable');
    }, 5000);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search