javascript - 如何在 magento 1.8 中包含自定义 jQuery/javascript

Question

我有自定义的 JavaScript 和 jQuery 代码。

我是 magento 的新手，需要知道如何将这些 jquery 和 JS 片段添加到我的 magento 中，以便它识别它们。

我尝试在页面加载时显示工具提示，并在使用下面的 JS fiddle 链接后隐藏:

http://jsfiddle.net/Lvzuz/17/

fiddle 使用以下文件:

1) jquery 2)bootstrap.js 3)bootstrap.css

因此，我已将我的 magento 文件更新为:

在app\design\frontend\rau\default\template\page\html\pager.phtml

<?php if($followupbuttonshow){?>
    <div class="thiscategory">
        <a class="followlink" href="javascript:void" rel="tooltip" data-original-title="Place your stuff here"> <?php echo $this->__('Follow'); ?></a>  
    </div>
<?php } ?>

更新:

在app\design\frontend\rau\default\layout\local.xml

<reference name="head">
      <action method="addJs"><js>jquery/jquery.js</js></action>
      <action method="addJs"><js>jquery/jquery.noconflict.js</js></action>
      <action method="addLinkRel"><rel>text/javascript</rel><href>https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js</href></action>
      <action method="addLinkRel"><rel>text/css</rel><href>https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css</href></action>
   </reference>
...

在app\design\frontend\rau\default\layout\page.xml

<default translate="label" module="page">
   <action method="addJs"><script>js/custom.js</script></action>

在rauqa\skin\frontend\rau\default\js\custom.js

jQuery(document).ready(function () {
    console.log('tooltipp js....');
    $j('.thiscategory .followlink').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
    $j(this).tooltip('enable');
    });

setTimeout(function() {
$j('.thiscategory .followlink').tooltip().eq(0).tooltip('hide').tooltip('enable');
}, 5000);

});

控制台错误:

tooltipp js....

tooltip.js?q=29032018:3 Uncaught TypeError: $j(...).tooltip is not a function

at HTMLDocument. (tooltip.js?q=29032018:3)

at j (jquery.min.js?q=29032018:2)

at Object.fireWith [as resolveWith] (jquery.min.js?q=29032018:2)

at Function.ready (jquery.min.js?q=29032018:2)

at HTMLDocument.J (jquery.min.js?q=29032018:2)

验证js是否加载如下截图:

custom.js 文件已加载

jquery 已加载 - 不确定这是否是实际的 jquery 文件

这是唯一加载的jquery

加载 bootstrap.js 和 css 的 cdn

链接到jquery:

问题:

不确定我是否以正确的方式正确包含了所有文件(html、xml)

请指出问题出在哪里......以及我必须包含magento识别脚本的方式。

Answer 1

您只需将粘贴的脚本放入phtml文件中，它就应该可以工作。如果 jquery 没有链接到该页面，则链接它。另外，请注意 jquery 变量的命名。在许多情况下，它的名称是 $，但您在 脚本 中将其用作 jQuery。