Please help - Different sizes not adding to shopping cart

ShopTillYouDrop
New Member
6 0 0

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

 

 

Replies 12 (12)

Propero
Shopify Partner
895 101 160

@ShopTillYouDrop 

Hi, If you give shop url we can check and suggest solution

 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
ShopTillYouDrop
New Member
6 0 0

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,

Propero
Shopify Partner
895 101 160

We need to look at your product.liquid, sending you request to add me as collaborator, if you wish I can look at it.

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
ShopTillYouDrop
New Member
6 0 0

Thanks @Propero - yes please,

ShopTillYouDrop
New Member
6 0 0

@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>

Propero
Shopify Partner
895 101 160

Please look for "data-varient-id" and replace with "data-variant-id" and check ( without quote). Did anyone make change in the code recently?

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
ShopTillYouDrop
New Member
6 0 0

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,

 

 

ShopTillYouDrop
New Member
6 0 0

Forgot to mention - no changes to the code.

Propero
Shopify Partner
895 101 160

@ShopTillYouDrop 

You may please check https://z23wvjz63ynrzq6k-35510353964.shopifypreview.com 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
Linda228
Visitor
1 0 0

We are having the same issue.

Black Door Boutique (shopblackdoorboutique.com)

 

Thanks for any help.  Have not made any changed to code.

AcquaBonita
New Member
5 0 0

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 .... 

 

 

Propero
Shopify Partner
895 101 160

@AcquaBonita ,

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

 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze