Cache busting
Cache busting is a technique used to force browsers, or , to load the latest version of a file (such as a CSS, Javascript, or an image) instead of serving a .
ShopWired has an automatic system for cache busting. The automatic cache busting system ensures that your website's visitors will always see the most up-to-date content on your website.
To render static content, ShopWired themes should always use the asset_url function, which is a bespoke Twig function built into ShopWired. For example, when adding or inserting images into a Twig template:
{{ asset_url('images/image.png') }}
The asset_url function should be used for all static content (CSS, Javascript, and images).
All themes have a "version" number. Every time a file within a ShopWired theme is edited or created, the version number is incremented. The asset_url function automatically appends the version number to the end of the URL of a static asset, e.g.
<link rel="stylesheet" href="https://theme-assets.ecommercedns.uk/1/64071/scss/theme.css?v=x">
Where x is the current theme version.
When used throughout a theme, you should never notice any browser caching issues on your ShopWired theme and should always be able to view the latest version of all content without having to clear or reset your browser's cache.
SCSS files
ShopWired does not support the use of Twig within SCSS files; therefore, the asset_url function cannot be used within an SCSS file.
If you reference an image file within an SCSS file, ensure you append a version number to the end of the URL and increment it each time the image file is changed to ensure that visitors always see the latest version, e.g.
background-image: url('images/image.jpg?v=1')
The theme editor
The theme's live preview utilises a separate instance of the compiled theme.css file (separate from the file utilised on your website). Whilst recompilation of theme.css when viewing the website live is triggered on any change, this is not the case in the website displayed in the live preview.
Recompilation can be forced by selecting the refresh button in the browser. Read more.
