如果购物车项目数为3 – 隐藏添加到购物车| shopify
我们正在寻找一种解决方案，客户无法在购物车中放置三种以上的产品。 如果您的购物车中有三件商品，则应该使用提醒消息和隐藏的添加到购物车按钮来完成整个操作。
问题是，我们使用ajaxify购物车。 shopify提供的基本教程不起作用。 与应用程序相同。
这是我们商店的链接： printnil.com
如果您的购物车中有三件商品，如何隐藏添加到购物车按钮？
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/.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=["",'',a,""].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(''+ data.description +'
') } } }; 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）Ajax API，您可以调用GET /cart.js，您将获得item_count作为响应然后您可以放置一个if块来检查它是否大于3然后隐藏按钮。