Quantity buttons: Minus to 0

[driespieters]

When pressing the minus button so it reaches 0 nothing happens. (On V2 ajax-cart-quantity) Apart from removing an item from cart using the dedicated button, pressing minus is a common pattern to remove items.

Example to replicate: Demo store => add product to cart and change quantity to 0. https://liquid-ajax-cart.myshopify.com/cart/change?line=1&quantity=0

[EvgeniyMukhamedjanov]

Hey @driespieters I will add the option to reach zero then for the ajax-cart-quantity this week :-)

[EvgeniyMukhamedjanov]

Hello again! I've added the feature to the v2.0.1. It is available to download from the website/npm You should set the quantityTagAllowZero configuration parameter to true so that a user could reach "0" by clicking the minus button.

{% comment %} Somewhere in layout/theme.liquid {% endcomment %}

<script type="application/json" data-ajax-cart-initial-state>
  {{ cart | json }}
</script>

<script type="module">
  import '{{ "liquid-ajax-cart-v2.0.1.js" | asset_url }}';
  liquidAjaxCart.conf('quantityTagAllowZero', true);
</script>

Or if you use npm:

import 'liquid-ajax-cart';
liquidAjaxCart.conf('quantityTagAllowZero', true);

Let me know if that works for you :-)

[driespieters]

Ok great, thanks for the quick follow-up!

All though I would consider setting this as the default behavior. (For example Shopify supply / hydrogen does it. Dawn theme doesn't, they disable minus button and set cursor to "not allowed")

[EvgeniyMukhamedjanov]

@driespieters Initially the "must have" feature I wanted to add to the v2 was the "debounce" feature for the quantity control, so that a user can click a plus or minus button a few times in a row without waiting the changing request to finish after each click. Dawn has this feature as well as preventing a user from reaching 0. The preventing 0 makes sense to me because the user might accidentally reach 0 when rapidly clicking the minus button a few times without the intention to remove.

But I'm still not sure if the preventing 0 is a good UX, as I didn't make any research on that, relying on Shopify Dawn designers expertise, if you have any insights on that, it would be helpful :-)

P.S. once you test the quantityTagAllowZero Liquid Ajax Cart feature and it works for you, let me know, I'll close the issue.

[thagxt]

@EvgeniyMukhamedjanov • I believe that automatically removing a product from the cart when it reaches a quantity of 0 might be frustrating for users. If they accidentally reach a quantity of 0 and the product is removed, they will have to go back to the product page and add it back in. In my opinion, it seems like a neat feature, but it could potentially cause frustration for users in the situation described. It happened to me on some website which have this "feature". Maybe you can add it but leave as an optional so if someone wants it can turn it on in the options. idk

[EvgeniyMukhamedjanov]

@thagxt Thank you for your feedback! Liquid Ajax Cart v2.0.1 works exactly as you described. By default it is not possible to reach 0, but if you as a developer want to enable this feature, you can do that by using the quantityTagAllowZero conf parameter.

[driespieters]

Can confirm it's working, thanks!

I had a quick look at some big ecommerce players: it's a 50/50:

• Either they don't allow reaching 0, with the button being (visually) disabled.
• Or it does remove the item from cart

I think there is a use case for both UX so it's great this setting parameter is available. Agreed on keeping the default behavior, but it should be clear for the user. (So they don't just click minus and nothing happens)

[EvgeniyMukhamedjanov]

@driespieters It is a good callout that there should be the way to show that the "Minus" button is disabled when reached 0. Maybe it should be disabled/aria-disabled attr for the minus button, or setting the data-ajax-cart-quantity-minus attr value to disabled, or minus-disabled attr for the <ajax-cart-quantity> custom tag? So it will be possible to make it look disabled using CSS. I have one more update to add to the next minor version :-)