One item in cart at a time

Support
,
#1

Hello, I currently have data-item-max-quantity=1 on the items which works at limiting the amount of a particular item in the cart to 1, how can i make it so that it can only be one of any item in the cart at a time?

Any help would be welcome and greatful

#2

I believe the cart itself can not limit to only 1 item . Nevertheless, your front end javascript can.

Add some logic using a JS Cookie

The following has to be done after snipcart is loaded NOT on document ready

document.addEventListener(‘snipcart.ready’, () => {

  // This is called AFTER item is added.
  Snipcart.events.on('item.added', (parsedCartItem) => {
       Cookies.set('block', true);
   });

}

Then disable the button which blocks uses from clicking. The following can be done on the usual doc loaded.

document.addEventListener(“DOMContentLoaded”, () => {

    addEventListenerById('add-item-button', 'click', function(evt) {
          if (Cookie.get('block') == true) {
                    evt.target.disabled = true; 
                 // or this.disabled = true 
         }
    });

}

And then remove the cookie so the user can come back after the session. Or set an expiry.

It may have errors but thats the gist.

1 Like
#3

In fact, remove that cookie when the cart is confirmed.

document.addEventListener(‘snipcart.ready’, () => {

  Snipcart.events.on('item.added', (parsedCartItem) => {
       Cookies.set('block', true);
   });

  Snipcart.events.on('cart.confirmed', (cartConfirmResponse) => {
     Cookies.remove('block')
   });
}
1 Like
#4

Thanks so much, i will play around with this. Another question whilst i have your attention (if you don’t mind) … could the cart be emptied before an item is added? is there an event for that?

#5

My attention was not so great it seems.

You can likely it do it prior to adding. There is an event fired called item.adding. I dont see a handy cart.reset function I do see something that provides the cart state including the items in that cart and also a remove item

// Pre
  Snipcart.events.on('item.adding', (parsedCartItem) => {
        let state = Snipcart.store.getState();
       // iterate over the items
     
 try {
    await Snipcart.api.cart.items.remove('{itemUniqueId}');
} catch (error) {
    console.log(error)
}
   });

Something along that lines is essentially a ‘reset’
All that needs to be inside the cart.ready as stated

#6

hi Adrian, sorry to be a pest but i’ve tried the following:

let state = Snipcart.store.getState();

let items = state.cart.items.items;

for (let i = 0; i < items.length; i++) {

  await Snipcart.api.cart.items.remove(items[i].id);

}

i get snipcart_error_item_not_found, but when i log the id, it displays.

#7

the id you are using is your product ID not the unique id of the product in the cart.

Snipcart.api.cart.items.remove(items[i].uniqueId);

1 Like
#8

:weary: :see_no_evil:
Thank you, Adrian.

#9

Agh. I know It’s confusing. It should be id and productId

#10

Hi there!

I’ve been looking to implement this feature but i’m relatively new to code. Would someone like to share a breakdown of this implementation in simpler terms?

Any help is appreciated, thank you!