Separate scripts for sections

[molotow11]

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?

[hayes0724]

@molotow11
You can have separate scripts for each, loaded from layout or templates. Separate bundles requires some manual integration. This mirrors Shopify where all page load using Layout -> Template -> Sections. When the scripts are loaded we only know the values for the layout and template. They have known names and locations that make it easy for webpack to target with liquid, example:

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

1. You can add data attributes to your sections liquid and have Shopify run your script when they are detected @shopify/theme-sections

Solution 2 - Webpack lazy load

1. Change your script to be lazyloaded with webpack using import()
2. Minor modification is needed for lazy load to work on both production and development, I use this helper function at the top of the main theme javascript:

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

1. You can add entrypoints to packer and even modify the webpack config with packer.config.js, dev.config.js and prod.config.js
2. In your section file you can load the entrypoint with a script tag (you need to manually add this)