No more than 2 times the same product in the cart

[haroldao]

By any chance do you know how to implement this feature ?

The merchant I work with wants the customer not to add the same product twice in his cart...

[EvgeniyMukhamedjanov]

Hey @haroldao , did you consider the line item script creator?
https://jgodson.github.io/shopify-script-creator/

[haroldao]

Only available for Shopify Plus merchants ... :/

Hey @haroldao , did you consider the line item script creator? https://jgodson.github.io/shopify-script-creator/

[EvgeniyMukhamedjanov]

If your customer is not on Shopify Plus, then I would say there is no 100% way to forbid adding more than two items.
But it is possible to intercept all the liquid ajax cart requests using the subscribeToCartAjaxRequests function, check how many same items already in the cart and change the request not to let adding more.

Also you can use the subscribeToCartStateUpdate function that invokes your callback and pass the cart state. You can find all the line items that have quantity = 2 and make all the related buttons/forms disabled. You can check here if a line item has qty more than 2, then run cartRequestChange to reduce the quantity as well.

Technically it is possible to surpass if a user is tech-savvy and knows how to make fetch requests via console :-)
Or they can switch off JavaScript and send "add to cart" form. But I think it will be no more than 0.01% users (of course if your merchant doesn't sell something high demanded).

I will try to make the examples tomorrow with the subscribeToCartStateUpdate and subscribeToCartAjaxRequests functions. If you manage before I publish -- let me know :-)

I'll convert the issue to a discussion.

[haroldao]

Thank you so much for your help / time 🙌🏽!

[EvgeniyMukhamedjanov]

@haroldao hi again!
The following code will forbid to add to cart the same variant more than the limit. It will work only for forms and '/cart/add.js' requests. Go through my comments there, add the code to implement into your project and test it. If it works for you, I will show how to forbid exceeding the limit for the "Plus 1" buttons and Quantity inputs.

import { subscribeToCartAjaxRequests, getCartState, subscribeToCartStateUpdate } from 'liquid-ajax-cart';

const limit = 2;

// Returns object { 'variant_id': quantity } from the current cart
function getCartVariants() {
  const result = {};
  const state = getCartState();
  for (let i in state.cart.items) {
    const item = state.cart.items[i];
    if (!(item.variant_id in result)) {
      result[item.variant_id] = 0;
    }
    result[item.variant_id] += item.quantity;
  }
  return result;
}

// Go through all the variants in the cart and find those that quantity is equal to the limit
subscribeToCartStateUpdate(() => {
  const cartVariants = getCartVariants();
  for (let variant in cartVariants) {
    if (cartVariants[variant] >= limit) {
      // Disable all the "add to cart", "Plus 1" buttons related to the variant

      // If you want you can run a cartRequestUpdate to reduce the quantity for those variants that exceed the limit
      // But it might be tricky if your items have properties, then your cart might contain few items with the same variant_id
    }
  }
})

// If an "Add to cart" request happens — reduce the request quantity not to exceed the limit
subscribeToCartAjaxRequests(requestState => {
  if ( requestState.requestType === 'add' ) {
    let variant = undefined; // current variant that is going to be added to the cart
    let quantity = 1; // current quantity that is going to be added to the cart

    if (requestState.requestBody instanceof FormData || requestState.requestBody instanceof URLSearchParams) { // If the request comes from Form
      if (requestState.requestBody.has('id')) {
        variant = requestState.requestBody.get('id');
      }
      if (requestState.requestBody.has('quantity')) {
        quantity = Number(requestState.requestBody.get('quantity').toString());
      }
    } else if (requestState.requestBody.items) { // If the request is { items: [{ id: 123456, quantity: 1 }] }
      variant = requestState.requestBody.items[0].id;
      if ('quantity' in requestState.requestBody.items[0]) {
        quantity = Number(requestState.requestBody.items[0].quantity);
      }
    } else { // If the request is { id: 123456, quantity: 1 }
      variant = requestState.requestBody.id;
      if ('quantity' in requestState.requestBody) {
        quantity = Number(requestState.requestBody.quantity);
      }
    }

    if (!variant || isNaN(quantity)) return;
    const cartVariants = getCartVariants();
    const alreadyInCart = cartVariants[variant] || 0;

    // If current cart items + adding items don't exceed the limit — don't do anything
    if (alreadyInCart + quantity <= limit) return; 

    // Calculate how many items we can add to the cart and not exceed the limit
    let newQuantity = limit - alreadyInCart;
    if (newQuantity < 0) {
      newQuantity = 0;
    }
    alert(`You're trying to add more than ${ limit } products to your cart. ${ newQuantity > 0 ? `We will add only ${ newQuantity }` : '' }`);

    // It is not possible to cancel the current request in Liquid Ajax Cart,
    // but it is possible to adjust it
    if (requestState.requestBody instanceof FormData || requestState.requestBody instanceof URLSearchParams) {
      requestState.requestBody.set('quantity', newQuantity);
    } else if (requestState.requestBody.items) {
      requestState.requestBody.items[0].quantity = newQuantity;
    } else {
      requestState.requestBody.quantity = newQuantity;
    }
  }
});

In the subscribeToCartStateUpdate function you can switch off (disable or hide or remove data-ajax-cart attribute, whatever) all the buttons or forms that might increase the qty of a line item when it is equal to limit.

In the subscribeToCartAjaxRequests function you intercept all the Liquid Ajax Cart "add to cart" request if they somehow happened and reduce the "add to cart quantity" not to exceed the limit.

[haroldao]

Thank YOU SO MUCH 🎉🎉!

[EvgeniyMukhamedjanov]

Welcome! Just test it first with addtocart buttons. Then we will also need to add a handler for quantity input and 'change' request.

[mircomartin]

Hello! First! It's the best library for shopify store front development, the code works perfectly! but the problem is when you try to add with buttons minus and and plus, you can add, is there some workaround for that? thanks!!!! sorry for my english im from argentine!

[mircomartin]

@EvgeniyMukhamedjanov hi! works very well, but now i have to fix the quantities buttons, can you help me??

[EvgeniyMukhamedjanov]

Hi. What exactly doesn't work in quantity buttons ?
@mircomartin

[mircomartin]

@EvgeniyMukhamedjanov the limit of the same product, only works in add to cart button, but in the cart-drawer you can add more than two.