Workarounds for Displaying available Inventory

Hi there. I’m new to the forum, have no Javascript background, and very basic coding background…so if you respond please hold my hand tightly :slight_smile:

So, I’m opening up a Wix store to sell my art and want to sell limited edition prints. I’m a little surprised to find that there is no option to display the available inventory, which seems like a pretty normal option, and in my estimation a very easy thing to implement given that inventory tracking is already built in. So I reluctantly forayed into the wix code to try to figure out a workaround. I’m also a little disappointed to find that there seems to be no access to the actual code running the site(like I could do on my shopify page), which might allow for minor tweaks like this (though I expect I would be overwhelmed with that).

Anyway, I came up with this workaround, which I was amazed that I actually got to work:

  1. Added text element to the product page (seen in red), named it #quantityRemainingText


Then here’s the code I came up with to access the product’s .quantityInStock property and assign the results to display in my text element.

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);
  } );
 
 
 
});

After some playing around, I got this to work, hallelujah! But it doesn’t do exactly what I want :frowning:
The problem is that the product.quantityInStock property seems to hold the combined inventory for all the varients. So lets say I have two varients at 100 items each, my code displays “200 available”. What I really want is for my text to display the number available for the selected product option.

So, I looked and found there are a number of objects in the Wix api that relate to the product options (StoreProductOption, StoreProductOptionsChoice, etc. 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?

Remember, please hold my hand. It may seem that I know what I am doing, but I’m only good at copying and pasting from example code and playing with it until it works :smiley: 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

Hey thx for the tut!
did u figured out how to show each product inventory ?

you have some work to do.

Yes, it’s possible to update the stock via code, to print the stock in repeaters, and to print out of stock. For that you have to understand the API, the objects it returns, etc. Therefore, print out everything you get as results, so u can read the object and understand its behavior. For instance, the stock it’s not saved in the product itself, but in the referenced collection called inventory (check your collections).

API (you have to understand it yourself)
https://www.wix.com/corvid/reference/wix-stores-backend/updateinventoryvariantfields

Also, check my comment here, as the object field inventory changes depending on the query (horrible), so print everything to see u are on the safe side:
https://www.wix.com/corvid/forum/community-discussion/bug-in-product-inventory-via-code?origin=member_posts_page

1 Like

I cant believe this isn’t a basic toggle on/off per product yet. To the point I’m looking into changing shops because of it. The product I sell sells more when people know there is limited amounts left, so its really affecting my sales. I can see quantity remaining when i’m in Admin on the app and web, so I don’t know why its so hard for it to be an option per product.

1 Like

Got to agree with you on this

This is a great little bit of code you’ve put together Jonathon. Works really well and is simple and easy to understand what the code is doing.

Has anyone gotten any further with finding a solution to displaying quantity in stock for Product Variants? Any code examples that aren’t just pointing me at the API and telling me to understand it and do it myself? :slight_smile:

Jack

Where exactly did you put the code? I don’t see where I would put it… I find it incredibly hard to customize Wix. Please help!

Hi Amelia,

Totally agree that Wix makes it very difficult to customize.

So, just go to your “product page” in the “Store” section and paste my code in the code section at the bottom.

You will have to click the little arrow to maximize it from the ribbon at the bottom. If you don’t see the grey ribbon at the bottom of your editor, this may not be enabled, in which case I think you just enable it by going to the top menu, click on the “Dev Mode” section and then the “Turn on Dev Mode” button

It’s been a few years since I did this, and my head is no longer in the mode of understanding coding, so I’m afraid I may not be able to help you much more than this. But I hope it works for you.

Thanks so much!

1 Like