Add to cart does not hide when one of my variant inventory is zero and error 404 issues ( Updated )

Hello123Me
Tourist
13 0 3

Hi,

For my website, this product - https://blaraorganichouse.ca/products/blara-adult-bathrobe?_pos=2&_sid=1a6cc682f&_ss=r. If you choose any size and color ( need to select both ) other than XL ( I only have XL inventory left, other variant inventory is zero),  the add to cart button is still available( It should be grey out and unclickable ) and when I click add to cart, it will show error 404 - Parameter Missing or Invalid: Required parameter missing or invalid: items.  Thank you! 

Capture.PNG

 

 

Replies 4 (4)
Hello123Me
Tourist
13 0 3

The code : 

 

<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.zoom_enable }}" data-enable-history-state="true">
  <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: 'large' }}">

    {% assign current_variant = product.selected_or_first_available_variant %}
	{% assign size_chart_type = '1' %}
	
    <div class="grid product-single">
      <div class="grid__item large--seven-twelfths text-center">
        {% include 'magiczoomplus' %}
      </div>

      <div class="grid__item product-single__meta--wrapper large--five-twelfths">
        <div class="product-single__meta">
          {% if section.settings.product_vendor_enable %}
            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
          {% endif %}

          <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            {% comment %}
              Optionally show the 'compare at' or original price of the product.
            {% endcomment %}

            {% if product.compare_at_price_max > product.price %}
              <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <span class="product-single__price--wrapper">
                <span id="ComparePrice" class="product-single__price--compare-at">
                  {% if current_variant.compare_at_price > current_variant.price %}
                    {{ current_variant.compare_at_price | money }}
                  {% endif %}
                </span>
              </span>
              <span id="ComparePriceA11y" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
            {% else %}
              <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            {% endif %}

            <span id="ProductPrice"
              class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}"
              itemprop="price"
              content="{{ current_variant.price | divided_by: 100.00 }}">
              {{ current_variant.price | money }}
            </span>

            <hr class="hr--small">

            <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" class="product-single__form" id="AddToCartForm">
              {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
                {% for option in product.options_with_values %}
                  <div class="radio-wrapper js product-form__item">
                    
                    {% assign option_index = forloop.index %}     
				     				<select class="single-option-selector__radio"
				                      name="{{ option.name }}"
				                      id="ProductSelect-option-{{ forloop.index0 }}" data-index="option{{ option_index }}">
										<option selected disabled>{{ option.name }}</option>
                                      
                                       {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                    {{ variant.title }}
                  </option>
                {% else %}
                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                {% endif %}
              {% endfor %}
				                      {% for value in option.values %}
				

									{% if value == '50cm' or value == '60cm' or value == '70cm' or value == '80cm' or value == '90cm' or value == '100cm' or value == '110cm' or value == '120cm' or value == '130cm' %}
					                {% assign size_chart_type = 'clothes' %}
					
									{% elsif value == 'XS' or value == 'S' or value == 'M' %}
									{% if product.tags contains 'Rain gear' %}
									{% assign size_chart_type = 'rain coat' %}
									{% endif %}
			
								
									{% elsif value == '12cm' or value == '12.5cm' or value == '13cm' or value == '13.5cm' or value == '14cm' or value == '14.5cm' or value == '15cm' or value == '15.5cm' or value == '16cm' or value == '16.5cm' or value == '17cm' or value == '17.5cm' or value == '18cm' or value == '19cm' or value == '20cm' or value == '21cm' %}
					                {% assign size_chart_type = 'shoes' %}
                                      
                                      
								
									{% endif %}
									 
				
				
				                        {% assign variant_label_state = true %}
				                        {% if product.options.size == 1 %}
				                          {% unless product.variants[forloop.index0].available  %}
				                            {% assign variant_label_state = false %}
				                          {% endunless %}
				                        {% endif %}    	
				                      	
				                      {% endfor %}             
				                    </select>
                  </div>
                {% endfor %}
              {% endunless %}

              <select name="id" id="ProductSelect" class="product-single__variants no-js">
                {% for variant in product.variants %}
                  {% if variant.available  %}
                    <option {% if variant == product.selected_or_first_available_variant %} value="{{ variant.id }}">	
                    {{ variant.title }}
                      selected="selected" {% endif %}
                      data-sku="{{ variant.sku }}"
                      value="{{ variant.id }}">
                      {{ variant.title }} - {{ variant.price | money_with_currency }}
                    </option>
                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>

 <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                    {{ variant.title }}
                  </option>
                {% else %}
                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                {% endif %}
              {% endfor %}
            </select>
              
              
              {% comment %}
              <div class="product-single__quantity">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
              </div>
              {% endcomment %}

              <div class="product-single__add-to-cart">
                <button type="submit" name="add" id="AddToCart" class="btn"{% unless product.available %} disabled="disabled"{% endunless %}>
                  <span id="AddToCartText">
                    {% if product.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
              </div>
				<div id="mswishlist" class="mswishlist mswlbtn" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
            </form>

          </div>

          <div class="product-single__description rte" itemprop="description">
            <div>
			  <ul class="tabs">
                <li style="width:35%;text-align:center;"><a href="#tab-1"><b>DESCRIPTION</b></a></li>
                <li style="width:32%;text-align:center;"><a href="#tab-2"><b>SIZE</b></a></li>
                <li style="width:32%;text-align:center;"><a href="#tab-3"><b>SHIPPING & POLICY</b></a></li>
			  </ul>
			  <div id="tab-1">
			  {{ product.description }}
			  </div>
			  <div id="tab-2">
			<a class="size-chart-open-popup" href="#size-chart">See the full size guide</a>	
			  
			  </div>
			  <div id="tab-3" style="text-align:justify;">
				Free shipping is offered for:  <br/>
				Within British Columbia -  orders over $148+ (excluding applicable taxes)<br/>
				Across Canada  -  orders over $200+ (excluding applicable taxes)<br/>
				<br/>
			  	Standard: &nbsp;	&nbsp;	Within 7 Business Days for $20<br/>

				Express:  &nbsp;	&nbsp;	&nbsp;	Within 3 Business Days for $35<br/>

				Please note that taxes on shipping charges vary between provinces. Shipping charges and any applicable taxes will be indicated at the time of checkout.<br/>
				See our <a href="/pages/return-exchange-policy" target="_blank">return & exchange policy</a>.
			  </div>
			</div>
          </div>

          {% if section.settings.social_sharing_products %}
            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
          {% endif %}
        </div>
      </div>
    </div>
    
    {% if product.type=="SHOES" %}
    <div class="grid-uniform">
        <div class="grid__item one-half medium--one-whole small--one-whole" style="width:100%;text-align:center;">
    <a href="/pages/how-to-choose-shoes"><img src="https://cdn.shopify.com/s/files/1/1892/1813/files/how_to_choose_shoes.png?13846113688904162760" style="width:100%"></a>
        </div>
    </div>
      {% endif %}
    
    
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{% if collection %}
      <hr class="hr--clear">
      <div class="text-center">
        <a href="{{ collection.url }}" class="return-link" style="font-size:12px;">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
      </div>
    {% endif %}

  </div>
</div>
<br /><br />
<div id="size-chart" class="mfp-hide">
{{ pages.size-chart.content }}
</div>
<style>
#size-chart {
  border: 2px #555 solid;
  background-color: #ffffff;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
</style>
{% unless product.empty == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "zoom_enable",
        "label": "Enable image zoom"
      },
      {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_vendor_enable",
        "label": "Show product vendor"
      }
    ]
  }
{% endschema %}
<script type="text/javascript" >
  $('#thumbnails a').click(function() {
  var newImage = $(this).attr('href');
  $( 'div#main-product-image img' ).attr({ src: newImage }); 
  return false;
  });
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });
</script>
<style>
  	#mobile-gallery {
	    display: none; 
	  }

	  #thumbnails {
	    width: 100px;
	    height: 100px;
	    display: inline-block;
	    margin-bottom: 15px;
	  }

	  #main-product-image {
	    position: relative;
	  }

	  #hidden-image {
	    opacity: 0;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 100%;
	  }
	div.product-form__item{
		float:left;
	}
	  @media (max-width: 590px) {
	    #mobile-gallery {
	      display: block;
	    }

	    #gallery {
	      display: none;
	    }
		div.product-form__item{
			float:none;
		}
		div.product-single__description .text-link{
			font-size:12px;
		}
	  }
	.product-single__photo[data-mfp-src]{
		cursor:auto;
	}
	.product-single__photos img{
		position:static;
	}
	select{
		font-style:normal;
	}
	
</style>
<style>
h2{
	font-size:18px;
	font-weight:bold;
}
ul.tabs {
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  display: block;
  font-size: 14px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 10px;
  text-decoration: none;
  width: auto;
  color: #303030;
border-right:1px solid black;
}
ul.tabs li a.active {
  color: #111111;
  
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {

}
ul.tabs li:last-child a {
	border-right:none;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
#tab-1 tr:first-child td:after {
	border:none;
	
}
.product-single__title{
	font-size:18px;
	font-weight:bold;
}
input, textarea, select{
	font-size:14px;
	padding:11px 10px;
}
tr td.chart {
    text-align: center;
  	vertical-align: middle;
}
.sizeTable {
margin-top:10px;
}
.rte .text-link{
	border-bottom:0px;
}
.btn, .btn--secondary{
	font-size:14px;
}
#ProductSelect-option-0{
	min-width:100px;
}
#ProductSelect-option-1{
	min-width:100px;
}
#tab-1 div{
	text-align:justify!important;
}
#ComparePrice{
	color:black;
}
.product-single__price.on-sale{
	color:#987840;
}
</style>

 

 

iDoThemes
Trailblazer
151 33 54

The problem is in your theme.js file.  The _onSelectChange/_updateImages functions are failing. There is probably some code there to disable the add to cart button when a product is out of stock, but because those functions are failing it won't work.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor

Theme Developer -- Drop me a line
Hello123Me
Tourist
13 0 3

Hi,

 

Thanks for the reply, is there anyway i can find out which part of my theme.js is not working? i know only some basic coding and been research for hours but still cant solve this. 

palwi893
New Member
1 0 0

This error 404 is very hard to solve when I try to access my add to cart button as you can seehere some detail about this issue.