variant.inventory_quantity and variant.available do not get updated on variant selection

michael_feh
Tourist
3 0 0

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

 

Bildschirmfoto 2021-11-23 um 17.49.24.png

 

this actually prints out the availability and quantity for the selected variant on page load:

 

Bildschirmfoto 2021-11-23 um 18.58.01.png

but when the user then selects a diferrent variant, these outputs dont get updated:

 

Bildschirmfoto 2021-11-23 um 18.57.45.png

(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.

Bildschirmfoto 2021-11-23 um 18.01.46.png

 

Hints anyone?

I wonder what im missing

 

Replies 6 (6)
ThomasBorowski
Shopify Expert
650 44 154

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.

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★
arens_myzyri
New Member
3 0 0

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

michael_feh
Tourist
3 0 0

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:

 

Bildschirmfoto 2021-11-24 um 12.57.14.png

ThomasBorowski
Shopify Expert
650 44 154

The availability is included in the product JSON, but just indicates if a product can be purchased, it doesn't include inventory count.

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★
michael_feh
Tourist
3 0 0

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?

ThomasBorowski
Shopify Expert
650 44 154

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.

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★