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!

Diego Fortes · Accepted Answer · 2018-05-05 21:03:47Z

9

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.

answered May 5, 2018 at 21:03

Diego Fortes

9,9514 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Tahir Over a year ago

What if I want to set value of section.settings.custom_text_product from js? I want something like that <script> section.settings.custom_text_product = productText </script>

Diego Fortes Over a year ago

@MuhammadTahir that is not possible. You can't attribute a Javascript value to a liquid variable. If you have this need, kindly carefully re-evaluate your code's architecture. There are no real-world use cases where this would be a necessity.

user2284001 · Accepted Answer · 2023-01-28 02:03:29Z

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.

answered Jan 28, 2023 at 2:03

user2284001

391 gold badge1 silver badge7 bronze badges

1 Comment

Diego Fortes Over a year ago

To clarify, I would suggest updating your answer: if the JSON is within the section, it is section.settings.timer. If it's within the settings_schema.json file, then you access it via settings.timer

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related