Ecommerce Shopify WordPress Discussion

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={} 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="{{}}"> <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.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[{{- -}}] = { 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 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[{{- -}}] = { 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[].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

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.