Replies: 1 comment
-
@molotow11 LAYOUT{%- if layout == 'theme' -%}
<script type="text/javascript" src="{{ 'layout.theme.js' | asset_url }}" defer="defer"></script>
{%- endif -%} TEMPLATE{%- if template == 'collection' -%}
<script type="text/javascript" src="{{ 'template.collection.js' | asset_url }}" defer="defer"></script>
{%- else -%} Section is not known in the header where scripts and styles are loaded. There are several workaround to this: Solution 1 - Use @shopify/theme-sections
Solution 2 - Webpack lazy load
function getLocalAddress() {
const location = window.location
return `${location.protocol}//${location.hostname}:${parseInt(location.port) + 1}/`
}
if (process.env.NODE_ENV === 'production') {
__webpack_public_path__ = window.__webpack_public_path__
}
else {
__webpack_public_path__ = getLocalAddress()
} Example script that lazyloads jquery and it's plugins: async _lazyLoadJquery() {
return await import(/* webpackChunkName: "jquery" */ 'jquery')
}
async _lazyLoadJqueryPlugins() {
// Extend function to async load js that requires jquery
}
const jQueryEvent = new Event("jqueryReady");
const jQueryPluginsEvent = new Event("jqueryPluginsReady");
_lazyLoadJquery()
.then((module) => {
window.$ = window.jQuery = module.default;
document.dispatchEvent(jQueryEvent)
// Load JS that requires jQuery
_lazyLoadJqueryPlugins()
.then(() => {
document.dispatchEvent(jQueryPluginsEvent)
})
.catch()
})
.catch((e) => { console.log(e) }) Solution 3 - Add entrypoints
|
Beta Was this translation helpful? Give feedback.
0 replies
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
-
Is it possible to have separate scripts for sections? E.g. src/scripts/sections, the same as for layout and templates?
If no, is it planned to add such feature?
Beta Was this translation helpful? Give feedback.
All reactions