如何在Magento 1.9.0.1 rwd主题上使用jQuery

How can I use jQuery on Magento 1.9.0.1 rwd theme?

本文关键字：jQuery Magento rwd      更新时间：2023-09-26

我注意到Magento 1.9.0.1 rwd主题现在包括jQuery库，并默认使用与"$j"令牌关联的"jQuery.noConflict（）；"。

首先，我想使用谷歌CDN jQuery库，而不是本地jQuery库。

第二，如何运行我的jQuery代码？

例如，我尝试在minicart.html:中插入

    .....
       $_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>
    ........

此外，我尝试在app.js:的末尾添加我的代码

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

但没有效果。我错在哪里了？如何在app/js文件夹中的单独文件中运行代码？

“首先，我想使用谷歌CDN jQuery库，而不是本地jQuery库”

在提出简单的问题之前，你应该进行更多的研究，以下内容摘自本帖和本帖。总的来说，我认为仅仅依靠第三方是不值得付出额外努力的。

在主题的local.xml布局文件中添加此内容。

<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>

“第二，如何运行我的jQuery代码”

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

在这里，你知道你必须使用$j而不是$，但你已经忘记了在第二行！有很多方法可以改变它，

  1. 处处使用$j：

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

  2. 使用函数参数重命名$j：

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

  3. 使用原型：

    // $j is alias for jQuery
$j(document).ready(function() {
    // $ is Prototype alias for document.getElementById
    $('header-cart').hide();
});

为了避免与prototype.js发生冲突，您需要使用jQuery而不是$

例如代替：

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

写入：

jQuery(document).ready(function(){
    // do something
});
相关文章：