如何在Magento中添加Jquery？

10

在我当前的关于我们页面项目中，我需要添加选项卡以在不同部分之间切换，我知道这可以通过Jquery选项卡来完成，但是与magento集成时我不知道如何做到这一点。

magento-1.9  magento-1  jquery 
— 唐7
source

Answers:

2

假设您已经创建了一个CMS页面，并且该页面的About Us名称是该名称，if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

现在将此代码添加到您的 app/design/frontend/your_package/your_theme/template/page/html/head.phtml 

<?php $headBlock = $this->getLayout()->getBlock('head');
    if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='About Us'): 
    ?>
    <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script type="text/javascript"> jQuery(function() { jQuery( "#tabs" ).tabs(); });</script>
    <?php endif; ?>

然后打开“ CMS页面”的内容部分。

<div style="float: right; width: 200px;">&nbsp;
<p>{{block type="tag/popular" template="tag/popular.phtml"}}</p>
</div>
<div id="tabs" style="width: 680px;">
<ul>
<li><a href="#tabs-1">You text here.</a></li>
<li><a href="#tabs-2">You text here.</a></li>
<li><a href="#tabs-3">You text here.</a></li>
</ul>
<div id="tabs-1">
<p>You text here.</p>
</div>
<div id="tabs-2">
<p>You text here.</p>
</div>
<div id="tabs-3">
<p>You text here.</p>
<p>You text here.</p>
</div>
</div>

粘贴此代码，这将在您的前端中创建jquery标签。希望这会有所帮助。

如果您有任何疑问，请点击这里。

— dh47
source
谢谢你的工作
— don7
3
将脚本和自定义标签添加到head.phtml文件违反了Magento的最佳做法。新的脚本标签应通过xml布局添加，并且您可以向“关于我们”页面添加自定义更新句柄以专门针对该页面。脚本标签也应该分解成它自己的javacript文件，并且也应该通过布局xml导入。
— Tyler Craft'Yan
7

我不建议为此编辑head.phtml模板。大多数时候，您不需要在自己的主题中使用自定义头像模板，因为核心模板已经在执行其工作。

我个人也不想编写基于异常的代码（如果A则执行此操作，如果B则执行此操作）。如果在许多不同的页面上需要许多不同的javascript，那么您head.phtml将充满很多if语句。

我建议通过布局XML添加jQuery。使用CMS页面，您可以在编辑页面时在管理员中添加额外的布局XML。在这里，您可以找到为“关于我们”页面设置不同模板的示例。同样，您可以将jQuery添加到About about页面。添加以下布局XML：

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.x.x.js</script>
    </action>
    <block type="core/text" name="jquery.noconflict">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict();</script>]]>
            </text>
        </action>
    </block>
</reference>
— 7化学
source
4

或者只是简单地复制到您的主题目录，例如，skin\frontend\[your theme]\default\js\然后将其添加到主题的page.xml：

<action method="addItem">
    <type>skin_js</type>
    <script>js/jquery-1.9.1.min.js</script>
</action>
— 用户名
source
3

好的，我找到了一种使原型，jQuery和bootstrap正常工作而又不会互相干扰且无需使用的方法jQuery.noConflict()。我的布局设置（page.xml）正在执行以下操作（为便于阅读，将其剥离）：

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

我收到如下错误：

TypeError：element.attachEvent不是函数

element.attachEvent（“ on” + ActualEventName，响应者）;

TypeError：element.dispatchEvent不是函数

element.dispatchEvent（event）;

我不想$到处改变。因此，我制作了三个javascript文件，如下所示：

proto_to_temp.js具有以下代码：

var $tempPrototypeDollar = $;

after_jquery.js具有以下代码：

$ = jQuery;

after_all.js具有以下代码：

$  = $tempPrototypeDollar;

您可能已经猜到了，第一个脚本将当前$变量（由原型拥有）分配给名为的临时变量$tempPrototypeDollar。第二个脚本简单地分配jQuery给$。第三个脚本将$tempPrototypeDollarback 的内容分配给$。

我按以下顺序包括了这三个脚本：

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all jQuery related code has been included -->
</block>

这为我解决了所有问题，现在jquery，bootstrap和prototype似乎都可以正常工作。

— 果戈里
source
2

在设计页面的顶部包含以下内容

<script>
var $j = jQuery.noConflict();
</script>

并使用jQuery作为$j代替$(Eg:$j('.class').hide();)

PS：您可以使用任何其他变量来代替jvar$j

— 吉辛·艾哈迈德（Jithin U.Ahmed）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.