Shopify - 在内联部分/片段脚本中使用您的 JS 库等

Question

I want to use a script within the file for a specific section (in my collection-template.liquid in this circumstance, but it could be in any) - I want to place the script at the bottom of the file. However when you use inline scripts in this way, they don't seem to reference other libraries that you have saved on your theme.

In my example I want to be able to use jQuery in this script, but jQuery doesn't appear to be loaded - ie it doesn't recognise any jQuery or any other libraries. It does work for the theme.js, but I need this script to be only in this section/snippet. I need the script to be inline because it uses liquid - moving it to the theme.js is not an option in this case.

Can anyone recommend a solution to include these libraries (perhaps its as simple as including a reference to the vendor.js file or otherwise) - and also if possible explain why these aren't referenced as standard? As it seems strange to me that this issue even exists. I am using the Debut theme.

Answer 1

I appear to have fixed this simply by declaring the jQuery script (by inserting the below) immediately before the closing </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery is now being loaded first and is working in snippets etc.