Looping over a different product's variants in JavaScript

Solved
jaxter
Excursionist
24 1 3

Hi folks,

I'm new to Shopify, Liquid and JavaScript, so please excuse the dumb questions.

What I want to do is have a function to calculate the price of a custom product based on prices of an equivalent standard product, and I want to trigger the rule when a 'Calculate' button is pressed.

I constructed a loop in liquid and determined that I could identify the product I wanted and the variant that I wanted to base the price on, and could calculate my modified price.

However, after reading various posts, I think that I can't use a liquid script dynamically in my webpage because it is only run once when the page is built(?).

So I think I have to use JavaScript instead, but then that leads me to the next problem, that JavaScript doesn't appear to have direct access to the product and variant structures of your collections.

So I think I have 2 choices:

1) get the JavaScript to log into the Shopify store and extract the details I require into JavaScript objects and go from there, or

2) write the relevant variant details into the webpage in hidden form using variable ids from the liquid script, e.g.:

    <p id={{nvar}} style="display: none;">{{variant.title}}</p>

    where nvar is an id with a number on the end of it that increases through the variant list, in order to maintain uniqueness.

I could then interrogate the related hidden paragraphs of the page in JavaScript to retrieve the data.

 

Any helpful guidance would be appreciated.  Would I be right in thinking (1) is the only sensible way and (2) would be undignified?

0 Likes
jaxter
Excursionist
24 1 3

OK, today's html lesson brought me to the data-* attribute.  With this I think option (2) is looking much tidier and probably simpler to set up.

I guess it will also give better performance for the user, so is probably the better option.

Let me know if I'm going in the wrong direction.

0 Likes
jaxter
Excursionist
24 1 3

This is an accepted solution.

OK, I'm just replying to myself, but in case it's useful to any other beginners out there, I have made some progress.

After seeing a post by Zetya Gavin, I discovered that I could actually make the product object visible to my JavaScript after the page had loaded.

I put into my product-template.liquid:

<script>
  var json_product = {{ product | json }};
</script>

and this made the product object available in the JavaScript with name json_product.  I used that name just in case the name 'product' was already being used and I may step on something.  The json in json_product has no meaning, but the json at the end I understand defines the object structure for JavaScript.

I was then able to use these kind of constructs in the code I triggered from my button:

var variant = json_product.variants[select_option_index];
for ( i=0; i<json_product.variants.length; i++ ) {
  var variant = json_product.variants[i];
  var style = variant.option1;
  var size  = variant.option2;
  ....
}

This is significantly tidier than trying to hide the data in hidden screen elements.

0 Likes
Seahawksean
Tourist
13 0 0

Hi @jaxter

Do you by chance have a link to Zetya Gavin's post?  I'm trying to find some more information about this type of functionality for my needs and that post may provide some clues.  

Thank you!

0 Likes
jaxter
Excursionist
24 1 3

Hi @Seahawksean ,

 

The post I found was https://community.shopify.com/c/Shopify-Design/Function-to-trigger-a-variant-selection-change/m-p/20...

Title: "Function to trigger a variant selection change", originally posted by @Ro4 .

The key for me was to be able to pass the product object into a json object so I could work on it in Javascript.

I hope this helps.

0 Likes
Seahawksean
Tourist
13 0 0

Thanks @jaxter!  I appreciate you taking the time to hunt down that link. 

I actually discovered the simple fix (as always) for this.  Turns out someone had messed around with some javascript and deleted a large chuck of it that was controlling the combination of variant options to display a total price.  Once I dropped in another copy of the full js tag I had found in another file, it immediately fixed my problem. 

But hopefully your link will help other here. 

0 Likes