BigCommerce Product Card with Variant Inventory Stock

stock_level property not available on variant level products on category page
I'm attempting to build a toggle on the category page that will toggle in stock items only. So, when toggle on, it will show in stock items only, when toggled off, it will show all products. My plan was to get the {{stock_level}} of each product within the product card component, and basically just hiding that element if the stock_level is zero. 

The issue I'm having is that if inventory is tracked at the variant level, it won't give me a stock_level value for this product. Ideally, I would be able to just get a total stock_level of all variants, and if it's over 0, then show this product. However, I don't see anything regarding variant inventory in the product object. 

Any help/ideas on this would be greatly appreciated.

you could call a GraphQL from each product card, pass in the single product ID and get the same info.

Using a Fetch function and promises to set up the HTML is the way to add the Stock a card. I've done this on the templates/components/products/card.html:

<span class="card-text" data-test-stock="variant-stocked-{{id}}">No Stock</span>
        <script>
            fetch('/graphql', {
              method: 'POST',
              credentials: 'same-origin',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer {{ settings.storefront_api.token }}'
              },
              body: JSON.stringify({
                query: `query getVariantsByProductId{
                site {
                  product(entityId: {{ id }}) {
                    name
                        variants(first: 25) {
                          edges {
                            node {
                              inventory {
                                isInStock
                                byLocation {
                                    edges {
                                        node {
                                            isInStock
                                            availableToSell
                                            locationEntityCode
                                        }
                                    }
                                }
                              }
                            }
                        }
                    }
                  }
                }
              }`
              })
            })
            .then(res => res.json())
            .then(function(data) {
                console.log(data);
                var inStock = false;
                var totalVariantStock = 0;

                // Map through each variant and calculate total stock
                data.data.site.product.variants.edges.map(function(variant) {
                    if (variant.node.inventory.isInStock) {
                        inStock = true;
                        // Add up all the byLocation availableToSell
                        variant.node.inventory.byLocation.edges.map(function(location) {
                            totalVariantStock += location.node.availableToSell;
                        });
                    }
                });

                // Update the stock label based on availability
                var stockLabel = document.querySelector('[data-test-stock="variant-stocked-{{id}}"]');
                if (totalVariantStock > 0) {
                    stockLabel.innerHTML = "In Stock" + " (" + totalVariantStock + " available)";
                } else {
                    stockLabel.innerHTML = "Out of Stock";
                }
            })
            .catch(error => console.error(error));
          </script>