Ecommerce Shopify WordPress Discussion

Shopify Liquid Ajax cant find varient to add to Cart

I'm designing a custom product builder and am having trouble adding the items to the cart. The code looks for a "Clicked" Item's product.id and then pushes it to my payload/form object. When I run a console.log I see all of the ids, but the fetch doesn't recognize them so I get the error: {status: 404, message: "Cart Error", description: "Cannot find variant"} description: "Cannot find variant" message: "Cart Error" status: 404 Here is the add-to-cart function document.getElementById('add-to-cart-button').addEventListener('click', async function(event) { event.preventDefault(); console.log("Add-to-cart button clicked."); let form = { items: [] }; let selectedOption = necklaceVariantDropdown.options[necklaceVariantDropdown.selectedIndex]; let selectedNecklaceVariantId = parseInt(selectedOption.getAttribute('data-id'), 10); if (!selectedNecklaceVariantId) { console.warn("No necklace variant selected."); return; } form.items.push({ id: selectedNecklaceVariantId, quantity: 1 }); console.log("Necklace variant added to cart items:", selectedNecklaceVariantId); let selectedCharms = necklacePreview.querySelectorAll('.charm-item.cloned'); console.log(`Found ${selectedCharms.length} selected charms.`); //Add each selected charm to the cart items array selectedCharms.forEach(charm => { let charmId = parseInt(charm.getAttribute('data-id'), 10); if (!charmId) { console.warn("Charm with no data-id found:", charm); return; } form.items.push({ id: charmId, quantity: 1 }); console.log(`Charm with ID ${charmId} added to cart items.`); }); if (form.items.length === 0) { console.warn("No items to add to the cart."); return; } console.log("All cart items ready to be added:", form.items); // Sending all items together await fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) }) .then(response => { if (!response.ok) { throw new Error(`Server responded with status: ${response.statusText}`); } return response.json(); }) .catch((error) => { console.error('Error:', error); }); }); Here is my console: Necklace variant added to cart items: 45484000182550 scripts.js?567:100 Found 3 selected charms. scripts.js?567:114 Charm with ID 8768164200726 added to cart items. scripts.js?567:114 Charm with ID 8483792650518 added to cart items. scripts.js?567:114 Charm with ID 8523530764566 added to cart items. scripts.js?567:122 All cart items ready to be added: (4) [{…}, {…}, {…}, {…}] Here is the request payload [ { "id": 45484000182550, "quantity": 1 }, { "id": 8768164200726, "quantity": 1 }, { "id": 8483792650518, "quantity": 1 }, { "id": 8523530764566, "quantity": 1 } ]
You are receiving this error because as per Shopify docs id only accepts variant ids and not product ids. You mentioned that you're getting the clicked item ids through product.id but you should be referencing variant.id. You can loop through product.variants to get all the variant.id of a product and assign them to your data-id attribute. Check the following Liquid API for more information about product and variant properties: https://shopify.dev/docs/api/liquid/objects/product https://shopify.dev/docs/api/liquid/objects/variant

December 30, 2023

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.