Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Why does dropdown list value move to the top in cart?

Why does dropdown list value move to the top in cart?

PWS1
Explorer
111 3 8

I am using custom line item properties on one of my products.  Some are text boxes and one is a dropdown list.  The problem is that when the product is added to your cart, the dropdown list value is always moved to the top of the line item properties.  For example, this is the order that I have them shown on the product page:

 

Text box 1

Text box 2

Text box 3

Dropdown list

 

But when they are added to the cart, they are in this order:

Dropdown list

Text box 1

Text box 2

Text box 3

 

Why is this happening?  Here's the relevant code from my product page:

 

 

 {%- when 'custom_properties' -%}
        <div class="line-item-property__field product-form__input ">
          {% if block.settings.prop_label != blank %}<label class="form__label">{{ block.settings.prop_label }}</label>{% endif %}
          {% if block.settings.prop_name != blank %}
          {% if block.settings.multiline %}
          <textarea style="font-family: {{ block.settings.font }};" rows="4" cols="50" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class= "line_item_text field__input required {% if block.settings.required %}blank {% endif %}sample-font-box properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" {% if block.settings.required %}required{% endif %} type="text" name="properties[{{ block.settings.prop_name }}]" maxlength="{{ block.settings.item_length }}" {% if block.settings.placeholder_name != blank %}placeholder="{{ block.settings.placeholder_name }}"{% endif %}></textarea>    
            {% if block.settings.showcharacters %}
          <div class= "personalization_feedback"></div>
           {% endif %}
          {% else %}
          <input style="font-family: {{ block.settings.font }};" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class= "line_item_text field__input required {% if block.settings.required %}blank {% endif %}sample-font-box properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" {% if block.settings.required %}required{% endif %} type="text" name="properties[{{ block.settings.prop_name }}]" maxlength="{{ block.settings.item_length }}" {% if block.settings.placeholder_name != blank %}placeholder="{{ block.settings.placeholder_name }}"{% endif %}>    
     
          {% endif %}
          {% endif %}
        </div>

            
        {%- when 'custom_prop_dropdown' -%} 
        <div class="product-form__input product-form__input--dropdown">
            <label class="form__label">{{ block.settings.prop_drop_label }}</label>    
            <div class="select">
              <select class="select__select " name="properties[{{ block.settings.prop_drop_name }}]" form="{{ product_form_id }}">   
              <option value={{ block.settings.dropdown1 }}>{{ block.settings.dropdown1 }}</option>
              <option value={{ block.settings.dropdown2 }}>{{ block.settings.dropdown2 }}</option>
              <option value={{ block.settings.dropdown3 }}>{{ block.settings.dropdown3 }}</option>
              <option value={{ block.settings.dropdown4 }}>{{ block.settings.dropdown4 }}</option>
              </select>
             {% render 'icon-caret' %}
            </div>
        </div>

 

 

Reply 1 (1)

PWS1
Explorer
111 3 8

This may be part of the problem too, but I'm not sure.  This is just a little farther down on the product page:

 

              {%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form' -%}
              <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>

              {% assign block_show = false %}
              {% for block in section.blocks %}
              {% if block.type == "custom_properties" %}
              {% assign block_show = true %}
              <input type="text" style="display:none;" name="properties[{{ block.settings.prop_name }}]" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class="H_properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }} H_properties_input {% if block.settings.required %}required{% endif %}" value="">
              {% endif %}
              {% endfor %}