Out of Stock Form Notification Error

Solved
Highlighted
New Member
2 0 0

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 %}
           <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>
0 Likes
Highlighted
Shopify Partner
1151 232 299

This is an 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

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
New Member
2 0 0

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! 

0 Likes