MOQ on cart total


I work together with a webflow web developer who has successfully integrated snipcart on our (webflow) website
Snipcart is now in test mode and everything seems to be working fine.

We sell 3 products - 3 vegan mayo sauce varieties.
We want a minimum order quantity of 3 (random) bottles of our mayo sauce.
It is therefore a necessity for us that we have an MOQ on the total order/shopping basket and not on an individual product/sauce variety.

Our Webflow developper can’t find anything in the documentation for MOQ on total order/cart.
How can we achieve this? Can someone help us please?

I’ve answered to your email, but for anyone finding this topic on a search for something similar. You can use our customization Customization – Snipcart Documentation to change the logic surrounding the checkout button. You would need to override the cart component and find the checkout button (there is a big comment BUTTON: checkout right before).

The first code snippet below simply changes the disable option to add a minimum quantity to it.
The second snippet changes the logic to disable it like before AND change the state to error with and error message if the cart quantity is lower than wanted (the error state does not disable the button, so I had to also disable)

    :state="checkoutDisabled || cart.items.count < 3 ? 'disabled' : undefined"
    label-error="Three sauces required to checkout"
    :disabled="checkoutDisabled || cart.items.count < 3 ? true : undefined"
    :state="cart.items.count < 3 ? 'error' : undefined"
1 Like

This is a cool snippet. Thank you for sharing it!

Thanks, this is exactly what I’m looking for but I cannot for the life of me figure out how to implement this. I’ve tried all kinds of templating methods but I’m missing something.

Is it possible for you to provide a complete working example wioth all the template parts involved?

Sure, here would be the whole snipcart-templates.html The change is to the checkout button just below the comment, I put the first example which disables the button without any warning.

<div id="snipcart-templates">
    <section class="snipcart-cart__content">
          v-if="isSideCart && hasActiveDiscountsTriggerableByCode"
          <li class="snipcart-item-line snipcart-item-line--cart-edit">
            <div class="snipcart-item-line__container">
              <discount-box class="snipcart-cart__discount-box"></discount-box>
      <div class="snipcart-cart__footer">
          class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions"
            v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"

        <div class="snipcart-cart__footer-col">
            {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}

            v-if="!editingCart || isSideCart"
              v-if="errors != null"
            <!-- BUTTON: checkout -->
              :state="checkoutDisabled || cart.items.count < 3 ? 'disabled' : undefined"

          <div class="snipcart-cart__featured-payment-methods-container">

Hey thanks so much! Will fiddle with this.