Как я могу использовать jQuery в теме Magento 1.9.0.1 rwd?

Я заметил, что тема Magento 1.9.0.1 rwd теперь включает библиотеку jQuery и использует "jQuery.noConflict();" связанный с токеном "$j" по умолчанию.

Во-первых, я хотел бы использовать библиотеку jQuery Google CDN вместо локальной библиотеки jQuery.

Во-вторых, как запустить мой код jQuery?

Например, я пытался вставить в 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>
    ........

Кроме того, я попытался добавить свой код в конец app.js:

.....
};

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

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

но никакого эффекта. Где я ошибаюсь? Как я могу запустить свой код в отдельном файле в папке app/js?


javascript jquery magento magento-1.9.1
person KaMZaTa    schedule 21.09.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, я хотел бы использовать библиотеку jQuery Google CDN вместо локальной библиотеки 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 вместо $, но вы забыли об этом во 2-й строке! Есть много способов изменить его,

  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();
});
person clockworkgeek    schedule 21.09.2014
comment
Спасибо за ваш ответ. Помимо обсуждения того, лучше ли использовать локальную библиотеку или размещенную на Google CDN, это в любом случае может быть интересной дискуссией (по крайней мере, для меня), я разместил этот вопрос, потому что я прочитал, что с новой темой Magento 1.9.x rwd все изменилось, и jQuery был интегрирован по умолчанию. Я видел этот пост перед тем, как задать вопрос, но они не могут мне помочь (датированы 2010/2013, может что-то изменилось?). В примере кода, как вы правильно сказали, я забыл сообщить j о второй инструкции, но, как я пытался раньше, все еще не работает, и поэтому я разместил вопрос. - person KaMZaTa; 22.09.2014
comment
Моя вина. Слишком быстро и слишком яростно (или слишком глупо в данном случае будет правильнее всего). Я перепутал #header-cart из ‹div› со ссылкой #header-cart из ‹a›, поэтому я ожидал, что он скроет элемент ‹a›, в то время как он скрывал элемент div (содержимое миникорзины отображается при щелчке ‹a›). Я заслуживаю еще одним баллом меньше. - person KaMZaTa; 22.09.2014

arrow_upward
0
arrow_downward

Чтобы избежать конфликтов с прототипом.js, вам нужно использовать jQuery вместо $

Например, вместо:

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

Напишите:

jQuery(document).ready(function(){
    // do something
});
person Pixelomo    schedule 13.01.2016