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

Solved
BrightPearl
Tourist
8 0 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.
Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2300 413 541

This is an accepted solution.

@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:

<div id=customSettings" data-test="{{ settings.global_shipping_start_cost }}"></div>


And then, from theme.js:

const $settings = document.querySelector(`#customSettings`);
const test = $settings.getAttribute("data-test");
alert(test);



2. 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 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 4 (4)
diego_ezfy
Shopify Partner
2300 413 541

This is an accepted solution.

@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:

<div id=customSettings" data-test="{{ settings.global_shipping_start_cost }}"></div>


And then, from theme.js:

const $settings = document.querySelector(`#customSettings`);
const test = $settings.getAttribute("data-test");
alert(test);



2. 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 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

diego_ezfy
Shopify Partner
2300 413 541

You're welcome!

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
BrightPearl
Tourist
8 0 1

@diego_ezfy Thanks for your reply.

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

Many thanks!