Maximum Quantity Limiter – Shopify

Few days ago I was working on a Shopify project and I made some customization in the liquid files to add quantity limiter (to variants). Currently I have setup this only for “Maximum” quantity (i.e. customer can not purchase product/variants more than the defined limit). I believe there are some application available for this purpose but this functionality can be easily achieved without using any paid app.

Here is the demo (Later I’ll explain how to add this into shopify):

Product A (Single Variant): Bjml Mystic Water Clean

This product has different sizes and you can find the max quantity allowed for each variant in the product description section.

Product B (Multiple Variants): Bobby Straight Recycled Renegade Mens Jean

This product has multiple variants (Size, Leg) and you can find the max quantity allowed for each variant combination in the product description section.

Implementation in theme files

On my sandbox account, I am using Shopify Timber Theme and Metafields Editor (Free App) to add limit for each variant.

Step 1: Go to Product to which you want to add limiter functionality. Open Metafields app from the product admin dashboard. Click on “Variants” tab and add metafield for the variant. Details for Metafield:

Namespace limit
Key max
Value Type integer
Value Any Numeric Value (Eg: 2)

After entering these details for each variant, please save the details

Step 2: Go to Theme Editor and open product.liquid and find this code block:

<select name="id" id="productSelect" class="product-single__variants">
            {% for variant in product.variants %}
              {% if variant.available %}

                {% comment %}
                  Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                {% endcomment %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

              {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                </option>
              {% endif %}
            {% endfor %}
          </select>

Replace the above code block with the code given below:

    
        {% if cart.item_count > 0 %}
          
			<select name="id" id="productSelect" class="product-single__variants">
                {% for variant in product.variants %}
                  {% if variant.available %}

                      {% for item in cart.items %}
                        {% if variant.id == item.variant_id %}
                            {% assign limiter = variant.metafields.limit %}
                            {% if item.quantity >= limiter.max %}
    		                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{ variant.metafields.limit.max | minus: item.quantity }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>                          
                            {% else %}
									{% assign availability = true %}
    		                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{ variant.metafields.limit.max | minus: item.quantity }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>                          
                            {% endif %}

                        {% else %} 
							{% assign availability = true %}
              				<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{variant.metafields.limit.max}}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>                                        
              
              			{% endif %}
              
                      {% endfor %}

                      {% comment %}
                      Note: if you use option_selection.js, your select tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                      {% endcomment %}

                  {% else %}
                      <option disabled="disabled">
                        {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                      </option>
                  {% endif %}
              
              
                {% endfor %}
              </select>                    
              
          
          {% else %} 
          
            <select name="id" id="productSelect" class="product-single__variants">
				{% assign availability = true %}

                {% for variant in product.variants %}
                  {% if variant.available %}

                      {% comment %}
                      Note: if you use option_selection.js, your select tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                      {% endcomment %}
                      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{variant.metafields.limit.max}}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>            
                  {% else %}
                      <option disabled="disabled">
                        {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                      </option>
                  {% endif %}
                {% endfor %}
              </select>
          
          {% endif %}  

Step 3: At the bottom of product.liquid. Please add this code.

    
$("#AddToCartForm").on("submit", function(){
      	variant_id = $('#productSelect').val();
        variant_max = parseInt($('#productSelect option[value="'+variant_id+'"]').attr('data-max'));
        variant_qty = parseInt($("#Quantity").val());
        if(variant_qty > variant_max){
          if(variant_max==0){
          alert("You've already reached to the max limit allowed for this product option.");
          } else {
          alert("You can not add more than " + variant_max + " quantity of this product.");
          }
          return false;
        }
 }); 

Step 4: Go to Cart.liquid template file and define this variable in the beginning of the file (before the cart item count if condition)

{% assign processCheckout = true %}

Step 5: Within the cart.liquid template file. Find this code block:

 <td data-label="{{ 'cart.label.quantity' | t }}">
    <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0">
 </td>

And Replace the above code with this one:

<td data-label="{{ 'cart.label.quantity' | t }}">
<input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" {% if item.variant.metafields.limit.max %} max="{{item.variant.metafields.limit.max}}"{% endif %}>
 {% if item.quantity > item.variant.metafields.limit.max %}
    <p class="cart_max-qty"><strong>Max Qty : {{item.variant.metafields.limit.max}}</strong></p>              
    {% assign processCheckout = false %}
 {% endif %}
</td>

Step 6: Within the cart.liquid template file. Find this code block (should be at the end of file):

<input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">

And replace the above mentioned code with this one:

        
 {% if processCheckout %}
      	<input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
 {% else %}
      	<p class="info-message">One or more items exceeds the maximum limit. Please reduce to the quantity to proceed to checkout. </p>
 {% endif %}        

And Thats it. You’re done!! Now you can test. Cart Limiter should work. If you find any problem then please leave a comment or email me.

You can also check the final code files on github: https://github.com/amandeepsinghvirdi/shopify-quantity-limiter

When You Realize You need a break

Today, I was reading a blog post “Surviving Burnout” on dev-human.io. After reading that blog post, I realized that breaks are so very much important in life. And the very fact you should learn how to say no in life, politely though. It has been more than three years since I went out for a long vacation or a sabbatical for that matter. I have simply been coding and working on projects continuously (even during the weekends) to achieve the work deadlines. But I guess, amidst all this, we must realize that the run for these deadlines is never really going to come to a standstill.

I remember the time when having hundreds of assigned to-dos used to give me a lot of stress. No matter how hard I tried to finish all those to-dos and managed to bring those hundreds to few, but after 2-3 weeks it would all be same again. However after reading this post, I realized that I share one of the three symptoms that were mentioned in the post, i.e., “Forgetfulness.” Since I am a web developer turned into a Team Leader & Manager, I would struggle hard with managing my things, calendar events, note takings, and writing training process for employees etc,. Also owing to my work responsibilities (where I have to manage different team members and different teams), I would skip my important dates and prioritized tasks or would end up forgetting and assigning tasks to my team members. I often wondered if it was due to my bad management, but I believe that my forgetfulness had been contributing to it as a significant reason. I first kept on ignoring this for a few weeks, and then soon did I realize (actually after a few months, to be honest) that – this was certainly something that I could not afford to ignore. Because it was not only creating problems in my professional life, but was also affecting me as a person.

I soon visited a doctor, and he advised me to sleep properly and even gave me some medicines to ease the condition. However in midst of all, I realized that the medicines were not the things that I ever needed, I just needed the sleep (a good sleep, I’d say). As the time passed by, I started feeling better and my management skills were soon improved by a great extent. Not just that, I was also getting better at defeating my forgetfulness. But I do realize this very fact now that whenever I take too much of stress or make myself buried with too much of work, those symptoms tend to crawl back. I do admit however that I tend to spend too much time in front of my workstation.

Anyways, after reading that blog post, I feel that I should bring some changes to my work style or tweak it to a level. And I should finally learn to say no. And, and… I should seriously stop getting stressed due to too much of my work.

It’s like – instead of doing everything by myself and hesitating to delegate difficult tasks to my team members, I should try to trust them some more and should delegate tasks to my team members. And yeah, communicate more and more with people within the society.

Life

Life is going so fast. It feels like there are so many things to do: Project priorities, study, learning, career, etc,. But when you stop, think and close your eyes, give yourself a break to think just about yourself, your inner happiness, the real life, emotions, something strangely hits you and you begin to wonder if you are missing so much in this busy life. And then….. all you want to do is simply sit on a rooftop with someone at 2 AM, talk endlessly, and just look at the sky, not worrying about anything that’s going on in your life.

“It started with a friend request”

A few weeks ago, I finished reading a book – “It started with a friend request” by Sudeep Nagarkar. Before purchasing this book, I had read its summary and reviews on amazon.in. I thought it would be little similar to my life. But well, it was totally different :). However, I ended up enjoying this book. It was the first time when I picked up a love story to read. Mostly, I read biographies, technical and management books.

Though this book was a love story, I (pretty much me here) liked the “corporate life” part in this book. I enjoyed reading the chapter “Corporate Atyachaar” – what an amazing chapter really! Here goes a brief insight of this chapter:

…The lady manager had to report to the head of the department. When she entered his cabin, he asked her, “Are you free tonight”? She immediately smiled and said yes. The next moment, that rascal gave her a hundred sheets to type out.”

… Before Leaving, I would like to tell you about the circle of life. Many of you might be engineers or MBA graduates but in your practical life, the sooner you understand the difference between your college and office life, the better it will be for you. The sooner you adapt to the changes, the faster you’ll excel in life. In college, we had different professors assigned for different subjects, but here we have only one task and only one manager. Your task is to improve your performance. In college, you bunked your lectures and spent money whereas here if you bunk, you lose money. In college, you were at least aware about your exam dates, but here can anyone tell clearly about the audit dates?

If you score less marks in an examination but still manage to clear it, you need not to be answerable to anyone. But here if you score less, which means if your performance goes down, then you are answerable to all your higher authorities. Why? Because in college you paid the fees and here, you are getting paid for your work. The most important difference is that during your college days your girlfriend was proud about your clothes but now she would only feel proud if you are paid heavy salaries. Thus my dear, you better adapt yourself accordingly. You should always remember “To improve is to change but to be perfect is to change often”.

And yeah, the author really tried to add “extra” romance in his book. He beautifully expressed love between Alessha and Akash. Overall, it was a nice reading.

Sudeep Nagarkar’s writing was quite simple, an easy reading book. Well, his writing has left me inspired me to write my own book I just need to work on my vocabulary and grammar.

Adding confirm email field in BigCommerce contact form

Recently I worked on a BC project. Client made a small request of adding confirm email field in the contact form of BigCommerce website. Its not really much tricky. Here goes the quick tutorial.

We’ll need to add/edit html code in the BigCommerce Template files. So you just need to click “Design” link in the navigation in BC admin panel and click “Edit HTML/CSS”.

Step 1

Now just find this file page_contact_form.html in the panels. Add this html code in the page_contact_form.html file.

<dt><span class="Required">*</span>&nbsp; Confirm Email</dt>
<dd class="smallTextbox"><input type="text" placeholder="Confirm Email" name="confirm_email" class="Textbox Field200" /></dd>

In the screenshot given below, you can see that I’ve added this code on line number 23-24.

Step 1 - Add code in page_contact_form.html

Step 2

Now you’ll need to add little bit JS code in the ContactFormJavaScript.html file.

var confirm_email = $('#confirm_email').val();
if(confirm_email != email_address) {
  alert('Emails should match');
  $('#confirm_email').focus();
  $('#confirm_email').select();
  return false;
}

In the screenshot you can see that I’ve added this code on line number 6 and line number 14-19.

Add JS code in ContactFormJavaScript.html

And thats it!! Here goes the output:

Confirm Email field in Contact form BigCommerce

Please post comment if you’ve any question. Thanks