Shopify / ui-extensions

MIT License
269 stars 35 forks source link

Unable to Remove Custom Attributes with useApplyCartLinesChange #2484

Open ontimond opened 5 days ago

ontimond commented 5 days ago

Description

The useApplyCartLinesChange function allows updating a line item in the Shopify checkout. While it supports adding and updating custom attributes through the attributes array, it does not currently provide a way to remove an attribute that has already been added to the line item. This limitation prevents clearing or resetting custom attributes, which is necessary in certain scenarios.

Steps to Reproduce

  1. Use the useApplyCartLinesChange hook to add custom attributes to a cart line item.
  2. Attempt to remove a previously added custom attribute by passing an updated attributes array without the attribute you wish to remove.
  3. Observe that the attribute remains in the line item instead of being removed.

Expected Behavior

When an updated attributes array is passed to the useApplyCartLinesChange function, any attributes missing from the array should be removed from the line item in the checkout.

Actual Behavior

Attributes that are not included in the updated attributes array remain in the line item, making it impossible to delete attributes.

Example Code

Here is an example of the issue:


const applyCartLineChange = useApplyCartLinesChange();

const updateAttributes = async () => {
  await applyCartLineChange([
    {
      id: 'line-item-id',
      type: 'updateCartLine',
      attributes: [
        { key: 'custom_key', value: 'new_value' }, // Adding or updating an attribute works
      ],
    },
  ]);

  // Attempting to remove the custom_key attribute
  await applyCartLineChange([
    {
      id: 'line-item-id',
      type: 'updateCartLine',
      attributes: [], // Expected to remove all attributes
    },
  ]);
};

// The `custom_key` attribute remains present after the second update.
dnagoda commented 4 days ago

@ontimond Thanks for the report.

I'm not able to reproduce this issue. I can clear cart lien attributes using a call like:

applyCartLineChange([
    {
      id: 'line-item-id',
      type: 'updateCartLine',
      attributes: [], // Expected to remove all attributes
    },
  ]);

And I can also see add and then immediate clear them as shown in your example code above.

Can you provide more details about your use case that might help us investigate this further?