Shopify: Using Variables From {% Schema %} In Javascript

- 1 answer

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 {{ }}, 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!



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:

  var productText = `{{ product_text }}`;

I hope it helps everyone.