Theme resources

Starting from v19, you can now modify core JavaScript files. However, due to internal dependencies, you must build a new version of an existing component and upload it to the StoreConnect theme.

This process allows you to override existing components instead of building new ones from scratch, saving development time.

Step-by-Step Instructions

1. Download the latest version of the base theme v19
2. Navigate to the Project Directory. Using the command line, navigate to the root directory of the base theme and enter the following command: cd templates/resources
3. Run a Build Command.
   1. Watch Mode (recommended for development). Run the following command to listen for file changes and continuously compile: npm run watch This is useful when making multiple changes, as it automatically recompiles without requiring manual building.
   2. Build for production. If you need a compiled version ready for production, use: npm run build
   3. Clean and rebuild. To ensure a clean slate before recompiling everything from scratch, run: npm run clean
4. In your theme follow these sub-steps:
   1. In your theme, create a new template
   2. If modifying accordion.js, use the following key to reference the compiled file: resources/dist/scripts/accordion.2BXYP356.js
   3. This fingerprinted filename is generated by npm run build. You can find the built file in: templates/resources/dist/scripts/
5. Now add your new resource to your manifest.json, if not already created use the following key: resources/dist/manifest.json and paste the following code in the content field

{
  "dist/scripts/accordion.js": "dist/scripts/accordion.2BXYP356.js"
}

1. Use the following tag wherever you need this resource to be rendered - note that some component already use accordion.js so there’s no need to include the tag: require "scripts/accordion.js"

Important Notes

We provide a standard dist and src directory with all the dependencies included in the repo, the building tool use you use is up to you.

• The {% require %} tag is used to render scripts, styles, or other assets.

• If the same resource is required multiple times, StoreConnect filters out duplicates and renders only one instance.

• If you need to require the resource multiple times, pass the multiple: true parameter:

  {% require "scripts/accordion.js", multiple: true %}