Using javascript variable in different parts of liquid code

Question

I'm a total noob ... trying to modify the code in my shopify store.

I need to use a javascript variable in a function to display delivery date.

How can I pass the variable between different javascript codes in the liquid file?

                   {% if shippingtype == 'long' %}         

            <script> var shippingtime = 'long'; </script>

            {% else %}

             <script>  var shippingtime = 'short';   </script>

            {% endif %}


            <script> 

alert(shippingtime); //and do other stuff with variable

</script>

Unfortunately you haven't provided enough context with your question for someone to properly answer it. When do you need to display it? Where do you need to display it? Where does the value initially come from? I'm not familiar with shopify but normally the best way to go about this is loading it on the page from the server such as the database. — EternalHour
– EternalHour, Commented Feb 5, 2020 at 23:41
The shipping time variable is created on the cart page. It will change depending on stock levels as users add or remove things from the cart. So it should change after the page has loaded depending on user inputs. It should display at the bottom of cart near payment buttons.. — Tom humphries
– Tom humphries, Commented Feb 6, 2020 at 7:40

Emiel Zuurbier · Accepted Answer · 2020-02-05 22:37:06Z

1

I'm afraid it does not work that way. You could do it like you try above, but won't be a clean way of doing it. Instead set your value somewhere in the document where you can read it from, like in an input element.

<input type="hidden" name="shippingtime" value="{{ shippingtime }}"/>

Then in JavaScript check the value of that input element and handle accordingly.

// Select the input.
const input = document.querySelector('input[name="shippingtime"]');

// Get the value of the input.
const { value } = input;

Whenever you navigate the page you reload everything, including all JS. But you can store variables with the Web Storage API. Either store them in a session with sessionStorage (stored until browser is closed) or indefinitely with localStorage. For this example I'll use the sessionStorage.

// Stores the value.
sessionStorage.setItem('shippingtime', value);

On another page you can check if the storage has an item called shippingtime.

const shippingTime = sessionStorage.getItem('shippingtime');
if (shippingTime !== null) {
  // Use the shippintTime value here.
  console.log(shippingTime);
}

Hope this helps you out. If you have any questions or I have been unclear, please let me know.

answered Feb 5, 2020 at 22:37

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

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

2 Comments

Tom humphries Over a year ago

Thanks, I guess session storage would be the way forward. I couldn't get it working last night but will try again later.

Tom humphries Over a year ago

I have the sessionStorage working now, that's what I needed thanks

Collectives™ on Stack Overflow

Using javascript variable in different parts of liquid code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related