Please help - Different sizes not adding to shopping cart

Highlighted
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

 

 

0 Likes
Highlighted
Shopify Partner
148 19 28

@ShopTillYouDrop 

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

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
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,

0 Likes
Highlighted
Shopify Partner
148 19 28

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 to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
6 0 0

Thanks @Propero - yes please,

0 Likes
Highlighted
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>

0 Likes
Highlighted
Shopify Partner
148 19 28

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 to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
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,

 

 

0 Likes
Highlighted
New Member
6 0 0

Forgot to mention - no changes to the code.

0 Likes
Highlighted
Shopify Partner
148 19 28

@ShopTillYouDrop 

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes