Proper method to set a global value shared within Shopify theme files

Solved

Proper method to set a global value shared within Shopify theme files

DeeDee-TDY
Shopify Partner
48 4 5

I am a developer for multiple corporate stores under the Shopify Plus Enterprise Platform plan. I have an API that, for efficiency, I would like to call only once (per store/customer session) and use the response to set a global value that is readable from the following seven (Dawn 11.0) Section files:
1. collage,
2. featured-collection,
3. featured-product,
4. main-collection-product-grid,
5. main-product,
6. predictive-search,
7. related-products.

I will modify content in these section files based on the single API result value. What is the proper method to set a global variable, MetaField, or other such shared value within Shopify theme files?

Accepted Solution (1)
DeeDee-TDY
Shopify Partner
48 4 5

This is an accepted solution.

I found a (non-Shopify) storage solution that works across Shopify liquid files for a case where I am trying to call and read a value only once per domain session (from an external API: apiCallResponse.country_code) and store this value to read from multiple liquid files.
I use the browser storage (i.e., localStorage object) to set the value like this:

 

    localStorage.setItem('country_code', apiResponse.country_code);

 

And then read the stored value from each liquid section as needed like this:

 

    country_code = localStorage.getItem('country_code');

 

This works for sharing data across liquid files - as long as you're OK with [modern] browser storage, saved at each domain session.

View solution in original post

Replies 3 (3)

Liam
Shopify Staff
2873 312 820

Hi DeeDee-TDY,

 

Have you looked into App-data metafields? These would be available on all sections/ pages though - are you looking to ensure that the metafields are locked to only the specific sections that you have listed in your post?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

DeeDee-TDY
Shopify Partner
48 4 5

re: are you looking to ensure that the metafields are locked to only the specific sections?

no, this is not necessary in my case.

 

So, Are you suggesting to write a Shopify app program that calls the 3rd party API and set the metafield value from the app (which then can be ready by liquid sections)? I have written some checkout UI extension apps but am fairly new to Shopify - what type of Shopify app [framework] would you suggest to start with for something like this (i.e. runs prior to pages loaded)?

DeeDee-TDY
Shopify Partner
48 4 5

This is an accepted solution.

I found a (non-Shopify) storage solution that works across Shopify liquid files for a case where I am trying to call and read a value only once per domain session (from an external API: apiCallResponse.country_code) and store this value to read from multiple liquid files.
I use the browser storage (i.e., localStorage object) to set the value like this:

 

    localStorage.setItem('country_code', apiResponse.country_code);

 

And then read the stored value from each liquid section as needed like this:

 

    country_code = localStorage.getItem('country_code');

 

This works for sharing data across liquid files - as long as you're OK with [modern] browser storage, saved at each domain session.