-1

I noticed Magento 1.9.0.1 rwd theme now include jQuery library and use "jQuery.noConflict();" associated on "$j" token on default.

First, I'ld like to use google CDN jQuery library instead of local jQuery library.

As second, how can run my jQuery code?

For example, I tried to insert in minicart.phtml:

    .....
       $_cartQty = 0;
    }
?>


<script type="text/javascript">
    $j(document).ready(function() {
        $('#header-cart').hide();
    });
</script>


<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
    <span class="icon"></span>
    ........

Also, I tried to use add my code at the end of app.js:

.....
};

$j(document).ready(function() {
    ProductMediaManager.init();
});

$j(document).ready(function() {
    $('#header-cart').hide();
});

but no effect. Where I wrong? How can I run my code in a separate file in app/js folder?

KaMZaTa
  • 535
  • 2
  • 9
  • 24

2 Answers2

1

“First, I'ld like to use google CDN jQuery library instead of local jQuery library.”

You should research more before asking easy questions, the following is taken from this post and this post. Overall I think it's not worth the extra effort just to rely on a 3rd party.

In your theme's local.xml layout file add this.

<default>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="/skin/frontend/rwd/default/js/lib/jquery-1.10.2.min.js">\x3c/script>');</script>
<script>jQuery.noConflict();</script>]]></text>
            </action>
        </block>
    </reference>
</default>

“As second, how can run my jQuery code?”

$j(document).ready(function() {
    $('#header-cart').hide();
});

Here you know you must use $j instead of $ but you have forgotten that on the 2nd line! There are many ways to change it,

  1. Use $j everywhere:

    $j(document).ready(function() {
    $j('#header-cart').hide();
});

  2. Rename $j using the function argument:

    $j(document).ready(function($) {
    // $ is different inside this function only
    $('#header-cart').hide();
});

  3. Use Prototype instead:

    // $j is alias for jQuery
$j(document).ready(function() {
    // $ is Prototype alias for document.getElementById
    $('header-cart').hide();
});
Community
  • 1
  • 1
clockworkgeek
  • 37,650
  • 9
  • 89
  • 127
  • Thank you for your reply. Apart discuss if is better use local library or hosted on google CDN that anyway could be an interesting debate (at least for me), I posted this question because I read that with new Magento 1.9.x rwd theme things are changed and jQuery was "integrated" by default. I saw those post before post the question but they can't help me (are dated 2010/2013, maybe something is changed?). In code example, as you rightly said, I forgot to report "j" on second instruction but, as I tried before, still doesn't work and this is why I posted the question. – KaMZaTa Sep 21 '14 at 22:08
  • 1
    _Mea culpa_. Too fast and too furious (or too dumb is most correct in this case). I confused #header-cart of – KaMZaTa Sep 22 '14 at 00:13
0

To avoid conflicts with prototype.js you'll need to use jQuery instead of $

For example instead of: 

$(document).ready(function(){
    // do something
});

Write:

jQuery(document).ready(function(){
    // do something
});
Pixelomo
  • 6,373
  • 4
  • 47
  • 57