Shopify Question posted in
The Shopify help center can be found here.

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

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    So while this was exactly what I needed when I gave up on a timer I was setting up for checkout, I had to slightly change the code to get it working, but this is perfect:

    {%- assign timer_amt = settings.timer -%}
var time_amt = `{{ settings.timer }}`;

    I am not pulling from the section this is straight from the main Schema, so slightly different but a huge help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search