Updating OLM Advantage Shopify Theme
Adding Quantity Limits to Products
2. Update cart.liquid with the following code:
- Create product templates
- Update cart.liquid
Create the following product templates:
quantity-limit
quantity-limit-1
quantity-limit-2
quantity-limit-3
quantity-limit-4
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. ![]()
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: ' ',' ' }}</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: ' ',' ' }}</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 %}