Search Suggestions

Edit the BigCommerce templates to change the quantity selector according to the inventory level

Daniel C. Published on 05 October, 2011

In the default BigCommerce templates the Cart Quantity Selector is created in such a way that it will show numbers from 1 to 30 no matter how many products you have in stock. This post will show you how to change the selector's values according to the product stock level. Please copy-paste the code below in the footer.html template file.


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){


<span class="c1">//$(&#39;.InventoryLevel&#39;).hide();</span>
<span class="kd">var</span> <span class="nx">k</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.VariationProductInventory&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">());</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#qty_ option&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
 <span class="k">if</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">())</span> <span class="o">&gt;</span> <span class="nx">x</span><span class="p">)</span>

 <span class="p">{</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
 <span class="nx">k</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

 <span class="p">};</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">k</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span>

<span class="p">{</span>
<span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#qty_ option&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">j</span><span class="o">++</span><span class="p">})</span>

<span class="k">for</span> <span class="p">(</span><span class="nx">o</span> <span class="o">=</span> <span class="nx">j</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">o</span> <span class="o">&lt;=</span> <span class="nx">x</span><span class="p">;</span> <span class="nx">o</span><span class="o">++</span><span class="p">)</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#qty_&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;&lt;option value=&quot;&#39;</span><span class="o">+</span><span class="nx">o</span><span class="o">+</span><span class="s1">&#39;&quot;&gt;&#39;</span><span class="o">+</span><span class="nx">o</span><span class="o">+</span><span class="s1">&#39;&lt;/option&gt;&#39;</span><span class="p">);</span>

<span class="p">}</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.InventoryLevel&#39;</span><span class="p">).</span><span class="nx">ajaxSuccess</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="c1">//$(&#39;.InventoryLevel&#39;).hide();</span>

<span class="kd">var</span> <span class="nx">k</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.VariationProductInventory&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">());</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#qty_ option&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
 <span class="k">if</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">())</span> <span class="o">&gt;</span> <span class="nx">x</span><span class="p">)</span>

 <span class="p">{</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
 <span class="nx">k</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

 <span class="p">};</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">k</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span>

<span class="p">{</span>
<span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#qty_ option&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">j</span><span class="o">++</span><span class="p">});</span>

<span class="k">for</span> <span class="p">(</span><span class="nx">o</span> <span class="o">=</span> <span class="nx">j</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">o</span> <span class="o">&lt;=</span> <span class="nx">x</span><span class="p">;</span> <span class="nx">o</span><span class="o">++</span><span class="p">)</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#qty_&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;&lt;option value=&quot;&#39;</span><span class="o">+</span><span class="nx">o</span><span class="o">+</span><span class="s1">&#39;&quot;&gt;&#39;</span><span class="o">+</span><span class="nx">o</span><span class="o">+</span><span class="s1">&#39;&lt;/option&gt;&#39;</span><span class="p">);</span>

<span class="p">}</span>
<span class="p">});</span>



});
//]]>
</script>


NOTE:

  1. In order for this code to work you will have to set the inventory levels to be shown on the store front (Store Settings >> Display tab)
  2. If you do not want the inventory to be shown, please delete the // in the code above, before this line:

    3. //$('.InventoryLevel').hide();
    There are two such lines in the code.

You could also remove the entries in the templates, but that is not an elegant solution at all. What the above code does it to look at the inventory level and limit the number of choices.

Try it yourself!
Place a number in the box below and see how the Quantity Dropdown changes! OK



It would be nice if Bigcommerce would add such a feature so that we do not need to edit the templates in these cases. Anyways, if you have any improvements, or would like to say thanks just comment below!

Daniel C. Published on 05 October, 2011