Out of Stock Form Notification Error

[rgw]

Hi, 

I've added in the form field for a product that is out of stock to have customers leave their email and we will let them know when it is back in stock. However, the form won't submit saying "Required parameter missing or invalid: items". From what I can tell it has something to do with the variant id not processing when the form is submitted as the error is

add.js 

1. {status: "bad_request", message: "Parameter Missing or Invalid",…}
1. description: "Required parameter missing or invalid: items"
2. message: "Parameter Missing or Invalid"
3. status: "bad_request"

Can someone please help me? These are the sections of the product code I have edited: 

<div class="product-page--cart-form">

          {% form 'product', product %}

           {% comment %}

           <!-- Adding line items - https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/get-cus... -->

           <div>

              <label for="line-item-1">Line Item 1</label>

              <input type="text" id="line-item-1" name="properties[line-item-1]">

            </div>

            <div>

              <label for="line-item-2">Line Item 2</label>

              <input type="text" id="line-item-2" name="properties[line-item-2]">

            </div>

            {% endcomment %}

            <div class="product-page--variants">

              {% unless product.has_only_default_variant %}

                {% for option in product.options_with_values %}

                  {% assign option_name = option.name | trim | downcase %}

                  {% if swatches_enabled and option_name == color_t %}

                    {%

                      render 'framework--radios',

                      option: option,

                      id: product.id,

                      is_swatches: true

                    %}

                  {% elsif variant_style == 'dropdowns' %}

                    {%

                      render 'framework--disclosure',

                      display_label: true

                      label_name: option_name,

                      option_names: option.values,

                      current_value: option.selected_value,

                      id: product.id

                    %}

                  {% else %}

                    {%

                      render 'framework--radios',

                      option: option,

                      id: product.id

                    %}

                  {% endif %}

                {% endfor %}

              {% endunless %}

              <select class="product-page--variant-select" name="id">

                {% for variant in product.variants %}

                  <option

                    value="{{ variant.id }}"

                    data-sku="{{ variant.sku }}"

                    {% if section.settings.low-in-stock-amount > 0 and

                      variant.inventory_management == "shopify" and

                      variant.inventory_policy == "deny"

                    %}

                      data-inventory-quantity="{{ variant.inventory_quantity }}"

                    {% endif %}

                    {% if variant == current_variant %}

                      selected

                    {% endif%}

                  >

                    {{ variant.title }}

                  </option>

                {% endfor %}

              </select>

            </div>

{% comment %}

            <div class="product-page--low-stock"></div>

            <div

              class="quantity-cart-row clearfix"

              data-smart-payment-button="{{ section.settings.smart-payment-button }}"

            >

              {% render 'snippet-quantity' %}

              <div class="add-to-cart">

                {% assign cart_button_class = 'font--button' %}

                {% if section.settings.smart-payment-button %}

                  {% assign cart_button_class = 'font--secondary-button' %}

                {% endif %}

                <button class="add {{ cart_button_class }}" type="submit" name="add" id="add">

                  <span class="text">{{ 'products.add_to_cart' | t }}</span>

                  <span

                    class="fw--loading_animation tiny"

                    data-js-class="FrameworkLoadingAnimation"

                  ></span>

                </button>

              </div>

            </div>

            {% if section.settings.smart-payment-button %}

              <div class="font--button product-page--smart-payment-buttons">

                {{ form | payment_button }}

              </div>

            {% endif %}     

          {% endcomment %}

          {% endform %}

<div class="form-vertical">

      <p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

          {% form 'contact', id: 'contact_page_form' %}

        {% if form.posted_successfully? %}

        <div class="success feedback accent-text">

          <p>{{ 'contact_page.success_feedback' | t }}</p>

        </div>

        {% endif %}

        {% if form.errors %}

        <div class="error feedback accent-text">

          <p>{{ 'contact_page.error_feedback' | t }}:</p>

          <ul>

          {% for field in form.errors %}

            <li>

              {{ field | capitalize | replace: 'Body', 'Message' }} {{ form.errors.messages[field] }}

            </li>

          {% endfor %}

          </ul>

        </div>

        {% endif %}

        {% unless form.posted_successfully? %}

          <label for="contactFormEmail">{{ 'contact_page.email' | t }}:</label>

          <input

            class="styled-input{% if form.errors contains 'email' %} error{% endif %}"

            type="email"

            id="contactFormEmail"

            name="contact[email]"

            value="{{ contact.fields.email }}"

            required

          />

          <div class="contact-page--submit-button">

            <input

              class="font--button"

              type="submit"

              id="contactFormSubmit"

              value="{{ 'contact_page.button' | t }}"

            />

          </div>

        {% endunless %}

        {% if form.posted_successfully? or form.errors %}

          <script>

            window.location.hash = '#page-content';

          </script>

        {% endif %}

      {% endform %}

</div>

[Guleria · Accepted solution]

Hello,

You are on wrong track. The code you shared is used when you want to get custom information in order with each product. 
For your query you have to use MailChimp or similar embedded form in a way that if product is out of stock show that form, with this you can pass product name or Id in it so in backend you can easily find out.

Thanks

[rgw]

Thank you so much! That lead me down the exact path I needed to go - Klaviyo has a form you can embed. Have a lovely week!