How to add minimum quantity to Ajax Drawer Cart?

ilprescelto88
New Member
1 0 0

Hi,

I've created a wholesale product page where I've managed to implement a minimum quantity for the quantity selector, meaning a customer has to select minimum 5 items for the product before adding to cart.

However, once they add to cart, they can press - in the Ajax drawer cart to reduce the quantity below 5, which I don't want to happen. Also, I've removed the regular cart page, so I'm only dealng with the slide out ajax cart.

How can I add a minimum quantity to the ajax slide out cart, based on product title or tag? (i.e. wholesale product should have a minimum quantity, regular product shouldn't). The products contain Wholesale in the product title so it should be easy enough to filter on that, I would think.

I've tried to modify the ajax-cart-template.liquid file by adding if statements to check for the product name and quantity being >= 5, however that doesn't seem to work, I'm not sure why. Here's the full file without edits:

<!-- /snippets/ajax-cart-template.liquid -->
{% comment %}

  This snippet provides the default handlebars.js templates for
  the ajax cart plugin. Use the raw liquid tags to keep the
  handlebar.js template tags as available hooks.

{% endcomment %}
  <script id="CartTemplate" type="text/template">
  {% raw %}
    <form action="{% endraw %}{{ routes.cart_url }}{% raw %}" method="post" novalidate class="cart ajaxcart">
      <div class="ajaxcart__inner ajaxcart__inner--has-fixed-footer">
        {{#items}}
        <div class="ajaxcart__product">
          <div class="ajaxcart__row" data-line="{{line}}">
            <div class="grid">
              <div class="grid__item one-quarter">
                <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
              </div>
              <div class="grid__item three-quarters">
                <div class="ajaxcart__product-name--wrapper">
                  <a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
                  {{#if variation}}
                    <span class="ajaxcart__product-meta">{{variation}}</span>
                  {{/if}}
                  {{#properties}}
                    {{#each this}}
                      {{#if this}}
                        <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
                      {{/if}}
                    {{/each}}
                  {{/properties}}
                </div>

                <div class="grid--full">
                  <div class="grid__item one-half">
                    <div class="ajaxcart__qty">



                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}"data-qty="{{itemMinus}}" data-line="{{line}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
                        <span class="icon icon-minus" aria-hidden="true"></span>
                        <span class="fallback-text" aria-hidden="true">&minus;</span>
                      </button>


                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
                      
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
                        <span class="icon icon-plus" aria-hidden="true"></span>
                        <span class="fallback-text" aria-hidden="true">+</span>
                      </button>
                    </div>
                  </div>
                  <div class="grid__item one-half text-right">
                    {{#if discountsApplied}}
                      <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
                      <del class="ajaxcart__price">{{{price}}}</del>
                      <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
                      <span class="ajaxcart__price">{{{discountedPrice}}}</span>
                    {{else}}
                      <span class="ajaxcart__price">{{{price}}}</span>
                    {{/if}}
                    {{#if unitPrice}}
                      <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
                      <span class="cart__unit-price">
                        {% endraw %}
                          {%- capture unit_price_separator -%}
                            <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
                          {%- endcapture -%}
                        {% raw %}

                        <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
                      </span>
                    {{/if}}
                  </div>
                </div>
                {{#if discountsApplied}}
                  <div class="grid--full">
                    <div class="grid__item text-right">
                      <ul class="order-discount order-discount--list order-discount--title order-discount--ajax-cart order-discount--ajax-cart-list" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
                        {{#each discounts}}
                          <li class="order-discount__item">
                            <span class="icon icon-saletag" aria-hidden="true"></span>{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
                          </li>
                        {{/each}}
                      </ul>
                    </div>
                  </div>
                {{/if}}
              </div>
            </div>
          </div>
        </div>
        {{/items}}

        {% endraw %}{% if settings.cart_notes_enable %}{% raw %}
          <div>
            <label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
            <textarea name="note" class="input-full" id="CartSpecialInstructions">{{note}}</textarea>
          </div>
        {% endraw %}{% endif %}{% raw %}
      </div>
      <div class="ajaxcart__footer ajaxcart__footer--fixed">
        <div class="grid--full">
          {{#if cartDiscountsApplied}}
            {{#each cartDiscounts}}
              <div class="grid__item two-thirds ajaxcart__discounts">
                <span class="order-discount order-discount--title order-discount--ajax-cart">
                  <span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}:</span>{{ this.title }}
                </span>
              </div>
              <div class="grid__item one-third text-right">
                <span class="ajaxcart__price">-{{{ this.formattedAmount }}}</span>
              </div>
            {{/each}}
          {{/if}}
          <div class="grid__item two-thirds">
            <p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
          </div>
          <div class="grid__item one-third text-right">
            <p class="ajaxcart__subtotal">{{{totalPrice}}}</p>
          </div>
        </div>

        <p class="ajaxcart__policies">{% endraw %}
          {%- capture taxes_shipping_checkout -%}
            {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
            {%- elsif shop.taxes_included -%}
              {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
            {%- elsif shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
            {%- else -%}
              {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
            {%- endif -%}
          {%- endcapture -%}
          {{ taxes_shipping_checkout }}
        {% raw %}</p>
        <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
          {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} <span class="icon icon-arrow-right" aria-hidden="true"></span>
        </button>
      </div>
    </form>
  {% endraw %}
  </script>
  <script id="AjaxQty" type="text/template">
  {% raw %}
    <div class="ajaxcart__qty">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">&minus;</span>
      </button>
      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">+</span>
      </button>
    </div>
  {% endraw %}
  </script>
  <script id="JsQty" type="text/template">
  {% raw %}
    <div class="js-qty">
      <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">&minus;</span>
      </button>
      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
      <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">+</span>
      </button>
    </div>
  {% endraw %}
  </script>

I also thought I could try changing in theme.js.liquid, since I've spotted where the + / - selector section is (below), however again I wasn't able to succesfully add an if condition to check the product title.

      // Add or subtract from the current quantity
      if ($el.hasClass('ajaxcart__qty--plus')) {
        qty += 1;
      } else {
        qty -= 1;
        if (qty <= 0) qty = 0;
      }

  Any help would be greatly appreciated, thanks!

 

0 Likes