Updating OLM Advantage Shopify Theme

Adding Quantity Limits to Products
  1. Create product templates
  2. Update cart.liquid

Create the following product templates:

quantity-limit
quantity-limit-1
quantity-limit-2
quantity-limit-3
quantity-limit-4

Screenshot 2016-06-06 09.26.07 Screenshot 2016-06-06 09.27.24        

Note: Make sure the template names are spelled correctly and product is only listed once in the file name. if not this technique will not work. Screenshot 2016-06-06 09.30.44


  2. Update cart.liquid with the following code:
{% include 'theme-variables' %}
<section id="cart-wrap" class="section-wrap">
  {% include '__containers-open' %}
  <h1 class="page-header">{{ page_title }}</h1>
  {% if has_cart and cart.item_count > 0 %}
  <script type="text/javascript">
    function remove_item(id) {
      document.getElementById('updates_'+id).value = 0;
      document.getElementById('cart').submit();
    }
  </script>

  <div class="text-left">
    {% if settings.cart-page-content %}
    {{ pages[settings.cart-page-content].content }}
    {% endif %}
    <form action="/cart" method="post" id="cart">
      <div class="row">
        <div class="{% if settings.show-shipping-estimator %}col-md-9{% else %}col-md-12{% endif %}">
          <h3>{% include '__localize' with 'Your items' %}</h3>
          <table class="table {% include '__table-formatting' %}">
            <tbody>
              {% for i in cart.items %}
              <tr>
                <td class="col-sm-2 hidden-xs"><img src="{{ i | img_url: 'medium' }}"></td>
                <td>
                  <h4>
                    {{ i.product.title | link_to: i.url }}<br>
                    <small class="text-muted">{{ i.variant.title }}</small><br>
                  </h4>
                  <p>
                    <small class="text-muted">
                      <dl>
                        {% for p in i.properties %}
                        {% unless p.last == blank %}
                        <dt>{{ p.first }}:</dt>
                        <dd>
                          {% if p.last contains '/uploads/' %}
                          <a href="#{{ i.product.handle}}" data-toggle="modal">{{ p.last | split: '/' | last }}</a>
                          <div class="modal fade" id="{{ i.product.handle }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                              <div class="modal-content">
                                <img src="{{ p.last }}" alt="{{ p.first }}">
                              </div>
                            </div>
                          </div>
                          {% else %}
                          {{ p.last }}
                          {% endif %}
                        </dd>
                        {% endunless %}
                        {% endfor %}
                      </dl>
                    </small>
                  </p>
                </td>
                <td><span class='money'>{{ i.price | money_with_currency | replace: ' ','&nbsp' }}</span></td>
                <td class="text-center col-xs-2">
                  {% assign product_max_qty = blank %}
                  {% if i.product.template_suffix == 'quantity-limit-1' %}
                  {% assign product_max_qty = 1 %}
                  {% elsif i.product.template_suffix == 'quantity-limit-2' %}
                  {% assign product_max_qty = 2 %}
                  {% elsif i.product.template_suffix == 'quantity-limit-3' %}
                  {% assign product_max_qty = 3 %}
                  {% elsif i.product.template_suffix == 'quantity-limit-4' %}
                  {% assign product_max_qty = 4 %}
                  {% elsif i.product.template_suffix == 'quantity-limit' %}
                  {% assign product_max_qty = settings.product-max-quantity  %}
                  {% endif %}

                  {% if i.variant.inventory_quantity <= 1 and i.variant.inventory_management == 'shopify' and i.variant.inventory_policy == 'deny' %}
                  <input type="hidden" name="updates[{{ i.id }}]" id="updates_{{ i.id }}" value="{{ i.quantity }}"/>
                  {{ i.quantity }}
                  {% else %}
                  <input type="number" class="form-control" name="updates[{{ i.id }}]" id="updates_{{ i.id }}" value="{{ i.quantity }}" min="0"{% if product_max_qty %} max="{{ product_max_qty }}"{% endif %} onfocus="this.select();"/>
                  {% endif %}
                </td>
                <td><a class="text-muted" href="#" onclick="remove_item({{ i.variant.id }}); return false;"><i class="fa fa-times"></i></a></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% if settings.show-shipping-estimator %}
        <div class="col-md-3">
          {% include 'shipping-calculator' %}
        </div>
        {% endif %}
      </div>
      <div class="row">
        <div class="form-group col-sm-8 col-md-9">
          <h4>{% include '__localize' with 'Any comments or special instructions?' %}</h4>
          <div class="collapse in cart-note-action">
            <a href="#cart-note" class="btn btn-default" data-toggle="collapse">Add note</a>
          </div>
          <div class="collapse cart-note" id="cart-note">
            <textarea id="note" name="note" class="form-control" rows="3">{{ cart.note }}</textarea>
          </div>
        </div>

        <div class="form-actions text-right col-sm-4 col-md-3">
          <div class="product-price"><small>{% include '__localize' with 'Sub-total' %}</small> <span class='money'>{{ cart.total_price | money_with_currency | replace: ' ','&nbsp' }}</span></div>

          {% include 'free-shipping-message' %}

          {% if settings.show-agree-with-terms-and-conditions-checkbox %}
          {% comment %}Need to tidy this up{% endcomment %}
          <p style="float:none; text-align:right; clear: both; margin: 10px 0;">
            <input type="checkbox" id="agree" />
            <label for="agree">{% include '__localize' with 'I agree with the terms and conditions.' %}</label>
          </p>
          {% endif %}

          {% if settings.ajax-cart %}
          <input type="submit" name="checkout" value="{% include '__localize' with 'Checkout' %}" class="btn btn-primary btn-block btn-main" />
          {% else %}
          <div class="btn-group">
            <input type="submit" id="update-cart" name="update" value="{% include '__localize' with 'Update' %}" class="btn btn-default" />
            <input type="submit" name="checkout" value="{% include '__localize' with 'Checkout' %}" class="btn btn-primary btn-main" />
          </div>
          {% endif %}
          {% if additional_checkout_buttons %}
          <div class="additional-checkout-buttons">
            <span class="text-muted">or</span>
            {{ content_for_additional_checkout_buttons }}
          </div>
          {% endif %}
        </div>
      </div>
    </form>
  </div>

  {% else %}
  {% assign cart_message = 'Your cart is empty' %}
  {% unless has_cart %}{% assign cart_message = 'The shopping cart is currently disabled' %}{% endunless %}
  <p class="lead">
    {% include '__localize' with cart_message %}.{% unless settings.collection-to-link-to-if-cart-empty == blank %} <a href="{{ collections.[settings.collection-to-link-to-if-cart-empty].url }}">{% include '__localize' with 'Browse' %} {{ collections.[settings.collection-to-link-to-if-cart-empty].title }}</a>.{% endunless %}
  </p>
  {% endif %}
  {% include '__containers-close' %}
</section>

{% if settings.show-agree-with-terms-and-conditions-checkbox %}
<script>
  $('[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if($('#agree').is(':checked')){
      $(this).submit();
    }
    else{
      alert("{% include '__localize' with 'You must agree with the terms and conditions of sales to check out.' %}");
            return false;
            }
            });
</script>
{% endif %}

Leave a comment