Shopify 2.0 product form is not working on dawn theme

[AvidBrio]

I have try this form on the collection list item but this was not working 

    {% form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate',  data-type: 'add-to-cart-form' %}  
<!-- form content --> 
<input type="text" name="quantity" min="1" value="1">

<input type="text" name="properties[Monogram]">  
<input type="submit" value="Add to cart">
{{ form | payment_button }}
{% endform %}

Error 

Something went wrong.

What happened?
Parameter Missing or Invalid: Required parameter missing or invalid: items
What can I do?

after click goes to the  

myshopify.com/cart/add

[IttantaTech · Accepted solution]

Hello , @AvidBrio 

I have checked this and found that right now the quantity box is outside the <form></form>

You have to put it inside the form .

So , basically you have to put this code inside the form:-

<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">Decrease quantity for Rustic Jeans</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" fill="none" viewBox="0 0 10 2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z" fill="currentColor">
</path></svg>

</button>
<input class="quantity__input" type="number" name="quantity" id="Quantity-4869160796242" min="1" value="1" form="product-form-4869160796242">
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">Increase quantity for Rustic Jeans</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" fill="none" viewBox="0 0 10 10">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
</path></svg>

</button>
</quantity-input>

[IttantaTech]

Hello , @AvidBrio 

Can you please provide your store URL ? So that i can check this in detail

[AvidBrio]

@IttantaTech   thanks for the reply 

Here is store preview links https://uvubpxxd9q9veklm-15143478.shopifypreview.com/collections/mens-jeans
password : 1234.

See the attached screenshot for the output 

[IttantaTech · Accepted solution]

Hello , @AvidBrio 

I have checked this and found that right now the quantity box is outside the <form></form>

You have to put it inside the form .

So , basically you have to put this code inside the form:-

<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">Decrease quantity for Rustic Jeans</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" fill="none" viewBox="0 0 10 2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z" fill="currentColor">
</path></svg>

</button>
<input class="quantity__input" type="number" name="quantity" id="Quantity-4869160796242" min="1" value="1" form="product-form-4869160796242">
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">Increase quantity for Rustic Jeans</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" fill="none" viewBox="0 0 10 10">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
</path></svg>

</button>
</quantity-input>

[AvidBrio · Accepted solution]

@IttantaTech   thanks for the issue tracked 

here is full code snippets   I moved the  quantity-input inside the form tag please check this

{{ 'section-main-product.css' | asset_url | stylesheet_tag }}

<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>

 {%- assign product_form_id__ = 'product-form-'| append: section.id -%}
 {%- assign product_form_id_ = 'product-form-'| append: product.id -%}

 
<div class="product_form_btn">


    {%- unless product.has_only_default_variant -%}
    {%- if  settings.card_picker_type == 'button' -%}
    <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ 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 }}" {{ 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>

<div {{ block.shopify_attributes }}>
  {%- 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">
          <div class="product-form__input product-form__quantity" >
            <label class="form__label" for="Quantity-{{ product.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-{{ product.id }}"
                  min="1"
                  
                  value="1"
                  form="product-form-{{ product.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>
      {%- comment -%}
            <input type="number" id="Quantity" name="quantity" value="5" min="5">
      {%- endcomment -%}
             
          </div>
          <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>
  {%- endif -%}
</div>
</div>

still the correct input not adding to the cart

add to cart button adding only one qty at one click per the time.

[AvidBrio]

@IttantaTech  thanks a lot for the custom code 

            <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 123">
                <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 uniq_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>  
              <div {{ block.shopify_attributes }} class="add_to_cart">
              <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 }}">
                  <input type="hidden" name="quantity" class="hidden_qty" value="1">
                  <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>

              {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

              {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%}

              <pickup-availability class="product__pickup-availabilities no-js-hidden"
                {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %} available{% endif %}
                data-base-url="{{ shop.url }}{{ routes.root_url }}"
                data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                data-has-only-default-variant="{{ product.has_only_default_variant }}"
              >
                <template>
                  <pickup-availability-preview class="pickup-availability-preview">
                    {% render 'icon-unavailable' %}
                    <div class="pickup-availability-info">
                      <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
                      <button class="pickup-availability-button link link--text underlined-link">{{ 'products.product.pickup_availability.refresh' | t }}</button>
                    </div>
                  </pickup-availability-preview>
                </template>
              </pickup-availability>
            </div>
  
  {%- 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>
  {%- endif -%}
</div>
</div>

<script>
  $(document).ready(function(){
    $(".uniq_input").on("change",function(){
       $(this).parent().parent().next().find(".hidden_qty").val($(this).val());
    });
  });
</script>