如何在Shopify网站上使用jQuery?

时间:2022-11-16 10:52:54

I am using shopify for designing my e-Commerce store in which I want my page to be scrolled automatically to the site-menu means header section should be scrolled up. I used scrollIntoView, but it's not working.

我正在使用shopify设计我的电子商务商店,我希望我的页面自动滚动到网站菜单意味着标题部分应该向上滚动。我使用了scrollIntoView,但它不起作用。

In shop.js.liquid I did this much only:

在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();
    });
};

I downloaded the jquery.scrollIntoview.min.js from https://github.com/Arwid/jQuery.scrollIntoView/blob/master/jquery.scrollIntoView.min.js and added this one in assets section. Could you please help me finding the next step?

我从https://github.com/Arwid/jQuery.scrollIntoView/blob/master/jquery.scrollIntoView.min.js下载了jquery.scrollIntoview.min.js,并在资产部分添加了这个。你能帮我找下一步吗?

1 个解决方案

#1


If you do this stuff and it's still broken, press F12 in chrome and click on console and post what the error is here and/or leave me a comment.

如果您执行此操作且仍然损坏,请按Chrome中的F12并单击控制台并在此处发布错误和/或给我留言。

Add your jquery to the apps.js.liquid file in your assets folder.

将您的jquery添加到assets文件夹中的apps.js.liquid文件。

Example...

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

        //DOM READY code here

    });

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

})(jQuery);

if you need jquery on the server (might be a good fallback)...

如果你需要服务器上的jquery(可能是一个很好的后备)...

use this in your header to include any js file (and maybe jquery) after you upload it to assets folder

在将标题上传到assets文件夹后,在标题中使用它来包含任何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 }}">

#1


If you do this stuff and it's still broken, press F12 in chrome and click on console and post what the error is here and/or leave me a comment.

如果您执行此操作且仍然损坏,请按Chrome中的F12并单击控制台并在此处发布错误和/或给我留言。

Add your jquery to the apps.js.liquid file in your assets folder.

将您的jquery添加到assets文件夹中的apps.js.liquid文件。

Example...

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

        //DOM READY code here

    });

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

})(jQuery);

if you need jquery on the server (might be a good fallback)...

如果你需要服务器上的jquery(可能是一个很好的后备)...

use this in your header to include any js file (and maybe jquery) after you upload it to assets folder

在将标题上传到assets文件夹后,在标题中使用它来包含任何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 }}">