BigCommerce Product Card with Variant Inventory Stock
Need to add the Stock Level for Variants on a BigCommerce product card? No problem, solved here.
Problem
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.
Before
After
Solution
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>
Links
Bigcommerce Forum Question
Brod Solutions Private Gist - bigcommerce-graphql-getProductVariantById.html
Tags
BigCommerce, Stencil Theme, User Experience
Dated
Created: Mar 24, 2025
Updated: Mar 24, 2025