Question about multiple change request on mutation (change quantity to 0)

[menya-TIS]

It's probably not an issue on liquid-ajax-cart side, so I'm creating a Q&A. I hope someone can drive me in the right direction:

Scenario

When a user adds a (main) product to their cart, I would like n additional related products to be programmatically added with quantity 1. Every related product should be removed as well if the primary product is removed.

Expected Behaviour

The cart items should retain their cart_item.key value in between "change" requests, and the cart should lose the items one by one.

Current Behaviour

The first related cart item has been removed, and the remaining related product - change request ends up in 400:

{ description :  "no valid id or line parameter" message :  "no valid id or line parameter" status :  "bad_request" }

It appears that the cart_item.key value varies between "change" requests.
The first 1-3 related products have been removed if I use the "line" attribute in the change request, but the remaining products have not. resulting in the identical error.

Steps to Reproduce

Add a mutation:

configAjaxCart() {
  window.liquidAjaxCart.conf('updateOnWindowFocus', false)
  window.liquidAjaxCart.conf('mutations', [removeCrossProductsWithoutMain])
}

Pseudo remove implementation

const removeCrossProductsWithoutMain = () => {
  // ...
  const cart = window?.liquidAjaxCart?.cart
  // ...
  const requests = cart.items.reduce((acc, item) => {
    // ...
    if (!hasMainInCart) {
      acc.push({
        type: 'change',
        body: {
          id: item.key,
          quantity: 0
        }
      })
    }
    return acc
  }, [])

  if (requests.length) {
    return {
      requests
    }
  }
}

Question
Am I missing / overlooking something? I did not find any recent changes on the Shopify side, but the exact same code used to work about a month ago. Is this the right approach to implementing such a feature?

I would appreciate if one could drive me to the right direction. I'm pretty new to Shopify Liquid, but I really enjoy using this nimble library, thanks! 🙏 

[EvgeniyMukhamedjanov]

Hi @menya-TIS
If you need to remove a few items I would suggest using only one update request rather that a few change requests.
https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-update-js
First advantage is performance (one request vs a few requests)
and Second advantage is the item key will work as expected.
I also noticed that item key might change but still didn't dive into why it happens.

So pls try the following approach and let me know if that works:

const removeCrossProductsWithoutMain = () => {
  // ...
  const cart = window?.liquidAjaxCart?.cart

  const requestBody = {}
  cart.items.forEach(item => {
    if (!hasMainInCart) {
      requestBody[item.key] = 0;
    }
  });

  if (Object.values(requestBody).length > 0) {
    return {
      requests: [
        {
          type: 'update',
          body: requestBody
        }
      ]
    }
  }
  return null;
}

The idea is to use the update request which supports updating the quantities of multiple line items according to the docs:
https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-update-js

First, we generate the request body for the update request that should have the following structure:

{
  cart_item_key1: 0,
  cart_item_key2: 0
}

where zeros are the new quantities, and pass this objects as a request body for the update request.

Pls let me know if that works. I didn't test the code yet :-)

[menya-TIS]

Hello @EvgeniyMukhamedjanov 👋
To begin with, I thank you for your prompt reply.

Based on your advice, I received a 200 on the mutation update request, however the response cart is exactly the same as the prev cart.

Update payload (with id):

{
  "40490355130486": 0,
  "40485208260726": 0,
  "40485159862390": 0,
  "40488409104502": 0,
  "40489405382774": 0,
  "sections": "minicart"
}

Update payload (with key):

{
  "40490355130486:f0f911050ac2ff4be8fae3c6b10022f6": 0,
  "40485208260726:2e13cf50514a2e2e775f85e65e58efd8": 0,
  "40485159862390:9101455dfde009782e557acc4181bd35": 0,
  "40488409104502:a40d84d6b848209ffb68405f91e59425": 0,
  "40489405382774:aad33e28706b891f16243e01d6422dc2": 0,
  "sections": "minicart"
}

Response:

{
  "token": "c1-15a05e6af51e5b77c1b304b1d2d2d5e0",
  "note": "",
  "attributes": {},
  "original_total_price": 21750,
  "total_price": 21750,
  "total_discount": 0,
  "total_weight": 0.0,
  "item_count": 5,
  "items": [
    {
      "id": 40490355130486,
      "properties": { "main_product_id": "40485129453686" },
      "quantity": 1,
      "variant_id": 40490355130486,
      "key": "40490355130486:f0f911050ac2ff4be8fae3c6b10022f6"
      // ... other attrs
    },
    // .... other items
  ]
}

Odd... I appreciate your advice in advance.

[EvgeniyMukhamedjanov]

@menya-TIS
I guess I didn't read the Shopify docs carefully.
The item keys shouldn't be the root props of the object.
It should be like this:

{
  updates: {
    cart_item_key1: 0,
    cart_item_key2: 0
  }
}

So the code should be the following:

const removeCrossProductsWithoutMain = () => {
  // ...
  const cart = window?.liquidAjaxCart?.cart

  const updates = {}
  cart.items.forEach(item => {
    if (!hasMainInCart) {
      updates[item.key] = 0;
    }
  });

  if (Object.values(updates).length > 0) {
    return {
      requests: [
        {
          type: 'update',
          body: { updates }
        }
      ]
    }
  }
  return null;
}

Could you try one more time and let me know pls :-)

[menya-TIS]

It works like a charm. Thanks a lot, Sir! 🥇