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

[BrightPearl]

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.

[diego_ezfy · 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 

[BrightPearl]

Thank you, Diego!

[diego_ezfy]

You're welcome!

[BrightPearl]

@diego_ezfy Thanks for your reply.

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

Many thanks!