Shopify: Using variables from {% schema %} in Javascript

Question

I have a custom section that uses the following schema:

{% schema %}
  {
    "name": "Custom",
    "settings": [
    {
        "type": "textarea",
        "id": "custom_text_product",
        "label": "Insert name of the product here",
        "default": "Product"
      },
    {
        "type": "textarea",
        "id": "custom_text_msg",
        "label": "Custom text",
        "default": "Insert text here"
      }
    ]
  }
{% endschema %}

Basically what I want is to get the text from each textarea, manipulate via Javascript and then add it to the DOM.

Via .liquid I would simply do {{ section.settings.id }}, but I don't know how to access them in Javascript. Because it's a big text I can't add it to the DOM as a data-attribute either.

I have tried following this but no success.

Can someone help me or refer me to documents regarding this?

Thank you very much!

Answer 1

Ok, so after much research and comments saying this was not possible, I found a way.

If you're on a .liquid file, you want to assign your {% schema %} variable to a local .liquid variable like this:

{%- assign product_text = section.settings.custom_text_product -%}

After that, you can access it in Javascript by doing so:

<script>
  var productText = `{{ product_text }}`;
</script>

I hope it helps everyone.