UI-Extensions POS Cart API: Add multiple line items with same variantId

Extensions
12

Hi all,

I just posted this same answer on this post.

I’ve been experimenting with this and I believe splitting line items that have different properties is definitely possible in POS now.

Here is how I managed to get it working.

Method 1: Sequential Adding

You can combine addLineItem with addLineItemProperties to separate them right from the start.

// 1. Add the base variant (ID: 55443322) to the cart
// This generates a line item. Let's assume the UUID becomes 'uuid-original-A'
api.cart.addLineItem(55443322, 1);

// 2. Attach a specific property to that unique line item UUID
api.cart.addLineItemProperties('uuid-original-A', { Monogram: 'JS' });

// 3. Add the same variant again
// This generates a NEW line item. Let's assume UUID is 'uuid-new-B'
api.cart.addLineItem(55443322, 1);

// The cart now treats these as distinct entries because their properties differ.
// Resulting State:

| Line Item UUID | Variant ID | Qty | Properties |
| :--- | :--- | :--- | :--- |
| uuid-original-A | 55443322 | 1 | Monogram: JS |
| uuid-new-B | 55443322 | 1 | *None* |

// Note: If you were to add { Monogram: 'JS' } to 'uuid-new-B' later,
// POS would automatically merge them back into a single line item with Qty 2.

Method 2: Splitting Existing Items via bulkCartUpdate

If you have a line item with a quantity greater than 1 and need to split it programmatically, you can use a reducer to rebuild the line item array.

The Scenario: Imagine you have a cart where Item uuid-original-A has a Quantity of 3, and you want to separate one of them to add a property.

const currentCart = useCartSubscription();

// The UUID of the line item we want to target
const targetUuid = 'uuid-original-A';

// Build a new array of items
const newCartState = currentCart.lineItems.reduce((list, row) => {
  
  if (row.uuid === targetUuid) {
    // We found the target. Return an array injecting the split items.
    return [
      ...list,
      // 1. Keep the original item but decrement quantity by 1
      {
        ...row,
        quantity: row.quantity - 1
      },
      // 2. Create the split item with Quantity 1 and the new Property
      {
        ...row,
        uuid: "new-uuid-generated-explicitly", // It's best to supply a fresh UUID here
        quantity: 1,
        properties: { Monogram: 'JS' }
      }
    ];
  }

  // If it's not the target, just push it to the list unchanged
  return [...list, row];
}, []);

// Commit the changes to the cart
api.cart.bulkCartUpdate({
  ...currentCart,
  lineItems: newCartState
});

// Final Cart Result:
| Line Item UUID | Variant ID | Qty | Properties |
| :--- | :--- | :--- | :--- |
| uuid-original-A | 55443322 | 2 | *None* |
| new-uuid-gener... | 55443322 | 1 | Monogram: JS |
| [other-items]  | ... | ... | ... |