MOQ on cart total

Support
#1

Hello,

I work together with a webflow web developer who has successfully integrated snipcart on our (webflow) website www.fredsvegan.com.
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?

Checkout min. order value
#2

Hi,
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)

 <button-primary
    label="actions.checkout"
    icon="continue-arrow"
    :state="checkoutDisabled || cart.items.count < 3 ? 'disabled' : undefined"
    @click="checkout"
></button-primary>

<button-primary
    label="actions.checkout"
    icon="continue-arrow"
    label-error="Three sauces required to checkout"
    :disabled="checkoutDisabled || cart.items.count < 3 ? true : undefined"
    :state="cart.items.count < 3 ? 'error' : undefined"
    @click="checkout"
></button-primary>
1 Like
#3

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

#4

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?

#5

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">
  <cart>
    <section class="snipcart-cart__content">
      <item-list
        item-template="item-line"
        class="snipcart-item-list--no-shadow"
        :show-description="!isSideCart"
      >
        <template
          v-slot:footer
          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>
          </li>
        </template>
      </item-list>
      <div class="snipcart-cart__footer">
        <div
          class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions"
        >
          <discount-box
            v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"
            class="snipcart-cart__discount-box"
          ></discount-box>
        </div>

        <div class="snipcart-cart__footer-col">
          <summary-fees
            class="snipcart-cart-summary-fees--reverse"
            :summary-data="summaryFeesProvider"
          >
            {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
          </summary-fees>

          <footer
            v-if="!editingCart || isSideCart"
            class="snipcart-cart__footer-buttons"
          >
            <flash-message
              type="error"
              v-if="errors != null"
              :title="$localize('errors.order_validation.custom_fields_validation.title')"
            >
              {{$localize('errors.order_validation.custom_fields_validation.description')}}
            </flash-message>
            <!-- BUTTON: checkout -->
            <button-primary
              label="actions.checkout"
              icon="continue-arrow"
              :state="checkoutDisabled || cart.items.count < 3 ? 'disabled' : undefined"
              @click="checkout"
            ></button-primary>
            <button-link
              v-if="isSideCart"
              label="cart.view_detailed_cart"
              @click="viewDetailedCart"
            ></button-link>
          </footer>

          <div class="snipcart-cart__featured-payment-methods-container">
            <featured-payment-methods
              v-if="!editingCart"
            ></featured-payment-methods>
          </div>
        </div>
      </div>
    </section>
  </cart>
</div>
#6

Hey thanks so much! Will fiddle with this.