如何在 Shopify 網站中使用 jQuery？

Question

我正在使用 shopify 設計我的電子商務商店，我希望我的頁面自動滾動到站點菜單意味着標題部分應該向上滾動。 我使用了 scrollIntoView，但它不起作用。

在 shop.js.liquid 我只做了這么多：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
timber.srcollIntoView = function() {
  $(wondow).on('load',function(){
    $scrollIntoView.scrollIntoView();
    });
};

我從https://github.com/Arwid/jQuery.scrollIntoView/blob/master/jquery.scrollIntoView.min.js下載了 jquery.scrollIntoview.min.js 並在資產部分添加了這個。 你能幫我找到下一步嗎？

Answer 1

如果您執行此操作但仍然損壞，請在 chrome 中按 F12 並單擊控制台並在此處發布錯誤和/或給我留言。

將您的 jquery 添加到assets文件夾中的apps.js.liquid文件。

例子...

(function($){
    $(function(){  //document.ready

        //DOM READY code here

    });

    //Functions, Plugins, Etc.. Here
    //(does not wait for DOM READY STATE) 

})(jQuery);

如果您需要在服務器上使用 jquery（可能是一個很好的后備）...

在您將其上傳到資產文件夾后，在您的標頭中使用它來包含任何 js 文件（可能還有 jquery）

    <!--[if lte IE 8]>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ jQuery.1.10.1.min.js | asset_url }}"><\/script>');</script>
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ jQuery.2.1.3.min.js | asset_url }}');</script>
    <!--<![endif]-->

    <script type="text/javascript" src="{{ 'scrollIntoView.js' | asset_url }}">