How to automatically update local storage when product variant is selected on Shopify (without manually refreshing page)?

Maycie Morris 0
Viewed 41

I've created a product tear sheet that utilizes local storage to pass product information onto a new page to be printed. I'm able to successfully bring in all the information I need however if I select new product variants (such as bed size, wood type, etc.) the new product info page doesn't update until I manually refresh my product page.

Is there a way to have my local storage updated when a new variant is selected? I've included a snippet of code to show how I am setting my local storage so hopefully that is helpful.

              var variantStore = "variants" + variantId;
              var titlePrint = '{{ product.title }}';
              var pricePrint = '{{ product.price | money }}';
              var imgGet = '{{ product.selected_or_first_available_variant.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));
            
                //  PRICE
                localStorage.setItem(priceStore, pricePrint);
            //             console.log('PRICE: ' + localStorage.getItem(priceStore));
            
                //  SKU
                localStorage.setItem(skuStore, skuPrint);
            //             console.log(localStorage.getItem(skuStore));
product-variations liquid local-storage shopify javascript
3 Answers

Maybe an event listener could help? (I assume there is an html select element somewhere):

const selectItem = document.getElementById('select');
selectItem.addEventListener('change', (event) => {
    localStorage.setItem(variantStore, event.target.value);
});
Leonardo Martinez0

The age-old solution to this is both simple and complex. All you need to do is find the current event that is triggered by the customer choosing a different variant. In that code, you can explore that what happens is that code updates the price on the screen to that of the selected variant, and perhaps other things get updated. For example, an image may be swapped, or a color changed.

Once you discover this event handler, you can inject your own needs, like changing a value you set in localStorage.

David Lazar0

Liquid is rendered server-side. It is standard to detect variant change with Javascript, as liquid only renders when the page is loaded.

You cannot detect variant change with liquid without reloading the page. If you can, I have wasted quite a few lines!

Find the selection event handler in your theme.js file. If the theme developer is nice, it will be nicely placed within a class. Otherwise, you may have to read some code.

I wish I could be more specific.

I would also recommend storing your variant variables here as an object. Much easier to work with. Instead of {{ current_variant.barcode }}, I would run something like: for barcode in product.variant.barcode and push each to their appropriate variant keys in this object. This allows barcodes to be attached within this object.

Same applies to most of these variables- You can actually just pull these from the JSON of the page and it will be much cleaner for you than using liquid. Otherwise, you may have issues with any state changes or price variance.

Elliott Mejia0
Related