When added product variant option, non-variant items return: Parameter Missing or Invalid

Angie_Fu
Shopify Partner
1 0 0

Hey there!

I just started adding products with variants to my website—whereas before I only had products with no variants. On the index.liquix and product.liquid files, I use this code:

 

<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="product-single">
    <div class="grid product-single__hero">
      <div class="grid__item large--one-half">


            <div class="row ptxx-carousel pbxxx-carousel bg-blue" id="ProductPhoto">
              <div class="col-sm-8 col-sm-offset-2 col-xs-12 prn wow fadeInDown">
                <div class="img-row">
                  {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                      <div class="img-3" style="background-image:url({{ featured_image | img_url: '2000x2000' }})"  alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" data-image-id="{{ featured_image.id }}">
                      </div>
                      <div class="img-col">
                        <div class="img-1" style="background-image:url({{ product.images.last | img_url: '2000x2000' }})"  alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" data-image-id="{{ featured_image.id }}">
                          </div>
                      </div>
                </div>
              </div>
            </div>

        </div>


        <div id="purchase" class="row ptxx pbxxx bg-gray">
          <div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
              <h1 class="wow fadeInDown pbm">
                {{ product.description }}
              </h1>

            <div class="row wow fadeInDown">

                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                  {% assign variant = product.selected_or_first_available_variant %}

                  <meta itemprop="priceCurrency" content="{{ shop.currency }}">
                  <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

                  <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">


                    {% if product.variants.size > 1 %}
<!-- FOR PIN SETS WITH OPTIONS! -->
                      <div class="col-md-5 col-sm-5 col-sm-offset-0 col-xs-12 prn">
                        <h6 class="tc-orange pbs">Select set or individual</h6>
                                {% for variant in product.variants %}
                                  {% if variant.available %}
                                    <div class="radiofun">
                                      <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} />
                                      <label for="radio_{{variant.id}}">{{ variant.title }} — ${{ variant.price | money_without_currency | remove: '.00' }}</label>
                                    </div>
                                  {% endif %}
                                {% endfor %}
                      </div>

                      <div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12 prn">
                          <div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %} input-group" style="display: block;">
                              <h6 class="tc-orange">{{ 'products.product.quantity' | t }}</h6>
                              <div class="input-group pts">
                                <span class="input-group-btn">
                                  <button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant[1]">–</button>
                                </span>
                                <input type="text" id="Quantity" name="quantity" value="1" min="1" max="100" class="quantity-selector form-control input-number"/>
                                <span class="input-group-btn">
                                  <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button>
                                </span>
                              </div>
                          </div>
                          <p class="tc-gray ptxss text-center p-small">Save on shipping with more pins!</p>


                          <div class="checkout-01">
                            <button type="submit" name="add" id="AddToCart" class="btn-purchase bg-teal tc-white">
                              <h6 class="tc-white">{{ 'products.product.add_to_cart' | t }}</h6>
                            </button>
                          </div>
                      </div>

<!-- END PIN SETS WITH OPTIONS! -->
                    {% else if product.variants.size == 1 %}
<!-- FOR SOLO PINS! -->
                    <div class="col-md-5 col-sm-5 col-sm-offset-0 col-xs-12 prn">
                      <div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %} input-group pts" style="display: block;">
                          <h6 class="tc-orange ptm">{{ 'products.product.quantity' | t }}</h6>
                          <div class="input-group pts">
                            <span class="input-group-btn">
                              <button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant[1]">–</button>
                            </span>
                            <input type="text" id="Quantity" name="quantity" value="1" min="1" max="100" class="quantity-selector form-control input-number"/>
                            <span class="input-group-btn">
                              <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button>
                            </span>
                          </div>
                      </div>
                      <p class="tc-gray ptxss text-center p-small">Save on shipping with more pins!</p>
                    </div>

                    <div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12 prn">

                        <div class="">
                          <h6 class="tc-orange ptm">Total</h6>
                          <div class="price">
                            <h3 class="float-left mbn mts">$<span id="price-total" value="{{variant.id}}">{{ variant.price | money_without_currency }}</span></h3>
                          </div>
                        </div>


                      <div class="checkout-01">
                        <button type="submit" name="add" id="add" class="btn-purchase bg-teal tc-white">
                          <h6 class="tc-white">{{ 'products.product.add_to_cart' | t }}</h6>
                        </button>
                      </div>
                    </div>
<!-- END SOLO PINS! -->
                    {% endif %}
                  </form>
                </div>
          </div>
        </div>


      </div>
    </div>

    {% if settings.product_related_enable %}
      {% include 'related-products' %}
    {% endif %}


    <div class="row ptxx pbxxx bg-white">
      <div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
        <h1 class="mbx">Check out some of the other pins that have been featured on <b>The Good Pin Club!</b></h1>

              {% for product in collections.previous-pins.products %}
                  <a class="previous-pin" href="{{ product.url }}" style="background-image:url({{ product.featured_image | product_img_url: 'large' }})"></a>
              {% endfor %}

      </div>
    </div>

  </div>

  {% if settings.product_related_enable %}
    {% include 'related-products' %}
  {% endif %}

</div>

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>

//plugin bootstrap minus and plus

  $('button.btn-number').click(function(e) {
      console.log('button clicked!');
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type = $(this).attr('data-type');
    console.log(type);
    var input = $('#Quantity');
    console.log(input);
    console.log(input.val());
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
      if (type == 'minus') {
        if (currentVal > input.attr('min')) {
          input.val(currentVal - 1).change();
        }

      } else if (type == 'plus') {
        console.log('i made it here');

        if (currentVal < input.attr('max')) {
          input.val(currentVal + 1).change();
        }

      }

    } else {
      input.val(0);
    }

    //Calculate Latest Price
    var pin = parseInt(input.val());
    var ppin = (pin* {{ variant.price | money_without_currency}});
    var ptotal = (ppin);

    $('#price-total').html(ptotal.toFixed(2));


  });


  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector,
      translations: {
        add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
        sold_out : "{{ 'products.product.sold_out' | t }}",
        unavailable : "{{ 'products.product.unavailable' | t }}"
      }
    });
  };

</script>
 

You can check it out here: www.goodpin.club

Now on the non-variant pages (e.g. https://goodpin.club/products/may-good-pin-for-water-for-people), when I click add to cart, I get the following error: 
Parameter Missing or Invalid: Required parameter missing or invalid: id

 

Not even sure where to start with this one! Can anyone help direct me in the right area?
Thank you so much!

0 Likes