Liquid, JavaScript, themes, sales channels
Hello there,
Im using the debut theme and im trying to give the user a notification on the product page. the content of the notification depends on whether or not the selected variant is available. this works but only for the variant which is selcted on page load.
i checked this: https://shopify.dev/api/liquid/objects/variant
and tried to copy the logic which is already used in product-price.liquid
this actually prints out the availability and quantity for the selected variant on page load:
but when the user then selects a diferrent variant, these outputs dont get updated:
(this variant is sold out, so the quanitity should 0 and the availability should false)
So the green arrow logic gets updated when user selects variant and the red arrow doesnt.
Hints anyone?
I wonder what im missing 🙂
This is a rather complex topic involving both backend and frontend development. I'll try to point you in the right direction.
In short, Liquid code gets rendered on Shopify's servers before the page is sent to the browser. So on initial page load {{ variant.inventory_quantity }} gets you the inventory quantity of the variant that's being loaded.
Switching variants doesn't reload the whole page but rather changes all relevant page elements like price, availability, variant image, etc. on the fly by directly manipulating the DOM. All the product and variant data is typically stored in a JSON object, which is usually the product Liquid object passed through the Liquid json filter. This object however does not include the inventory quantity for each variant (it used to, but that data was removed a couple of years back).
So to get the updated inventory quantity on variant change you would have to add the inventory quantity data to the product JSON object and then hook into the variant change event with Javascript to get the data for the relevant variant from the product JSON object.
interesting. thank you.
but there allready must be something like variant availability in the product JSON object.
because this does work and gets updated on variant change:
The availability is included in the product JSON, but just indicates if a product can be purchased, it doesn't include inventory count.
alright, it seems like you know what i need this for: overselling. The client wants to oversell products but print out a notification on the product page depending on whether the variant is in stock or not.
And for this i need the inventory quantitiy in the product JSON.
Or is there any other way how to do this?
I don't know of any other way and getting the inventory quantity in the product JSON and displaying a message depending in the selected variant isn't particularly hard if you know your way around Javascript.
Hi,
I suggest you to make an ajax call on variant change to get from storefrontAPI the stock quantity of your variant and display it.
https://shopify.dev/api/storefront/getting-started#retrieve-product-variants
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024