Need to have cart update with code for dropdown selection?

New Member
1 0 0

Hi,

 

My company sells products in unlimited quantities, and products that are custom with a fixed quantity.

 

I figured out how to set certain products to show a dropdown vs. being able to select limitless options on the product-template.liquid page with this code:

 


{% if section.settings.show_quantity_selector %} {% if product.title == "Custom Concentrate Packaging" %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<select name="quantity" id="quantity">
{% for i in (1..4) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% endif %}
{% if section.settings.show_quantity_selector %} {% if product.title != "Custom Concentrate Packaging" %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input id="quantity" type="number" name="quantity" value="1" class="tc item-quantity" />
</div>
{% endif %}
{% endif %}

 

 

 

But when I add them to the cart and go to the cart page it messes up. If the product at the top of the cart has an option for unlimited selection and I change the amount, then the custom item below changes from a dropdown to a box that allows for unlimited selection.

 

If the custom item with the dropdown box is at the top of the cart and the item number changes for the unlimited selection item below it, then the item below it with unlimited selection changes to a dropdown box?

 

The dropdown box is there again if I refresh, but also it won't update the price or quantity on the page if I change it. It will change if I use the unlimited selection but the dropdown box just seems to be kind of hanging there.

 

This is the code I used for that in the cart-template.liquid area:

 

<td class="cart__quantity-td text-right small--hide">
{% if item.product.title == "Custom Concentrate Packaging" %}
<div class="cart__qty">

<label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
<select id="updates_large_{{ item.key }}" type="text" name="updates[]" value="{{ item.quantity }}" class="replace">
{% for i in (1..4) %} <option value="{{ i }}"{% if item.quantity == i %} selected{% endif %}>{{ i }} </option>
{% endfor %}
</div>
</select>
{% endif %}

{% if item.product.title != "Custom Concentrate Packaging" %}
<div class="cart__qty">
<label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
<input id="updates_{{ item.key }}" class="cart__qty-input" type="number"
value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>
</div>
{% endif %}
<div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--desktop hide" role="alert" data-cart-quantity-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__qty-error-message" data-cart-quantity-error-message></span>
</div>
</td>

 

I think it might be how I'm looping the items, but I'm not sure. I've been trying to look into that.

 

Any suggestions or help would be really appreciated, thanks if you can help!!!!

0 Likes