From 5fc5a4843aa37d04a6506bf58e279f81bf42bc20 Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 12 May 2015 13:24:57 -0400 Subject: [PATCH] Add line item properties to ajax cart. Cleaned up ajax cart JS. --- assets/ajax-cart.js.liquid | 116 +++++++++++++---------------- snippets/ajax-cart-template.liquid | 49 +++++++++--- 2 files changed, 87 insertions(+), 78 deletions(-) diff --git a/assets/ajax-cart.js.liquid b/assets/ajax-cart.js.liquid index 3328c4505..52ad412fe 100644 --- a/assets/ajax-cart.js.liquid +++ b/assets/ajax-cart.js.liquid @@ -110,11 +110,11 @@ ShopifyAPI.getCart = function(callback) { }; // POST to cart/change.js returns the cart in JSON -ShopifyAPI.changeItem = function(variant_id, quantity, callback) { +ShopifyAPI.changeItem = function(line, quantity, callback) { var params = { type: 'POST', url: '/cart/change.js', - data: 'quantity='+quantity+'&id='+variant_id, + data: 'quantity=' + quantity + '&line=' + line, dataType: 'json', success: function(cart) { if ((typeof callback) === 'function') { @@ -270,9 +270,6 @@ var ajaxCart = (function(module, $) { // Add each item to our handlebars.js data $.each(cart.items, function(index, cartItem) { - var itemAdd = cartItem.quantity + 1, - itemMinus = cartItem.quantity - 1, - itemQty = cartItem.quantity; /* Hack to get product image thumbnail * - If image is not null @@ -280,30 +277,24 @@ var ajaxCart = (function(module, $) { * - Create server relative link * - A hard-coded url of no-image */ - if (cartItem.image != null){ var prodImg = cartItem.image.replace(/(\.[^.]*)$/, "_small$1").replace('http:', ''); } else { var prodImg = "//cdn.shopify.com/s/assets/admin/no-image-medium-cc9732cb976dd349a0df1d39816fbcc7.gif"; } - var prodName = cartItem.product_title, - prodVariation = cartItem.variant_title; - - if (prodVariation == 'Default Title') { - prodVariation = false; - } - // Create item's data object and add to 'items' array item = { id: cartItem.variant_id, + line: index + 1, // Shopify uses a 1+ index in the API url: cartItem.url, img: prodImg, - name: prodName, - variation: prodVariation, - itemAdd: itemAdd, - itemMinus: itemMinus, - itemQty: itemQty, + name: cartItem.product_title, + variation: cartItem.variant_title, + properties: cartItem.properties, + itemAdd: cartItem.quantity + 1, + itemMinus: cartItem.quantity - 1, + itemQty: cartItem.quantity, price: Shopify.formatMoney(cartItem.price, settings.moneyFormat), vendor: cartItem.vendor }; @@ -333,63 +324,63 @@ var ajaxCart = (function(module, $) { // Add or remove from the quantity $body.on('click', '.ajaxcart__qty-adjust', function() { - var el = $(this), - id = el.data('id'), - qtySelector = el.siblings('.ajaxcart__qty-num'), - qty = parseInt(qtySelector.val().replace(/\D/g, '')); + var $el = $(this), + line = $el.data('line'), + $qtySelector = $el.siblings('.ajaxcart__qty-num'), + qty = parseInt($qtySelector.val().replace(/\D/g, '')); var qty = validateQty(qty); // Add or subtract from the current quantity - if (el.hasClass('ajaxcart__qty--plus')) { - qty = qty + 1; + if ($el.hasClass('ajaxcart__qty--plus')) { + qty += 1; } else { - qty = qty - 1; + qty -= 1; if (qty <= 0) qty = 0; } - // If it has a data-id, update the cart. + // If it has a data-line, update the cart. // Otherwise, just update the input's number - if (id) { - updateQuantity(id, qty); + if (line) { + updateQuantity(line, qty); } else { - qtySelector.val(qty); + $qtySelector.val(qty); } }); // Update quantity based on input on change $body.on('change', '.ajaxcart__qty-num', function() { - var el = $(this), - id = el.data('id'), - qty = parseInt(el.val().replace(/\D/g, '')); + var $el = $(this), + line = $el.data('line'), + qty = parseInt($el.val().replace(/\D/g, '')); var qty = validateQty(qty); - // Only update the cart via ajax if we have a variant ID to work with - if (id) { - updateQuantity(id, qty); + // If it has a data-line, update the cart + if (line) { + updateQuantity(line, qty); } }); // Highlight the text when focused $body.on('focus', '.ajaxcart__qty-adjust', function() { - var el = $(this); + var $el = $(this); setTimeout(function() { - el.select(); + $el.select(); }, 50); }); - function updateQuantity(id, qty) { + function updateQuantity(line, qty) { // Add activity classes when changing cart quantities - var row = $('.ajaxcart__row[data-id="' + id + '"]').addClass('is-loading'); + var $row = $('.ajaxcart__row[data-line="' + line + '"]').addClass('is-loading'); if (qty === 0) { - row.parent().addClass('is-removed'); + $row.parent().addClass('is-removed'); } // Slight delay to make sure removed animation is done setTimeout(function() { - ShopifyAPI.changeItem(id, qty, adjustCartCallback); + ShopifyAPI.changeItem(line, qty, adjustCartCallback); }, 250); } @@ -416,8 +407,8 @@ var ajaxCart = (function(module, $) { // If there is a normal quantity number field in the ajax cart, replace it with our version if ($('input[type="number"]', $cartContainer).length) { $('input[type="number"]', $cartContainer).each(function() { - var el = $(this), - currentQty = el.val(); + var $el = $(this), + currentQty = $el.val(); var itemAdd = currentQty + 1, itemMinus = currentQty - 1, @@ -426,21 +417,14 @@ var ajaxCart = (function(module, $) { var source = $("#AjaxQty").html(), template = Handlebars.compile(source), data = { - id: el.data('id'), + id: $el.data('id'), itemQty: itemQty, itemAdd: itemAdd, itemMinus: itemMinus }; // Append new quantity selector then remove original - el.after(template(data)).remove(); - }); - } - - // If there is a regular link to remove an item, add attributes needed for ajax - if ($('a[href^="/cart/change"]', $cartContainer).length) { - $('a[href^="/cart/change"]', $cartContainer).each(function() { - var el = $(this).addClass('ajaxcart__remove'); + $el.after(template(data)).remove(); }); } }; @@ -452,10 +436,10 @@ var ajaxCart = (function(module, $) { if (numInputs.length) { numInputs.each(function() { - var el = $(this), - currentQty = el.val(), - inputName = el.attr('name'), - inputId = el.attr('id'); + var $el = $(this), + currentQty = $el.val(), + inputName = $el.attr('name'), + inputId = $el.attr('id'); var itemAdd = currentQty + 1, itemMinus = currentQty - 1, @@ -464,7 +448,7 @@ var ajaxCart = (function(module, $) { var source = $("#JsQty").html(), template = Handlebars.compile(source), data = { - id: el.data('id'), + id: $el.data('id'), itemQty: itemQty, itemAdd: itemAdd, itemMinus: itemMinus, @@ -473,28 +457,28 @@ var ajaxCart = (function(module, $) { }; // Append new quantity selector then remove original - el.after(template(data)).remove(); + $el.after(template(data)).remove(); }); // Setup listeners to add/subtract from the input $('.js-qty__adjust').on('click', function() { - var el = $(this), - id = el.data('id'), - qtySelector = el.siblings('.js-qty__num'), - qty = parseInt(qtySelector.val().replace(/\D/g, '')); + var $el = $(this), + id = $el.data('id'), + $qtySelector = $el.siblings('.js-qty__num'), + qty = parseInt($qtySelector.val().replace(/\D/g, '')); var qty = validateQty(qty); // Add or subtract from the current quantity - if (el.hasClass('js-qty__adjust--plus')) { - qty = qty + 1; + if ($el.hasClass('js-qty__adjust--plus')) { + qty += 1; } else { - qty = qty - 1; + qty -= 1; if (qty <= 1) qty = 1; } // Update the input's number - qtySelector.val(qty); + $qtySelector.val(qty); }); } }; diff --git a/snippets/ajax-cart-template.liquid b/snippets/ajax-cart-template.liquid index 2c9140fe4..04dfbf5cb 100755 --- a/snippets/ajax-cart-template.liquid +++ b/snippets/ajax-cart-template.liquid @@ -12,7 +12,7 @@
{{#items}}
-
+
@@ -23,6 +23,13 @@ {{#if variation}} {{variation}} {{/if}} + {{#properties}} + {{#each this}} + {{#if this}} + {{@key}}: {{this}} + {{/if}} + {{/each}} + {{/properties}} {% endraw %}{% if settings.cart_vendor_enable %}{% raw %} {{ vendor }} {% endraw %}{% endif %}{% raw %} @@ -31,9 +38,15 @@
- - - + + +
@@ -63,11 +76,11 @@

{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}

- {% endraw %}{% if additional_checkout_buttons %} -
{{ content_for_additional_checkout_buttons }}
+
{{ content_for_additional_checkout_buttons }}
{% endif %}{% raw %}
@@ -76,18 +89,30 @@