Magento 中的 jQuery [英] jQuery in Magento

问题描述

我用 jQuery 编写了一个小滑块脚本，我想在我的 Magento 商店中运行它.我已将这个脚本包含在我的 view.phtml 中，但它似乎不起作用.我究竟做错了什么?我是 Magento 的新手，不知道如何添加自定义脚本.

I've written a little slider script in jQuery which I want to run in my Magento store. I have included this script in my view.phtml but it doesn't seem to work. What am I doing wrong? I'm pretty new to Magento and have no idea on how to add custom scripts.

<script type="text/javascript">// < ![CDATA[
        jQuery(document).ready(function(){
        var active = 0; // starts at zero
        var list = jQuery('ul');

        list.children('li').eq('0').siblings().hide(); // Hide all except first list element

       jQuery('.next').bind('click', function() {
            active = active == list.children('li').length-1 ? 0 : active + 1;
        });

        jQuery('.prev').bind('click', function() {
            active = active == 0 ? list.children('li').length-1 : active - 1;
        });

        var getActive = function() {
            return list.children('li').eq(active);
        };

        jQuery('.prev,.next').bind('click', function() {
            getActive().fadeIn().siblings().hide();
        });

 });// ]]></script>

这是我在 view.phtml 中的 HTML:

And here is my HTML in view.phtml:

<ul>
   <li>img1</li>
   <li>img1</li>
   <li>img1</li>
</ul>

推荐答案

第一件事:Magento 不使用 jQuery.

Magento 使用 PrototypeJs，并且要么将您的 jQuery 转换为 PrototypeJs，要么您必须加载jQuery，使用 noConflict 方法，以便它们都能无缝运行.

Magento uses PrototypeJs, and either convert your jQuery into PrototypeJs or you have to load jQuery, use the noConflict method so they both run seamlessly.

要在您的页面中加载 jQuery，您可以使用 .xml 模板将其加载到所有页面中，或者如果它仅在此特定页面中，您可以简单地在脚本之前加载它，例如:

To load jQuery in your page, either you use the .xml template to load it into all your pages, or if it's only in this particular page, you could simply load it before your script, for example:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
   // noConflict so we can use both libraries
   $.noConflict(); 

   // your current code here

//]]>
</script>

如果你想通过你的设计模板加载所有页面，这里有一个建议.

if you want to load in all pages through your design template, here is a suggestion.

这篇关于Magento 中的 jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！