Automatically add product to cart on load (Shipping Protection)

[erikwest]

I have a working shipping protection product toggle in the cart using {{routes.cart_change_url}} and 'data-ajax-cart-request-button'

What I really need is to add this shipping protection product on load, basically acting as a shipping protection is "enabled by default".

Ideally I can use liquidAjaxCart.change(body, options) somehow instead of add to make sure quantity is always 1 on this product. If must use .add() then need to loop through cart to make sure product isn't already added.

I tried various ways with little success. Any ideas?

Prefer not having to use jquery ajax to accomplish. Thanks

[EvgeniyMukhamedjanov]

Hello @erikwest
This is the code that will add the product if it is not in the cart and remove the extra if it is more than 1.
I'm not sure about other requirement that is why I left comments there so that you can change whatever you want.
What you need to do is to provide the ID of the variant of the Shipping Protection product, not product id.
It is on the 4th line in the code:

// Function that adds the Shipping Protection product if it isn't in the cart
// and remove extra Shipping Protection products if they are more than one in the cart
function adjustShippingProtection() {
  const variantId = 40934235668668; // variant ID of the Shipping Protection product

  // Find the index of the Shipping Protection product in the cart
  const index = liquidAjaxCart.cart.items.findIndex(lineItem => {
    return lineItem.variant_id === variantId;
  });

  // if there is no Shipping Protection products -- lets add it
  if (index === -1) {
    liquidAjaxCart.add({
      items: [{
        id: variantId,
        quantity: 1,
      }]
    }, {
      important: true, // run the request right away
      info: { custom: true } // not to run the liquid-ajax-cart:request-end again after the request
    });
    return;
  }

  // If there is more than 1 Shipping Protection product in the cart -- decrease it
  if (liquidAjaxCart.cart.items[index].quantity > 1) {
    liquidAjaxCart.change({
      line: index,
      quantity: 1
    }, {
      important: true, // run the request right away
      info: { custom: true } // not to run the liquid-ajax-cart:request-end again after the request
    });
  }
}

// Run Shipping Protection adjustment on load
if (window.liquidAjaxCart?.init) adjustShippingProtection();
else document.addEventListener("liquid-ajax-cart:init", adjustShippingProtection);

// Run Shipping Protection adjustment after each successful cart change done by the user
document.addEventListener('liquid-ajax-cart:request-end', event => {
  const {requestState} = event.detail;
  if (requestState.responseData?.ok && !(requestState.info.custom)) adjustShippingProtection();
})

[EvgeniyMukhamedjanov]

How can I run this mutation only when something is added to cart and cart was empty?

I would suggest to capture the state of the cart (if it is empty or not) on the liquid-ajax-cart:queue-start event, check the variable in the addShippingProtection mutation and stop the mutation if the cart wasn't empty:

let cartWasEmpty = undefined;
document.addEventListener("liquid-ajax-cart:queue-start", function() {
  cartWasEmpty  = liquidAjaxCart.cart.item_count === 0;
});

function addShippingProtection() {
  if (!cartWasEmpty) return;
  cartWasEmpty = undefined;
  // ...

But the requirement sounds strange. Why would you like to add the shipping protection only if the cart was empty before?

---

How can I remove shipping protection if shipping protection is the only thing in cart?

Change the conditions of the updateShippingProtection:

function updateShippingProtection() {
  const variantId = 47433236316470; 
  const items = window.liquidAjaxCart.cart.items;
  const lineItems = items.filter(item => {
    return item.variant_id === variantId;
  });
  if (lineItems.length === 0) {
    return;
  }

  // Calculate how many shipping protection items are in the cart 
  // and compare with total cart qty. If they are equal - clear the cart
  const lineItemsCount = lineItems.reduce((acc, cur) => {
    return acc + cur.quantity
  }, 0);
  if (lineItemsCount === window.liquidAjaxCart.cart.item_count) {
    return {
      requests: [
        {
          type: "clear",
          body: {}
        }
      ]
    }
  }

  if (lineItems.length === 1 && lineItems[0].quantity === 1) {
    return;
  }
    

  const updates = {};
  for (let i = 0; i < lineItems.length; i++) {
    updates[lineItems[i].key] = (i === 0 ? 1 : 0);
  }
  return {
    requests: [
      {
        type: "update",
        body: {
          updates
        }
      }
    ]
  }
}

I didn't run the code so pls test that there is no errors.

[erikwest]

I'm trying to give the best user experience by adding shipping protection only once initially when a user lands and adds something to cart. If they remove all products from cart then shipping protection should be removed too so it is never alone in cart. if they add a product back to a now empty cart then shipping protection is re-added acting as the first add to cart all over again. What do you think? Hope that makes somewhat sense lol

[EvgeniyMukhamedjanov]

@erikwest I see now.
So ignore my changes for the addShippingProtection function, they aren't necessary.
The result code should be the following:

function addShippingProtection() {
  const variantId = 47433236316470;
  const cart = window.liquidAjaxCart.cart;
  if (cart.item_count === 0) {
    return;
  }
  const lineItem = cart.items.find(item => {
    return item.variant_id === variantId;
  });
  if (lineItem) {
    return; 
  }
  return {
    requests: [
      {
        type: "add",
        body: {
          items: [{
            id: variantId,
            quantity: 1,
          }]
        }
      }
    ]
  };
}
function updateShippingProtection() {
  const variantId = 47433236316470; 
  const items = window.liquidAjaxCart.cart.items;
  const lineItems = items.filter(item => {
    return item.variant_id === variantId;
  });
  if (lineItems.length === 0) {
    return;
  }

  // Calculate how many shipping protection items are in the cart 
  // and compare with total cart qty. If they are equal - clear the cart
  const lineItemsCount = lineItems.reduce((acc, cur) => {
    return acc + cur.quantity
  }, 0);
  if (lineItemsCount === window.liquidAjaxCart.cart.item_count) {
    return {
      requests: [
        {
          type: "clear",
          body: {}
        }
      ]
    }
  }

  if (lineItems.length === 1 && lineItems[0].quantity === 1) {
    return;
  }

  const updates = {};
  for (let i = 0; i < lineItems.length; i++) {
    updates[lineItems[i].key] = (i === 0 ? 1 : 0);
  }
  return {
    requests: [
      {
        type: "update",
        body: {
          updates
        }
      }
    ]
  }
}
window.liquidAjaxCart.conf('mutations',[addShippingProtection,updateShippingProtection]);

Pls test that there is no syntax errors and if it works as expected. If it doesn't -- let me know :-)

[erikwest]

Thanks! really appreciate it. This is working for me.

[EvgeniyMukhamedjanov]

Happy to help!