How to use global variables which assigned on settings_schema.json on Javascript js file

Technical Q&A
1

Hello, experts.

I assigned global variables on settings_schema.json like it.

{
“name”: “Shipping Cost Global Variables”,
“settings”: [
{
“type”: “header”,
“content”: “shipping cost starting price value and interval value.”
},
{
“type”: “text”,
“id”: “global_shipping_start_cost”,
“label”: “Global variable - Shipping Start Cost based on weight”,
“default”: “20”
},
{
“type”: “text”,
“id”: “global_shipping_interval_cost”,
“label”: “Global variable - Shipping Start Cost based on weight”,
“default”: “10”
},
{
“type”: “text”,
“id”: “global_turkey_currency_rate”,
“label”: “Global variable - Turkey currency conversion rate”,
“default”: “7.31”
}
]
}

I would like to use those static variables on js file.
Such as in theme.js

How can I call those variables in theme.js file?

Looking forward to getting solution.

Many thanks.

2

@BrightPearl

There are two potential solutions for that:

  1. Add the settings elements to a data attribute from any .liquid file. For example, you could create an empty div within the theme.liquid:

And then, from theme.js:

const $settings = document.querySelector(`#customSettings`);
const test = $settings.getAttribute("data-test");
alert(test);
  1. From within a .js.liquid file.

You would need to rename your theme.js file to theme.liquid.js. Here is how it would look like:

const test= `{{ settings.global_shipping_start_cost }}`.trim();
alert(test);

Kind regards,
Diego

1 Like
3

Thank you, Diego!

1 Like
4

You’re welcome!

5

@diego_ezfy Thanks for your reply.

Next Monday, I will apply your solution, then I will accept your solution as a solution.

Many thanks!