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