Shopify Theme section is ignoring the stylesheet and the javascript can't access global objects

0
votes

I'm making a custom section for Shopify theme using Liquid and the code for /sections/mytest.liquid is below.

I expect to see the section with red border, and I expect to see the section ID in the browser console.

It doesn't work because shopify is ignoring my stylesheet. And it always says section ID is missing. what am I doing wrong?

<div id="fish1">
Hello this is the threshold -- {{ section.settings.threshold }} --
</div>

{% javascript %}
console.log('THE SECTION ID IS ' + (section ? section.id : 'MISSING'));
{% endjavascript %}

{% stylesheet %}
#fish1 {
    border: 1px solid red;
    background-color: cyan;
}
{% endstylesheet %}

{% schema %}
{
  "name": "test Header",
  "settings": [
    {
      "type": "range",
      "id": "threshold",
      "min": 300, "max": 1000, "step": 10, "unit": "px",
      "label": "Threshold",
      "default": 760
    }
  ],
  "presets": [
    {
      "category": "My Stuff",
      "name": "My Test"
    }
  ]
}
{% endschema %}
2
shopifyliquidshopify-template

2 Answers

2
votes

Remember that Liquid is a templating language that is compiled server-side to create a document that will be served to the client's browser, and that Javascript is a client-side script that will be parsed once the page is served. From the Javascript side, the client won't know any of the variables you set through the theme or section settings unless you drop them into your template somehow.

Here's some code that might help you get started (I generally use basic <script> tags rather than Shopify's {% javascript %} liquid tags, but this should work inside those as well):

<script>
  const section = {
    settings: {{ section.settings | json }},
    id: {{ section.id | json }}
  }

  console.log('Confirmation:', section.id, section.settings);
</script>

Note the use of the | json filter - this filter will guarantee that whatever variable you have before the filter will be output to the resulting document in a Javascript-friendly way, and it works for non-objects as well. Strings will be wrapped in quotes, quotes within the string will be escaped, empty values will be null, etc. My rule-of-thumb is that any time you are dropping Liquid variables into Javascript, the json filter should be used.

Hope this helps!

1
votes

There is no global section javascript variable in a section file, that's why you get the error that there is no id of undefined.

You can do this:

{% javascript %}
console.log('THE SECTION ID IS {{section.id}}');
{% endjavascript %}

As for the stylesheet there is no problem for me. I tested it and it applies a border to the div.