Displaying Stock Count in Product Gallery Page

Ask the community
, ,
1

Hello, I’ve been trying to tackle this problem for hours now and endless googling hasn’t really gotten me very far so I’m hoping I can get some help here. I managed to find some example code and tweaked it a bit to work for my needs but it doesn’t work exactly as I hoped.

If I switch on dev mode and add this code to my product page I can get a stock remaining number for each product on the product page itself:

let qty_num = 0;
let oos_text = "Sold Out!"

$w.onReady(function () {
  $w('#productPage1').getProduct()
  .then( (product) => {
    qty_num = product.quantityInStock;
    console.log(qty_num);

 if (qty_num > 0) {
 let productQuantityString = qty_num.toString();
 $w("#text15").text = "Spots Remaining: " + productQuantityString;
    } else {
      $w("#text15").text = oos_text;
    }
 
  } )
  .catch( (error) => {
    console.log(error);
  } );
});

This works great. However my goal ultimately would be to have a remaining stock count for each item on the previous page #productGallery1. My thought was to maybe do some kind of query to get all the products in my store with associated names and stock counts then compare names with the text fields on the page to apply appropriate stock numbers. I pieced together the following code to query items but all I get is item ID’s with respective stock counts but I can’t seem to figure out how to get the name of each item:

import wixData from 'wix-data';

$w.onReady(function () {
wixData.query("Stores/InventoryItems")
  .find()
  .then( (results) => {
    let firstitem = results.items[0]
    let pid = results.items[0]['productId']
    let qty = results.items[6]['variants'][0]['quantity']
    console.log("PID:" + pid + " QTY:" + qty)
  });
});

I would also be open to suggestions for better/easier ways to display stock numbers on the product gallery page of my site. Really appreciate any help or tips here!