How to get the access product ID in Shopify?

I am trying to make the inventory quantity appear on a Shopify website, and so far can console.log the entire object, but I am stuck on how to I grab the individual product ID when the select dropdown changes? This Shopify theme I am working with does not have the ?variant={variant.id} in the Shop URL, like most modern themes do. Here's the relevant HTML: <form class="product-form" id="product-form" action="/cart/add" method="post" enctype="multipart/form-data" data-product-id="{{product.id}}"> <div id="product-variants"> <select id="product-select" name="id" style="display: none;"> {% for variant in product.variants %} {% if variant.available %} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option> {% else %} <option disabled="disabled"> {{ variant.title }} - {{'products.product.sold_out' | t}} </option> {% endif %} {% endfor %} </select> </div> ......... {% assign current_variant = product.selected_or_first_available_variant %} <div class="live-inventory"> <p class="live-inventory-count">We have {{ current_variant.inventory_quantity }} in stock </p> </div> ........... <script> let customObject = {} {% for var in product.variants %} customObject[{{- var.id -}}] = { inventoryQuantity : {{ var.inventory_quantity }} } {% endfor %} let currentSelectedVariantProduct = customObject[variantId]; //how to accesss my customObject variantId without being in the for-loop up above??? //just need to get the id then this would work. console.log(currentSelectedVariantProduct, 'I AM IN PRODUCT.LIQUID') const variantSelectorElement = document.querySelector('#product-variants'); variantSelectorElement.addEventListener('change', () => { const liveInventoryCount = document.querySelector('.live-inventory-count') liveInventoryCount.innerHTML = currentSelectedVariantProduct.inventoryQuantity }) </script> customObject looks like this when outputted: { "30280335163469": { "inventoryQuantity": 46 }, "18515284230": { "inventoryQuantity": 21 }, "30280354070605": { "inventoryQuantity": 66 }, "30280337981517": { "inventoryQuantity": 17 }, "18515284294": { "inventoryQuantity": 18 }, "30280354693197": { "inventoryQuantity": 32 } } Am very stuck on how to access the var.id outside of the for-loop.

To get the selected variant's inventory quantity when the select dropdown changes, you can modify your JavaScript code as follows: liquid Copy code {% assign current_variant = product.selected_or_first_available_variant %} <script> let customObject = {}; {% for variant in product.variants %} customObject[{{- variant.id -}}] = { inventoryQuantity: {{ variant.inventory_quantity }} }; {% endfor %} const variantSelectorElement = document.querySelector('#product-select'); const liveInventoryCount = document.querySelector('.live-inventory-count'); variantSelectorElement.addEventListener('change', () => { // Get the selected variant ID const selectedVariantId = variantSelectorElement.value; // Access the inventory quantity from the customObject using the selected variant ID const currentSelectedVariantProduct = customObject[selectedVariantId]; // Update the live inventory count liveInventoryCount.innerHTML = `We have ${currentSelectedVariantProduct.inventoryQuantity} in stock`; }); // Initial update based on the default/selected variant liveInventoryCount.innerHTML = `We have ${customObject[current_variant.id].inventoryQuantity} in stock`; </script> Here are the changes made: Moved the initialization of current_variant outside of the script tag, making it accessible in both Liquid and JavaScript. Updated the event listener to get the selected variant ID using variantSelectorElement.value. Used the selected variant ID to access the corresponding inventory quantity from the customObject. Added an initial update of the live inventory count based on the default/selected variant outside the event listener. Now, when the select dropdown changes, it will dynamically update the live inventory count based on the selected variant's inventory quantity.

December 28, 2023