All things Shopify and commerce
Hi Guys,
I have a problem where when you add products to the shopping cart - different sizes are not reflected.
So, UK size 4-6 you can add but if you try adding size 6-8, 8-10 etc... it defaults back to 4-6 -
Any ideas on how to fix?
Appreciate any help.
Here is the cart.liqud code:
<!--=================== Cart Template ===================-->
<main class="cart-page">
<section class="cart-content paira-gap-2 paira-gap-1">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1 class="page-header text-center margin-bottom-0">Shopping Cart</h1>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 paira-gap-3 text-center paira-cartEmpty" {% if cart.item_count != 0 %}style="display: none;"{% endif %}>
<h3 class="text-capitalize margin-top-40">It Appears That Your Cart Is Currently Empty!</h3>
<h5 class="margin-bottom-10">Please Continue Shopping ...</h5>
</div>
<form action="/cart" method="post" class="paira-cartNotEmpty" {% if cart.item_count == 0 %}style="display: none;"{% endif %}>
<div class="col-md-8 col-sm-7 col-xs-12 margin-top-40">
<div class="cart-item-list">
<h6 class="text-uppercase panel-title cart-title">Product Lists</h6>
<ul class="list-unstyled paira-cart-page-list">
{% for item in cart.items %}
<li>
<div class="col-md-2 col-sm-3 col-xs-12 margin-top-20">
<a href="{{ item.url }}">
<img class="img-responsive thumbnail" src="{{ item | img_url: 'compact' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="col-md-10 col-sm-9 col-xs-12 margin-top-20">
<a href="{{ item.url }}" class="margin-top-10"><strong>{{ item.title }}</strong></a>
<h4 class="margin-top-20 margin-bottom-10"><span class="money">{{ item.line_price | money }}</span></h4>
<label class="margin-top-10">Quantity</label>
<div class="full-width">
<input type="number" size="4" name="updates[]" min="0" value="{{ item.quantity }}" class="form-control pull-left paira-cart-quantity-{{ item.id }} margin-bottom-10">
<a href="/cart/change?line={{ forloop.index }}&quantity=" data-item-id="{{ item.id }}" class="btn btn-default pull-left margin-left-10 margin-right-10 margin-bottom-10 paira-cart-page-update"><i class="fa fa-pencil"></i> Update</a>
<a href="/cart/change?line={{ forloop.index }}&quantity=0" class="btn btn-default pull-left paira-cart-page-delete margin-bottom-10"><i class="fa fa-times"></i> Remove</a>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<aside class="col-md-4 col-sm-5 col-xs-12 margin-top-40">
<figure class="margin-bottom-30">
<figcaption><h4 class="panel-heading">Sub Total</h4></figcaption>
<div class="cart-sub-total paira-cart-sub-total">
<h2 class="margin-top-5 margin-bottom-20"><span class="money">{{ cart.total_price | money }}</span></h2>
<textarea id="note" name="note" class="margin-top-10 margin-bottom-10 form-control" placeholder="Special instructions...">{{ cart.note }}</textarea>
<input type="submit" id="checkout" class="btn btn-default btn-lg btn-block text-uppercase" name="checkout" value="Proceed To Checkout">
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons margin-top-10">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</div>
</figure>
</aside>
</form>
</div>
</div>
</section>
</main>
<script>
$(function() {
$(document).on("click", ".paira-cart-page-update", function(p) {
p.preventDefault();
var url = $(this).attr('href')+$('.paira-cart-quantity-'+$(this).attr('data-item-id')).val();
window.location.href = url;
});
});
</script>
Thanks for any help guys,
All the best,
ShopTillYouDrop
Hi, If you give shop url we can check and suggest solution
Thanks for your help - site is here with theme in question:
https://pfag7a0fu38xlal8-35510353964.shopifypreview.com
This is a preview link as losing sales with it live as obviously they can't pick the right size.
Check out shopping cart on ANY product - leggings, bras etc... when picking size will just default to 1 size - so only 1 size can be picked,
Thanks again,
Chris,
We need to look at your product.liquid, sending you request to add me as collaborator, if you wish I can look at it.
@Properohere is the code for product.liquid:
<!--=================== Product Template ===================-->
<main class="product-page">
<section class="single-product paira-gap-2">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row paira-product">
<div class="col-md-6 col-sm-6 col-xs-12 paira-gap-1">
<div class="paira-single-product-image">
<div class="paira-single-product-slider">
{% for image in product.images limit: settings.product_thumb_image_limit %}
<img src="{{ image | product_img_url: 'grande' }}" alt="{{ collection.image.alt }}" class="paira-product-image img-responsive margin-bottom-30" />
{% endfor %}
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 paira-gap-1">
<h3 class="margin-clear paira-product-title margin-bottom-30">{{ product.title }}</h3>
<div class="single-product-details paira-single-product-details text-uppercase">
<p class="margin-bottom-20"><label>Vendor :</label> {{ product.vendor }}</p>
<p class="margin-bottom-20"><label>Type :</label> {{ product.type }}</p>
</div>
<h3 class="margin-bottom-30 paira-price-preview">
{% assign variant = product.selected_or_first_available_variant %}
{% if variant.price < variant.compare_at_price %}
<del class="margin-right-10"><span class="money">{{ variant.compare_at_price | money }}</span></del>
{% endif %}
<span class="paira-default-price"><span class="money">{{ variant.price | money }}</span></span>
</h3>
<div class="option-switch-dropdown text-uppercase">
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
{% assign hide_default_title = true %}
{% endif %}
<div class="product-options {% if hide_default_title %}no-options {% endif %}">
<div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}>
<select id="product-select" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}>{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="full-width">
<strong>Quantity</strong>
<div class="input-group paira-quantity-group product-quantity-group margin-top-10">
<div class="input-group-addon" data-direction="down"><i class="fa fa-minus"></i></div>
<input type="text" value="1" class="form-control paira-single-quantity text-center" placeholder="1">
<div class="input-group-addon" data-direction="up"><i class="fa fa-plus"></i></div>
</div>
</div>
<div class="single-product-button">
<a href="#" data-item-quantity="1" data-varient-id="{{ product.variants.first.id }}" class="btn btn-default btn-block btn-lg paira-add-to-cart margin-top-30"><i class="fa fa-shopping-cart"></i> Add To Cart</a>
</div>
<div class="paira-gap-1 paira-gap-2">
<!-- Nav tabs -->
<ul class="nav nav-tabs single-product-tabs">
<li class="active"><a href="#description" data-toggle="tab">Description</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="description">
{{ product.description }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
{{ 'jquery.bxslider.min.js' | asset_url | script_tag }}
<script>
var selectCallback = function(variant, selector) {
if (variant && variant.available) {
if(variant.price < variant.compare_at_price){
$('.paira-price-preview').html('<del><span class="money">'+ Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") +'</span></del><span class="margin-left-10 paira-default-price"><span class="money">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span></span>');
} else {
$('.paira-price-preview').html('<span class="paira-default-price"><span class="money">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span></span>');
}
$('.paira-quantity-'+variant.id).show();
$('.single-product-buttons .paira-add-to-cart').removeAttr('disabled').removeClass('disabled').attr('data-varient-id', variant.id).html('<i class="fa fa-shopping-cart"></i> Add to Cart');
} else {
var message = variant ? "Sold Out" : "Unavailable";
$('.single-product-buttons .paira-add-to-cart').addClass('disabled').attr('disabled', 'disabled').html('<i class="fa fa-ellipsis-h"></i> '+message);
$('.paira-price-preview').html(message);
}
};
$(function() {
/*******************************************************************************
* Call Shopify Option Selectors
*******************************************************************************/
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback});
// Add label if only one product option and it isn't 'Title'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
{% endif %}
$(document).on("click", ".paira-quantity-group .input-group-addon", function() {
var t = $(this).attr("data-direction"),
n = $(this).parent().children('input[type="text"]'),
i = n.val();
if ("up" == t){
i++;
n.val(i);
} else if ("down" == t) {
if (1 == i) return;
i--;
n.val(i);
}
$('.paira-add-to-cart').attr('data-item-quantity', n.val());
});
});
</script>
Please look for "data-varient-id" and replace with "data-variant-id" and check ( without quote). Did anyone make change in the code recently?
Thanks for your help on this.
OK. so i replaced this part of the code:
<a href="#" data-item-quantity="1" data-varient-id="{{ product.variants.first.id }}" class="btn btn-default btn-block btn-lg paira-add-to-cart margin-top-30"><i class="fa fa-shopping-cart"></i> Add To Cart</a>
with
<a href="#" data-item-quantity="1" data-variant-id="{{ product.variants.first.id }}" class="btn btn-default btn-block btn-lg paira-add-to-cart margin-top-30"><i class="fa fa-shopping-cart"></i> Add To Cart</a>
as suggested - did not change anything that i noticed - still same problem.
I also saw in the code above another "varient" here:
$('.single-product-buttons .paira-add-to-cart').removeAttr('disabled').removeClass('disabled').attr('data-varient-id', variant.id).html('<i class="fa fa-shopping-cart"></i> Add to Cart');
and replaced with:
$('.single-product-buttons .paira-add-to-cart').removeAttr('disabled').removeClass('disabled').attr('data-variant-id', variant.id).html('<i class="fa fa-shopping-cart"></i> Add to Cart');
with both of them changed i ended up with an error message when trying to add a product to the cart - thank you for your help i really appreciate it!
Anymore help would be great!
Chris,
Forgot to mention - no changes to the code.
You may please check https://z23wvjz63ynrzq6k-35510353964.shopifypreview.com
We are having the same issue.
Black Door Boutique (shopblackdoorboutique.com)
Thanks for any help. Have not made any changed to code.
Same here. No changes to the code but cart would always show the smallest size by default and the customer can't do anything to change it ...
I can't believe I paid $300 + loss of sales for a theme which has such a crucial glitch.... so unprofessional ....
Hi, the first point of contact should be theme support if it's a paid theme and you have not made any code changes, they should be able to resolve it. If this is still unsolved you may need to provide collab access to some expert to fix this. This is related to wrong event handling in javascript code. If it's a theme issue, theme support would have a readymade solution
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024