How To Update Local Storage When New Product Variants Are Selected?

Technical Q&A
1

Hi!

I’m currently working on creating a product tear page that displays all product information, however I’m having trouble with updating my local storage when new variants are clicked. Currently in order to update the tear sheet I have to select the variants and then refresh my page in order for the changes to show.

Is there a function that will reload my local storage with the selected variants without having to refresh? I’ve added a code snippet as to how I’m setting variables to my local storage currently.

TIA!

              var titlePrint = `{{ product.title }}`;
              var pricePrint = `{{ product.price | money }}`;
              var imgGet = `{{ product.featured_image }}`;
              var imgPrint = `{{ product | img_url: '720x720' }}`;
              var skuPrint = `{{ product.selected_or_first_available_variant.sku }}`;
              var dimensPrint = `{{ current_variant.barcode }}`.toString();
              var descPrint = `{{ product.description }}`;
              var detailsPrint = `{{ product.selected_variant.metafields.variant.details_specs }}`;
              var variantPrint = `{{ product.selected_variant.title }}`

              localStorage.clear();
            
              function currentProduct() {

                  //   VARIANTS
                localStorage.setItem(variantStore, variantPrint);
                            // console.log('VARIANTS' + localStorage.getItem(variantStore));
            
                //  TITLE
                localStorage.setItem(titleStore, `{{ product.title }}`.toString());
            //             console.log('TITLE: ' + localStorage.getItem(titleStore));   
            
            
                //  DESCRIPTION
                localStorage.setItem(descStore, descPrint);
            //             console.log('DESC: ' + localStorage.getItem(descStore));
            
                //  IMAGE
                localStorage.setItem(imgStore, imgPrint);
            //             console.log('IMAGE: ' + localStorage.getItem(imgStore));
2

G’day Tia!

I am a little confused about what a tear page is and what you are trying to achieve here? What is the function of local storage here? Are you persisting the data across pages?

In terms of updating the variant data without reloading the page, you will need to attach a change event to the variant input. That way you can run you JS function when the user interacts with the page.

There are a couple of ways you can get variant data. A couple of options are:

  1. Send AJAX request to backend
  2. Liquid render JSON object that gets parsed in JS, match event target id
3

So basically what I’m doing is creating a new print window that has all information about our products, and I’d like the page to display whatever variant is selected on the printable page. As of right now when new variants are selected, the printable page doesn’t show the updated selected variants and just shows what was initially loaded onto the page because local storage isn’t updated when new variants are selected on the product page.

Hopefully that’s a little bit better of an explanation, I attached a picture of a product page as well as what appears when you hit print.

example one.PNG
example one.PNG594×879 35.2 KB

example two.PNG
example two.PNG1491×648 96.5 KB

4

Ahhh I see what you are saying!

Looking at the snippet, you are using Liquid to set the variables that are then stored. Liquid runs server side, so it will only run when the page is requested by the user (ie on load).

To make the print page dynamic, you will need to us javascript to change the variables when the variants change. If you seem to have some familiarity with coding so I will give you a scaffold to follow:

  1. Find the js code the listens for the change event on the variants inputs (they will be hidden, inspect the page to find the class)
  2. Locate the part of the function where the new variant data is known
  3. Set your print variables (titlePrint etc) with the new variant data
  4. Call currentProduct func on print button click to use the new variables