How to access Product Varient Quantity in Stock?

Ask the community
, ,
1

Hi all, I posted this yesterday, but realized my long-windedness may have scared people away.

So, I’m planning to sell limited edition prints on a Wix store and I want to display the number of prints remaining. I came up with a workaround in which I created a text element on my product page (see image). The wrote some code to access the product’s .quantityInStock property and assign the results to display in my text element. (see code below)

let productQuantityNum = 200; //initialize product quantity variable
let soldOutText = "Edition Sold Out" //initialize variable to display "sold out" text when inventory is 0

$w.onReady(function () {
//TODO: write your page related code here...

$w('#productPage1').getProduct() //get current product
.then( (product) => {
productQuantityNum = product.quantityInStock; //get quantity in stock for current product

if (productQuantityNum > 0) { //if it's greater than 0, Display number remaining
let productQuantityString = productQuantityNum.toString();
$w("#quantityRemainingText").text = productQuantityString + " remaining";

} else {
$w("#quantityRemainingText").text = soldOutText; //display sold out text
}
} )
.catch( (error) => {
console.log(error);
} );

});

This works, but the problem is that the product.quantityInStock property seems to hold the combined inventory for all the varients. What I want is for my text to display the number available for the currently selected varient. Becaus the two varients are separate products. I realize I can separate them into two separate products, but this is not ideal for me.

So, I looked and found there are a number of objects in the Wix api that relate to the product options (StoreProductOption, StoreProductOptionsChoice, and the ProductOptionsAvailability), however, I don’t see any mention of there being a .quantityInStock property for the specific product option as there is for the general product object.
So, can anyone tell me if there is such a property? If so, how can I retrieve it and implement it into my code?
My knowledge of Javascript is close to none and general coding only slightly more, so any code snippets you could provide would be highly appreciated. Or if there are different or better ways of accomplishing my goal, please let me know.
Cheers!
Jonathan

2

Did you ever figure this out? I’m trying to do the exact same thing but with only one product. I have zero coding experience, so not really sure where to begin on adding this.

3

No one helped me figure out my issue. I’m guessing they don’t give access to what I want. But yes, my code works if there is just one product (no varients). You might have to do a little studying to figure out how the coding works, but to make mine work is pretty straight forward.

  1. “Turn on Developer tools” to enable the coding (now your site editor will look a little different)
  2. Create a normal text box on your product page to display the number of remaining products (this is the red “200 remaining” text in my picture) you can type some temporary text and then change size, color, font, etc. And just drag the box to where every you want it to display.
  3. Give this text box a new name in it’s properties box “quantityRemainingText” or give it any name you want and change the code to match (anywhere you see “quantityRemainingText”)
  4. Paste my code into your store product page. (bottom of the screen on your editor)
  5. Edit the first two lines of my code to fit your needs, i.e., change the 200 in
    let productQuantityNum = 200 to the number you want, and you can change the text in
    let soldOutText = “Edition Sold Out” if you want it to say something else when the product quantity reaches 0.
    Note: Setting productQuantityNum is not particularly necessary because the number should get filled in automatically by your products inventory. Of course you will have to adjust your products’ initial inventory in the normal way in the manage products area.

Hope you can figure it out and send me a message if you get stuck.