Product pages - Stay on the product page after adding products to the cart

Magz
New Member
2 0 0

@TyW  Hello,

 

I did exactly what you did and its now working fine, but how can my customers select the sizes before adding to cart from the main page?.

I been trying to fix this for 2 days with no luck.

 

Your help is much appreciated

0 Likes
vitazok
New Member
1 0 0

Hello,

My products have 6 variants but no matter which one I choose it always adds the same variant to cart.

What do I need to change so that selected variant is added to cart (not the default one)?

Thank you

 

Link to the store:

https://thedropcor.myshopify.com/collections/use-dropcor-packaging

 

Code in ajaxify-cart.liquid:

<script>

window.onload = function() {

/**
* Module to ajaxify all add to cart forms on the page.
*
* Copyright (c) 2015 Caroline Schnapp (11heavens.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
Shopify.AjaxifyCart = (function($) {

// Some configuration options.
// I have separated what you will never need to change from what
// you might change.

var _config = {

// What you might want to change
addToCartBtnLabel: 'Add to cart',
addedToCartBtnLabel: 'Thank you!',
addingToCartBtnLabel: 'Adding...',
soldOutBtnLabel: 'Sold Out',
howLongTillBtnReturnsToNormal: 1000, // in milliseconds.
cartCountSelector: '#CartCount',
cartTotalSelector: '#cart-price',
// 'aboveForm' for top of add to cart form,
// 'belowForm' for below the add to cart form, and
// 'nextButton' for next to add to cart button.
feedbackPosition: 'nextButton',

// What you will never need to change
addToCartBtnSelector: '[type="submit"]',
addToCartFormSelector: 'form[action="/cart/add"]',
shopifyAjaxAddURL: '/cart/add.js',
shopifyAjaxCartURL: '/cart.js'
};

// We need some feedback when adding an item to the cart.
// Here it is.
var _showFeedback = function(success, html, $addToCartForm) {
$('.ajaxified-cart-feedback').remove();
var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>';
switch (_config.feedbackPosition) {
case 'aboveForm':
$addToCartForm.before(feedback);
break;
case 'belowForm':
$addToCartForm.after(feedback);
break;
case 'nextButton':
default:
$addToCartForm.find(_config.addToCartBtnSelector).after(feedback);
break;
}
// If you use animate.css
// $('.ajaxified-cart-feedback').addClass('animated bounceInDown');
$('.ajaxified-cart-feedback').slideDown();
};
var _setText = function($button, label) {
if ($button.children().length) {
$button.children().each(function() {
if ($.trim($(this).text()) !== '') {
$(this).text(label);
}
});
}
else {
$button.val(label).text(label);
}
};
var _init = function() {
$(document).ready(function() {
$(_config.addToCartFormSelector).submit(function(e) {
e.preventDefault();
var $addToCartForm = $(this);
var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
_setText($addToCartBtn, _config.addingToCartBtnLabel);
$addToCartBtn.addClass('disabled').prop('disabled', true);
// Add to cart.
$.ajax({
url: _config.shopifyAjaxAddURL,
dataType: 'json',
type: 'post',
data: $addToCartForm.serialize(),
success: function(itemData) {
// Re-enable add to cart button.
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a>.',$addToCartForm);
window.setTimeout(function(){
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
_setText($addToCartBtn,_config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
// Update cart count and show cart link.
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
if (_config.cartCountSelector && $(_config.cartCountSelector).length) {
var value = $(_config.cartCountSelector).html() || '0';
$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
}
if (_config.cartTotalSelector && $(_config.cartTotalSelector).length) {
if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== 'undefined') {
var newCurrency = '';
if ($('[name="currencies"]').length) {
newCurrency = $('[name="currencies"]').val();
}
else if ($('#currencies span.selected').length) {
newCurrency = $('#currencies span.selected').attr('data-currency');
}
if (newCurrency) {
$(_config.cartTotalSelector).html('<span class=money>' + Shopify.formatMoney(Currency.convert(cart.total_price, "{{ shop.currency }}", newCurrency), Currency.money_format[newCurrency]) + '</span>');
}
else {
$(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
}
}
else {
$(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
}
};
});
},
error: function(XMLHttpRequest) {
var response = eval('(' + XMLHttpRequest.responseText + ')');
response = response.description;
if (response.slice(0,4) === 'All ') {
_showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
$addToCartBtn.prop('disabled', false);
_setText($addToCartBtn, _config.soldOutBtnLabel);
$addToCartBtn.prop('disabled',true);
}
else {
_showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
$addToCartBtn.prop('disabled', false).removeClass('disabled');
_setText($addToCartBtn, _config.addToCartBtnLabel);
}
}
});
return false;
});
});
};
return {
init: function(params) {
// Configuration
params = params || {};
// Merging with defaults.
$.extend(_config, params);
// Action
$(function() {
_init();
});
},
getConfig: function() {
return _config;
}
}
})(jQuery);

Shopify.AjaxifyCart.init();

}

</script>

{% comment %}
If you want to animate your feedback message.
{% endcomment %}

{% comment %}
{{ '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css' | stylesheet_tag }}
{% endcomment %}

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' | stylesheet_tag }}

<style>
.ajaxified-cart-feedback {
display: block;
line-height: 36px;
font-size: 90%;
vertical-align: middle;
}
.ajaxified-cart-feedback.success {
color: #3D9970;
}
.ajaxified-cart-feedback.error {
color: #FF4136;
}
.ajaxified-cart-feedback a {
border-bottom: 1px solid;
}
</style>

0 Likes
lkbackus
New Member
2 0 0

 I have also  added the Ajaxify code to my Debut theme and it works brilliantly, except . . .

 . . . it doesn't show variant choice to users.

How do you amend the code so it shows the 'variant choice' dropdown and passes the data to the cart?

0 Likes
Younesz10
New Member
7 0 0

Hi! I have tried every step but it still does not work for my store. it is brooklyn theme. Do you know why?

0 Likes
KatieO
New Member
5 0 0

Thanks for this. Super helpful. 

Unfortunately I am getting a repeat of the success message and can't seem to locate the fix. Are you able to help please?

www.rainbowsensorygifts.co.uk

0 Likes
elhayds
New Member
8 0 0

Hey,

I've checked your store and it appears that you managed to get it to automatically add to the cart and update without refreshing.

How did you manage this in the end as I am having the same issue?

Thanks

0 Likes
wingchiu89
New Member
3 0 0

Hi there,

I followed exactly the steps you provided and it worked, but only for the original language version. I tried it under other 2 languages I have on my site, did not work. I used Langify.

Any one share some thoughts?

Many thanks!

Alice

0 Likes
TheWreckShop
Tourist
8 0 0

Thank you so much. That really fixed 1 of my 2946520933452049875293 problems in my list. 

Now I will try to change the look of my ADD TO CART ....

And I need to fix the number of products added in the shopping icon (it  simply VANISHED.)

Do you have any idea how can I fix these two problemas too?

 

Thank you anyway. 

 

0 Likes
AmandaIntera
New Member
1 0 0

Hey! I just made this update myself, and figured out where to change the colour.

Look for this piece of code in the "ajaxify-cart.liquid" snippet:

.ajaxified-cart-feedback.success {
color: #000000;

Where I bolded the 0's above, that's where you will enter the HEX# of the colour you'd like the text to be

 

**I am using the "Minimal" theme and I just followed this tutorial to a tee and had no issues, everything worked as planned. Thank you!!

0 Likes
NonaSupperClub
Tourist
6 0 2

Hello,

I tried this on the Brooklyn theme and it works really well. Is there any way of having the variants options show as well ?????

0 Likes