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));