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

Question

我有一个自定义的 javascript 和 jQuery 代码。

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

我试图在页面加载时显示工具提示，并在一段时间后使用以下 JS 小提琴链接：

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

小提琴使用以下文件：

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);

});

控制台出错：

工具提示 js....

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

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

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

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

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

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

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

custom.js 文件已加载

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

这是唯一加载的 jquery

用于 bootstrap.js 和 css 加载的 CDN

链接到 jquery ：

问题：

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

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

Answer 1

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

Answer 2

我相信您的 JavaScript 文件缺少关闭： );

编辑新错误：$ 是 Magento 中的原型，但您在代码中使用 jQuery。如果您添加了 jQuery，请使用分配给它的别名（例如 $j）。或者：

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

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