Include measurement units as order quantity

Highlighted
Shopify Partner
2 0 0

If you want to let your customers order products with measurements units instead of quantity units only, you can include this simple logic in your liquid themes:

  • The idea is that there is a tag which indicates a product that uses measurment units (e.g. meters). Basically you can use any tag, but in the example below we rely on the tag 'meter' (as a side note, you could, add other tags which would serve as parameters, such as 'minamount', 'maxamount', 'stepsize'...)
  • The example produces a select / option list ranging from 0.3 meter to 10 meter in a 0.1 step. Of course you can define any range and any step size...

PRODUCT DETAIL:

 <!-- Different quantity selector -->
        {% assign is_length = false %}
        {% for tag in product.tags %}
            {% if tag contains "meter" %}
                  {% assign is_length = true %}
                  <!-- SHOW SELECTOR FOR METER UNITS -->
                  <label for="quantity">{{ 'products.product.quantity' | t }}</label>
                  <select id="quantity" name="quantity" class="quantity select-on-focus">
                      {% for i in (3..100) %}
                        <option value="{{ i }}" >{{ i | divided_by: 10}}.{{ i | modulo: 10}} Meter</option>
                      {% endfor %}
                  </select>

            {% endif %}
        {% endfor %}
        {% if is_length == false %}
        <!-- SHOW NORMAL UNIT -->
        <label for="quantity">{{ 'products.product.quantity' | t }}</label> <input class="quantity select-on-focus" id="quantity" name="quantity" value="1" />
        {% endif %}

IN THE CART VIEW WITH ALL PRODUCTS LISTED IN THE CART (EDIT)

 <!-- Different quantity selector -->
            {% assign is_length = false %}
            {% for tag in item.product.tags %}
                {% if tag contains "meter" %}
                      {% assign is_length = true %}
                      <!-- SHOW SELECTOR FOR METER UNITS -->
                      <select id="updates_{{ item.id }}" name="updates[]" class="quantity select-on-focus">
                          {% for i in (3..100) %}
                            <option value="{{ i }}"
                            {% if item.quantity == i %}
                              selected = "selected"
                            {% endif %}
                             >{{ i | divided_by: 10}}.{{ i | modulo: 10}} Meter</option>
                            }
                          {% endfor %}
                      </select>

                {% endif %}
            {% endfor %}
            {% if is_length == false %}
            <!-- SHOW NORMAL UNIT -->
            <input class="quantity select-on-focus" type="text" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" />
            {% endif %}

I hope this little solution helps anybody...

Bernhard 

0 Likes
Highlighted
New Member
2 0 0

Hey Sturm,

 

Thanks for sharing this proactively. But in which section do  we type this code ?

 

TIA

0 Likes
Highlighted
New Member
3 0 0

did you find out where to add the code?

0 Likes