Problem 1: No JS pre-save
Upon adding a section in the Theme Editor, scripts from {% javascript %} are not evaluated until saving the template. This is a problem because merchants are unable to configure and preview JS-dependent sections without saving. This is especially problematic for merchants who do not know that they should be editing an unpublished theme instead of their live theme.
This issue shows up in several cases:
- Case 1 — Adding a section that uses
{% javascript %} when no other sections are using {% javascript %}
- Case 2 — Adding a section that uses
{% javascript %} when a different section using {% javascript %} is already present
- Result —
compiled_assets/scripts.js is already present. It is re-requested upon adding the new section, but the iframe is not re-rendered. Therefore, the new section scripts are not evaluated until save
- See video: https://files.pxu.co/DOuyZAZn
- Case 3 — Adding a section that uses
{% javascript %} when the same section is already present
- Result —
compiled_assets/scripts.js is already and contains the appropriate section scripts. It is re-requested upon adding the new section and the iframe is not re-rendered. This is not a problem because the evaluated scripts are identical to the new ones.
Problem 2: Asset conflicts
{% stylesheet %} does not work in the theme editor if the theme uses a styles.css asset. Similarly, {% javascript %} does not work in the theme editor if the theme uses a scripts.css asset. I've recorded a <2min video showing the problem: https://files.pxu.co/z8uW9BNX
The problem seems to occur because the tags trigger the generation of /compiled_assets/styles.css and /compiled_assets/scripts.js files which get referenced in content_for_header. There is a conflict because of the names, but only in the theme editor.
A simple solution might be to append a hash to the compiled assets (e.g. styles.HASH.css)
Problem 1: No JS pre-save
Upon adding a section in the Theme Editor, scripts from
{% javascript %}are not evaluated until saving the template. This is a problem because merchants are unable to configure and preview JS-dependent sections without saving. This is especially problematic for merchants who do not know that they should be editing an unpublished theme instead of their live theme.This issue shows up in several cases:
{% javascript %}when no other sections are using{% javascript %}compiled_assets/scripts.jsis not loaded at all until save{% javascript %}when a different section using{% javascript %}is already presentcompiled_assets/scripts.jsis already present. It is re-requested upon adding the new section, but the iframe is not re-rendered. Therefore, the new section scripts are not evaluated until save{% javascript %}when the same section is already presentcompiled_assets/scripts.jsis already and contains the appropriate section scripts. It is re-requested upon adding the new section and the iframe is not re-rendered. This is not a problem because the evaluated scripts are identical to the new ones.Problem 2: Asset conflicts
{% stylesheet %}does not work in the theme editor if the theme uses astyles.cssasset. Similarly,{% javascript %}does not work in the theme editor if the theme uses ascripts.cssasset. I've recorded a <2min video showing the problem: https://files.pxu.co/z8uW9BNXThe problem seems to occur because the tags trigger the generation of
/compiled_assets/styles.cssand/compiled_assets/scripts.jsfiles which get referenced incontent_for_header. There is a conflict because of the names, but only in the theme editor.A simple solution might be to append a hash to the compiled assets (e.g.
styles.HASH.css)