Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
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: Within 7 Business Days for $20<br/>
Express: 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;">← {{ '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>
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.
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.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025