How to fetch the selected product variant in a product form and save it for later?

oroborosh
New Member
2 0 0

Hi there!

I am currently working on a product page for custom products. The page will be split up into multiple forms, one for each customization step. I want to use JS to fetch the selected option after each step with a button press and temporarily save it in the sessionStorage. On the last step of product customization, when the user confirms their order, I want to get those information back from the sessionStorage to fill them into the final product form (this one will be hidden, because the user already gave all that information). With a final button click the order will be submitted and added to the cart.

So far, so good. The problem I am currently experiencing is the following: 

As every step needs to be on a separate "page" I decided to disable scrolling and move the view by pressing the "Next Step" button. So I can't use just one single product form, but will have to use multiple, smaller forms and collect the data after each step. This, as far as I know, isn't really supported by shopify, which is why I came up with the sessionStorage idea. I am currently testing this approach by seeing, if I can succesfully store the chosen variant in the sessionStorage.

I select the variant from a drop down menu, then click "Add To Cart". This is where I attached an eventListener, to trigger the function that saves the "current_variant" as a JSON object into sessionStorage. But it always just saves the default variant, not the one I selected in the form. The item that is put into the cart is the correct one, though.

    function storeVariant() {
      window.sessionStorage.setItem('variant', '{{ current_variant | json }}');
      let variantObject = window.sessionStorage.getItem('variant');
      console.log('Fetched Variant: ', variantObject); // always returns "first option", not the one I selected!
  	}
                
  	document.getElementById('add-to-cart-btn').addEventListener('click', storeVariant);

 

I tried to add this piece of code in many places already, thinking the selection might be out of scope if I added the function from the parent template. But even if it's in the form where the selection that I want to store is made, it still doesn't give me the one I selected. 

I would highly appreciate any help with this. Also, if you think you have another approach that might work, I'd love to hear your advice on it!

Thank you very much in advance and I hope to get this to work soon!

Joshua

Replies 0 (0)