Re: need help on dawn theme quantity input not working on collection list page

need help on dawn theme quantity input not working on collection list page

AvidBrio
Shopify Partner
295 17 29
<div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                <label class="form__label" for="Quantity-{{ section.id }}">
                  {{ 'products.product.quantity.label' | t }}
                </label>
                <quantity-input class="quantity">
                  <button class="quantity__button no-js-hidden" name="minus" type="button">
                    <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                    {% render 'icon-minus' %}
                  </button>
                  <input class="quantity__input"
                      type="number"
                      name="quantity"
                      id="Quantity-{{ section.id }}"
                      min="1"
                      value="1"
                      form="product-form-{{ section.id }}"
                    >
                  <button class="quantity__button no-js-hidden" name="plus" type="button">
                    <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                    {% render 'icon-plus' %}
                  </button>
                </quantity-input>
              </div>



 {%- unless product.has_only_default_variant -%}
                {%- if block.settings.picker_type == 'button' -%}
                  <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                        <fieldset class="js product-form__input">
                          <legend class="form__label">{{ option.name }}</legend>
                          {%- for value in option.values -%}
                            <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                  name="{{ option.name }}"
                                  value="{{ value | escape }}"
                                  form="product-form-{{ section.id }}"
                                  {% if option.selected_value == value %}checked{% endif %}
                            >
                            <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                              {{ value }}
                            </label>
                          {%- endfor -%}
                        </fieldset>
                    {%- endfor -%}
                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-radios>
                {%- else -%}
                  <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                      <div class="product-form__input product-form__input--dropdown">
                        <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                          {{ option.name }}
                        </label>
                        <div class="select">
                          <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                            class="select__select"
                            name="options[{{ option.name | escape }}]"
                            form="product-form-{{ section.id }}"
                          >
                            {%- for value in option.values -%}
                              <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                {{ value }}
                              </option>
                            {%- endfor -%}
                          </select>
                          {% render 'icon-caret' %}
                        </div>
                      </div>
                    {%- endfor -%}

                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-selects>
                {%- endif -%}
              {%- endunless -%}

              <noscript class="product-form__noscript-wrapper-{{ section.id }}">
                <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
                  <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
                  <div class="select">
                    <select name="id" id="Variants-{{ section.id }}" class="select__select" form="product-form">
                      {%- for variant in product.variants -%}
                        <option
                          {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                          {% if variant.available == false %}disabled{% endif %}
                          value="{{ variant.id }}"
                        >
                          {{ variant.title }}
                          {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                          - {{ variant.price | money | strip_html }}
                        </option>
                      {%- endfor -%}
                    </select>
                    {% render 'icon-caret' %}
                  </div>
                </div>
              </noscript>


{%- if product != blank -%}
                  <product-form class="product-form">
                    {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                      <div class="product-form__buttons">
                        <button
                          type="submit"
                          name="add"
                          class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                        >
                            {%- if product.selected_or_first_available_variant.available -%}
                              {{ 'products.product.add_to_cart' | t }}
                            {%- else -%}
                              {{ 'products.product.sold_out' | t }}
                            {%- endif -%}
                        </button>
                        {%- if block.settings.show_dynamic_checkout -%}
                          {{ form | payment_button }}
                        {%- endif -%}
                      </div>
                    {%- endform -%}
                  </product-form>
                {%- else -%}
                  <div class="product-form">
                    <div class="product-form__buttons form">
                      <button
                        type="submit"
                        name="add"
                        class="product-form__submit button button--full-width button--primary"
                        disabled
                      >
                        {{ 'products.product.sold_out' | t }}
                      </button>
                    </div>
                  </div>

 

 

AvidBrio_0-1631710392959.png

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Reply 1 (1)

PFPproject
Visitor
2 0 0

Hey - I'm using dawn and am not sure why my variants are not being listed - only the base product (attempting to use variant to add 'assembly fee'

EX: https://petfriendlypenticton.ca/products/mushroom-garden-large-cat-tower-scratcher
the product is live but unlisted - not sure what I might have missed because I could have sworn that I used to have the option?
any input would be greatly appreciated!

- Kona 3