I'm working on a Shopify store where I need to allow users to customize each individual cart item separately, even if they have added the same product multiple times with different quantities. For example, a customer can add a product to the cart with a quantity of 2 but would like to personalize each item (e.g., sending cakes to different people by adding From - For products might be same and in bulk quantity). I have split the quantity in the cart visually using Liquid like this: {%- for i in (1..item.quantity) -%} <!-- Displaying each item separately --> {%- endfor -%} However, when I try to update the properties for a specific "split" item (via the line property in the Shopify cart API), it updates all the items in that line instead of just one. Here’s a snippet of how I'm trying to update the line item in the cart: const item_variant_id = this.querySelector('input[name="item_variant_id"]'); const item_variant_key = this.querySelector('input[name="item_variant_key"]'); const line_item_index = this.querySelector('input[name="line_item_index"]'); const body = JSON.stringify({ line: line_item_index.value, // 1-based index of the line item in the cart quantity: 2, // just for testing properties: { "FROM": nombreField.value, "FOR": celularField.value } }); Screenshot Splitted Cart Items
Jese Leos
September 24, 2024
Verified user
In Shopify, the Cart object groups line items with the same variant ID and properties together. If you want to treat each individual item as separate (for instance, adding the same product multiple times but allowing for unique customizations), you need to ensure each line item has a unique property, even if it's the same product variant. The key to solving this problem is to use Shopify's Ajax Cart API and add a unique identifier (line item property) when adding the product to the cart. This way, Shopify will treat them as separate line items, even if they have the same product variant ID. You can implement this by doing: Each time a product is added to the cart, generate a unique identifier (e.g., a random number or a timestamp) to distinguish it from other instances of the same product. And then, when adding the product to the cart via Ajax API, include this unique identifier in the properties field. The below code snippet is an example that you can refer to: let variantData = null; let identifier = Math.floor(Math.random() * 9000000000) + 1000000000; // Generate a random 10-digit number, just for your refernece variantData = { id: variant_id, // Product's variant ID quantity: quantity, // Quantity to add properties: { _lineitem_identifier: identifier // Unique identifier to differentiate items } }; console.log('Variant data:', variantData); try { const response = await fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(variantData) }); const responseResult = await response.json(); console.log('The product has been added to cart successfully:', responseResult); } catch (error) { console.error('Error:', error); } I hope this helps you!