Should not Add to Cart if Specific Product is Already in Cart

[x2fair]

Hi guys, can you help me with the customization that I wanted. Here is what I want to achieve.

Product: Gift Card

Product: Other Product

If Gift Card product is In Cart already, and assuming that I want to add another product. In the Other Product page, clicking the Add to Cart button should show Message Box that says, "Cannot add this to cart because Gift Card is in Cart" something like that.

If Other Product is In Cart, and assuming that I want to add a Gift Card product. In the Gift Card product page, clicking the Add to Cart button should show message box that says, "Other Product is In cart, you can't purchase them at once." something like that.

Hope you help me guys, please give me your thoughts.

Thanks in advance.

[Liam]

Hi X2fair,

This should be possible by using some JavaScript to track the cart contents, prevent a specific product from being added and display a message to the user. A very basic implementation of this could be:

// Assuming 'giftCard' and 'otherProduct' are the product handles of your products

document.querySelector('button.add-to-cart').addEventListener('click', function(event) {
  var cartItems = JSON.parse(localStorage.getItem('cart')) || [];
  
  if (this.dataset.productHandle === 'giftCard' && cartItems.includes('otherProduct')) {
    event.preventDefault();
    alert("Other Product is In cart, you can't purchase them at once.");
  } else if (this.dataset.productHandle === 'otherProduct' && cartItems.includes('giftCard')) {
    event.preventDefault();
    alert("Cannot add this to cart because Gift Card is in Cart");
  } else {
    cartItems.push(this.dataset.productHandle);
    localStorage.setItem('cart', JSON.stringify(cartItems));
  }
});

This script listens for clicks on the 'Add to Cart' button, checks the local storage for the current cart contents, and then prevents the product from being added to the cart if it conflicts with the existing cart contents. When a product is prevented from being added to the cart, a message is displayed to the user.

This could be added to the main theme.js file and might need to be modified to work with your theme - also one caveat is that this approach uses the browser's local storage to keep track of the cart contents, instead of making a network request to fetch the cart data from the server. If the cart is modified in another tab or window, or if the local storage data is cleared or becomes out of sync for any reason, the script might not have the correct cart data. 

Hope this helps!

[x2fair]

Hi Liam, thank you for your response, I am using Dawn theme.

I added the clicking of the add to cart code to global.js.

document.querySelector('button.product-form__submit.button.button--full-width.button--primary').addEventListener('click', function (event){
    console.log(this.dataset.productHandle);
    event.preventDefault();
});

That is returning undefined.

I also console log cartItems, and the result is this.

[DutchDelight]

Hi Liam,

Thank you for the code! It doesn't work THAT way, but I at least used your code as a framework to get something instead that DOES see the item in the cart and checks it's already there. However, when I push the button, I get the message the item is there, BUT it doesn't do an event.preventDefault(); as in it still adds the item to the cart. Now, I believe this has to do with the fact that the function (like the one you have) isn't tied to the form it's submitting. Is that correct? And if so, what do I need to do to actually prevent the item from being added to the cart?

[zhicheng1]

For me, localStorage.getItem('cart') is just '[null,null,null,null,null]' even though I have items in my cart.  Is there any documentation for client side apis that you are using?