如果购物车项目数为3 - 隐藏添加到购物车| shopify [英] If cart item count is three – hide add to cart | shopify
本文介绍了如果购物车项目数为3 - 隐藏添加到购物车| shopify的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们正在寻找一种解决方案，客户无法在购物车中放置三种以上的产品。如果您的购物车中有三件商品，则应该使用提醒消息和隐藏的添加到购物车按钮来完成整个过程。
We are looking for a solution, where the customer is not able to put more than three products in the cart. The whole thing should be done with a alert message and a hidden add to cart button if you have three items in your cart.
问题是，我们使用ajaxify大车。 shopify提供的基本教程不起作用。与应用程序相同。
The problem is, that we use a ajaxify cart. The basic tutorials that are provided by shopify do not work. Same with apps.
以下是我们商店的链接：
printnil.com
Here is a Link to our shop: printnil.com
如果您的购物车中有三件商品，如何隐藏添加到购物车按钮？
How to hide the add to cart button if you have three items in your cart?
if ((typeof Shopify) === 'undefined') {
Shopify = {};
}
Shopify.money_format = '${{amount}}';
// -------------------------------------------------------------------------------------
// API Helper Functions
// -------------------------------------------------------------------------------------
function floatToString(numeric, decimals) {
var amount = numeric.toFixed(decimals).toString();
if(amount.match(/^\.\d+/)) {return "0"+amount; }
else { return amount; }
};
function attributeToString(attribute) {
if ((typeof attribute) !== 'string') {
attribute += '';
if (attribute === 'undefined') {
attribute = '';
}
}
return jQuery.trim(attribute);
}
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
}
else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
// -------------------------------------------------------------------------------------
// API Functions
// -------------------------------------------------------------------------------------
Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') cents = cents.replace('.','');
var value = '';
var patt = /\{\{\s*(\w+)\s*\}\}/;
var formatString = (format || this.money_format);
function addCommas(moneyString) {
return moneyString.replace(/(\d+)(\d{3}[\.,]?)/,'$1,$2');
}
switch(formatString.match(patt)[1]) {
case 'amount':
value = addCommas(floatToString(cents/100.0, 2));
break;
case 'amount_no_decimals':
value = addCommas(floatToString(cents/100.0, 0));
break;
case 'amount_with_comma_separator':
value = floatToString(cents/100.0, 2).replace(/\./, ',');
break;
case 'amount_no_decimals_with_comma_separator':
value = addCommas(floatToString(cents/100.0, 0)).replace(/\./, ',');
break;
}
return formatString.replace(patt, value);
};
Shopify.onProduct = function(product) {
alert('Received everything we ever wanted to know about ' + product.title);
};
Shopify.onCartUpdate = function(cart) {
alert('There are now ' + cart.item_count + ' items in the cart.');
};
Shopify.updateCartNote = function(note, callback) {
var params = {
type: 'POST',
url: '/cart/update.js',
data: 'note=' + attributeToString(note),
dataType: 'json',
success: function(cart) {
if ((typeof callback) === 'function') {
callback(cart);
}
else {
Shopify.onCartUpdate(cart);
}
},
error: function(XMLHttpRequest, textStatus) {
Shopify.onError(XMLHttpRequest, textStatus);
}
};
jQuery.ajax(params);
};
Shopify.onError = function(XMLHttpRequest, textStatus) {
var data = eval('(' + XMLHttpRequest.responseText + ')');
if (!!data.message) {
alert(data.message + '(' + data.status + '): ' + data.description);
} else {
alert('Error : ' + Shopify.fullMessagesFromErrors(data).join('; ') + '.');
}
};
// -------------------------------------------------------------------------------------
// POST to cart/add.js returns the JSON of the line item associated with the added item.
// -------------------------------------------------------------------------------------
Shopify.addItem = function(variant_id, quantity, callback) {
var quantity = quantity || 1;
var params = {
type: 'POST',
url: '/cart/add.js',
data: 'quantity=' + quantity + '&id=' + variant_id,
dataType: 'json',
success: function(line_item) {
if ((typeof callback) === 'function') {
callback(line_item);
}
else {
Shopify.onItemAdded(line_item);
}
},
error: function(XMLHttpRequest, textStatus) {
Shopify.onError(XMLHttpRequest, textStatus);
}
};
jQuery.ajax(params);
};
// ---------------------------------------------------------
// POST to cart/add.js returns the JSON of the line item.
// - Allow use of form element instead of id
// - Allow custom error callback
// ---------------------------------------------------------
Shopify.addItemFromForm = function(form, callback, errorCallback) {
var params = {
type: 'POST',
url: '/cart/add.js',
data: jQuery(form).serialize(),
dataType: 'json',
success: function(line_item) {
if ((typeof callback) === 'function') {
callback(line_item, form);
}
else {
Shopify.onItemAdded(line_item, form);
}
},
error: function(XMLHttpRequest, textStatus) {
if ((typeof errorCallback) === 'function') {
errorCallback(XMLHttpRequest, textStatus);
}
else {
Shopify.onError(XMLHttpRequest, textStatus);
}
}
};
jQuery.ajax(params);
};
// ---------------------------------------------------------
// GET cart.js returns the cart in JSON.
// ---------------------------------------------------------
Shopify.getCart = function(callback) {
jQuery.getJSON('/cart.js', function (cart, textStatus) {
if ((typeof callback) === 'function') {
callback(cart);
}
else {
Shopify.onCartUpdate(cart);
}
});
};
// ---------------------------------------------------------
// GET products/<product-handle>.js returns the product in JSON.
// ---------------------------------------------------------
Shopify.getProduct = function(handle, callback) {
jQuery.getJSON('/products/' + handle + '.js', function (product, textStatus) {
if ((typeof callback) === 'function') {
callback(product);
}
else {
Shopify.onProduct(product);
}
});
};
// ---------------------------------------------------------
// POST to cart/change.js returns the cart in JSON.
// ---------------------------------------------------------
Shopify.changeItem = function(variant_id, quantity, callback) {
var params = {
type: 'POST',
url: '/cart/change.js',
data: 'quantity='+quantity+'&id='+variant_id,
dataType: 'json',
success: function(cart) {
if ((typeof callback) === 'function') {
callback(cart);
}
else {
Shopify.onCartUpdate(cart);
}
},
error: function(XMLHttpRequest, textStatus) {
Shopify.onError(XMLHttpRequest, textStatus);
}
};
jQuery.ajax(params);
};
/* Modernizr 2.7.0 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-touch-teststyles-testprop-testallprops-prefixes-domprefixes
*/
;window.Modernizr=function(a,b,c){function y(a){i.cssText=a}function z(a,b){return y(l.join(a+";")+(b||""))}function A(a,b){return typeof a===b}function B(a,b){return!!~(""+a).indexOf(b)}function C(a,b){for(var d in a){var e=a[d];if(!B(e,"-")&&i[e]!==c)return b=="pfx"?e:!0}return!1}function D(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:A(f,"function")?f.bind(d||b):f}return!1}function E(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return A(b,"string")||A(b,"undefined")?C(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),D(e,b,c))}var d="2.7.0",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v=function(a,c,d,e){var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);return h=["­",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i},w={}.hasOwnProperty,x;!A(w,"undefined")&&!A(w.call,"undefined")?x=function(a,b){return w.call(a,b)}:x=function(a,b){return b in a&&A(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:v(["@media (",l.join("touch-enabled),("),g,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},p.csstransforms=function(){return!!E("transform")},p.csstransforms3d=function(){var a=!!E("perspective");return a&&"webkitPerspective"in f.style&&v("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var F in p)x(p,F)&&(u=F.toLowerCase(),e[u]=p[F](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)x(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},y(""),h=j=null,e._version=d,e._prefixes=l,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return C([a])},e.testAllProps=E,e.testStyles=v,e}(this,this.document);
// -------------------------------------------------------------------------------------
// Ajaxify Shopify Add To Cart
// -------------------------------------------------------------------------------------
var ajaxifyShopify = (function(module, $) {
'use strict';
// Public functions
var init;
// Private general variables
var settings, cartInit, $drawerHeight, $cssTransforms, $cssTransforms3d, $isTouch;
// Private plugin variables
var $formContainer, $btnClass, $wrapperClass, $addToCart, $cartCountSelector, $cartCostSelector, $toggleCartButton, $cartContainer, $closeCart, $drawerContainer, $refreshCartCallback;
// Private functions
var updateCountPrice, drawerSetup, showDrawer, hideDrawer, setToggleButtons, formOverride, itemAddedCallback, itemErrorCallback, cartUpdateCallback, refreshCart, adjustCart, adjustCartCallback, scrollTop, isEmpty, log;
/**
* Initialise the plugin and define global options
*/
init = function (options) {
// Default settings
settings = {
debug: true,
method: 'drawer',
formSelector: 'form[action="/cart/add"]',
addToCartSelector: 'input[type="submit"]',
cartCountSelector: null,
cartCostSelector: null,
toggleCartButton: null,
btnClass: null,
wrapperClass: null
};
// Override defaults with arguments
$.extend(settings, options);
// Select DOM elements
$formContainer = $(settings.formSelector);
$btnClass = settings.btnClass;
$wrapperClass = settings.wrapperClass;
$addToCart = $formContainer.find(settings.addToCartSelector);
$cartCountSelector = $(settings.cartCountSelector);
$cartCostSelector = $(settings.cartCostSelector);
$toggleCartButton = $(settings.toggleCartButton);
$refreshCartCallback = settings.refreshCartCallback;
// CSS Checks
$cssTransforms = Modernizr.csstransforms;
$cssTransforms3d = Modernizr.csstransforms3d;
$isTouch = Modernizr.touch;
// Touch check
if ($isTouch) {
$('body').addClass('ajaxify-touch is-touch');
}
drawerSetup();
if ( $addToCart.length ) {
// Take over the add to cart form submit
formOverride();
}
// Run this function in case we're using the quantity selector outside of the cart
adjustCart();
};
updateCountPrice = function (cart) {
if ($cartCountSelector) {
$cartCountSelector.html(cart.item_count);
}
if ($cartCostSelector) {
var price = Shopify.formatMoney(cart.total_price);
$cartCostSelector.html(price);
}
};
setToggleButtons = function () {
// Reselect the element in case it just loaded
$toggleCartButton = $(settings.toggleCartButton);
if ($toggleCartButton) {
// Turn it off by default, in case it's initialized twice
$toggleCartButton.off('hover');
$toggleCartButton.on('hover', function(e) {
e.preventDefault();
if ( $drawerContainer.hasClass('shoppingbagshow') ) {
hideDrawer();
} else {
showDrawer(true);
}
});
}
};
drawerSetup = function () {
/* This function is completely changed from the original.
* Vivetta has its own drawer structure, so we don't need to create one.
*/
// Drawer selectors
$drawerContainer = $('#shoppingBag');
$cartContainer = $('.shoppingbag__listcontain');
setToggleButtons();
};
showDrawer = function (toggle) {
// opening the drawer for the first time
if ( !cartInit && toggle) {
Shopify.getCart(cartUpdateCallback);
}
};
formOverride = function () {
$formContainer.submit(function(e) {
e.preventDefault();
// Remove any previous quantity errors
$('.qty-error').remove();
Shopify.addItemFromForm(e.target, itemAddedCallback, itemErrorCallback);
});
};
itemAddedCallback = function (product) {
Shopify.getCart(cartUpdateCallback);
};
itemErrorCallback = function (XMLHttpRequest, textStatus) {
var data = eval('(' + XMLHttpRequest.responseText + ')');
if (!!data.message) {
if (data.status == 422) {
$formContainer.append('<p class="qty-error">'+ data.description +'</p>')
}
}
};
cartUpdateCallback = function (cart) {
// Update quantity and price
updateCountPrice(cart);
refreshCart(cart);
showDrawer();
};
refreshCart = function (cart) {
$drawerContainer.load('/cart #shoppingBagInner', function() {
log('cart loaded from /cart');
// This line triggers the callback, which will
// run JS manipulating the cart.
$refreshCartCallback(cart);
// Tell our plugin that the cart has loaded
cartInit = true;
// With new elements we need to relink the adjust cart functions
adjustCart();
});
};
adjustCart = function () {
// This function only runs if the entire cart is reprinted.
// To be safe, turn off the previous clicks that were assigned.
var qtyAdjust = $('.qty__sub, .qty__add'),
qtyNew = 0;
// Add or remove from the quantity
qtyAdjust.off('click');
qtyAdjust.on('click', function() {
var el = $(this),
id = el.data('id'),
qtySelector = el.siblings('.qty__num'),
qtyCurrent = parseInt( qtySelector.val() );
// Add or subtract from the current quantity
if (el.hasClass('qty__add')) {
qtyNew = qtyCurrent + 1;
} else {
qtyNew = qtyCurrent - 7;
if (qtyNew < 0) qtyNew = 0;
}
// If it has a data-id, update the cart.
// Otherwise, just update the input's number
if (id) {
updateQuantity(id, qtyNew);
} else {
qtySelector.val(qtyNew);
}
});
// Update quantity based on input on change
var qtyInput = $('.qty__num');
qtyInput.off('change');
qtyInput.on('change', function() {
var el = $(this),
id = el.data('id'),
qty = el.val();
if (id) {
updateQuantity(id, qty);
}
});
// Highlight the text when focused
qtyInput.off('focus');
qtyInput.on('focus', function() {
var el = $(this);
setTimeout(function() {
el.select();
}, 50);
});
function updateQuantity(id, qty) {
var row = $('.shoppinglist__product[data-id="' + id + '"]').addClass('is-loading');
if ( qty == 0 ) {
row.addClass('is-removed').slideUp();
}
// Slight delay to make sure removed animation is done
setTimeout(function() {
Shopify.changeItem(id, qty, adjustCartCallback);
}, 250);
}
// Save note anytime it's changed
var noteArea = $('textarea[name="note"]');
noteArea.off('change');
noteArea.on('change', function() {
var newNote = $(this).val();
// Simply updating the cart note in case they don't click update/checkout
Shopify.updateCartNote(newNote, function(cart) {});
});
// Reset toggle buttons
setToggleButtons();
};
adjustCartCallback = function (cart) {
// Update quantity and price
updateCountPrice(cart);
// Reprint cart
Shopify.getCart(refreshCart);
};
isEmpty = function(el) {
return !$.trim(el.html());
};
log = function (arg) {
if (settings && settings.debug && window.console) {
try {
console.log(arg);
}
catch (e) {}
}
};
module = {
init: init
};
return module;
}(ajaxifyShopify || {}, jQuery));
推荐答案
$.ajax({
type: 'GET',
url: 'http://your-store.myshopify.com/cart.json',
dataType: 'jsonp',
success: function(data) {
var item_count = data['item_count'];
//If there are items in cart
if(item_count > 3) {
$('#add-to-cart').hide();
}
}
});
另外
如果你看到这个（ http://docs.shopify.com/support / your-website / themes / can-i-use-ajax-api ）您可以调用GET /cart.js的Ajax API，您将获得 item_count 作为回应，你可以放一个 if 块来检查它是否大于3然后隐藏按钮。
if you see this (http://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api) Ajax API you can make a call to GET /cart.js and you will get item_count in response then you can put a if block to check if it's greater than 3 and then hide the button.
这篇关于如果购物车项目数为3 - 隐藏添加到购物车| shopify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
