Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Commit

Permalink
Add line item properties to ajax cart. Cleaned up ajax cart JS.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cshold
cshold committed May 12, 2015
1 parent 0657f36 commit 5fc5a48
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 78 deletions.
116 changes: 50 additions & 66 deletions assets/ajax-cart.js.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down Expand Up @@ -270,40 +270,31 @@ 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
* - Remove file extension, add _small, and re-add extension
* - 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
};
Expand Down Expand Up @@ -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);
}

Expand All @@ -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,
Expand All @@ -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();
});
}
};
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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);
});
}
};
Expand Down
49 changes: 37 additions & 12 deletions snippets/ajax-cart-template.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="ajaxcart__inner">
{{#items}}
<div class="ajaxcart__product">
<div class="ajaxcart__row" data-id="{{id}}">
<div class="ajaxcart__row" data-line="{{line}}">
<div class="grid">
<div class="grid__item one-quarter">
<a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt=""></a>
Expand All @@ -23,6 +23,13 @@
{{#if variation}}
<span class="ajaxcart__product-meta">{{variation}}</span>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
{% endraw %}{% if settings.cart_vendor_enable %}{% raw %}
<span class="ajaxcart__product-meta">{{ vendor }}</span>
{% endraw %}{% endif %}{% raw %}
Expand All @@ -31,9 +38,15 @@
<div class="grid--full display-table">
<div class="grid__item display-table-cell one-half">
<div class="ajaxcart__qty">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus" data-id="{{id}}" data-qty="{{itemMinus}}">&minus;</button>
<input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus" data-id="{{id}}" data-qty="{{itemAdd}}">+</button>
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}" data-line="{{line}}">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">&minus;</span>
</button>
<input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-line="{{line}}" data-qty="{{itemAdd}}">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</button>
</div>
</div>
<div class="grid__item display-table-cell one-half text-right">
Expand Down Expand Up @@ -63,11 +76,11 @@
</div>
</div>
<p class="text-center">{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}</p>
<button type="submit" class="btn btn--full cart__checkout" name="checkout">
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
<button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} &rarr;
</button>
{% endraw %}{% if additional_checkout_buttons %}
<div>{{ content_for_additional_checkout_buttons }}</div>
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}{% raw %}
</div>
</form>
Expand All @@ -76,18 +89,30 @@
<script id="AjaxQty" type="text/template">
{% raw %}
<div class="ajaxcart__qty">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus" data-id="{{id}}" data-qty="{{itemMinus}}">&minus;</button>
<input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus" data-id="{{id}}" data-qty="{{itemAdd}}">+</button>
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">&minus;</span>
</button>
<input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</button>
</div>
{% endraw %}
</script>
<script id="JsQty" type="text/template">
{% raw %}
<div class="js-qty">
<button type="button" class="js-qty__adjust js-qty__adjust--minus" data-id="{{id}}" data-qty="{{itemMinus}}">&minus;</button>
<button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">&minus;</span>
</button>
<input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
<button type="button" class="js-qty__adjust js-qty__adjust--plus" data-id="{{id}}" data-qty="{{itemAdd}}">+</button>
<button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</button>
</div>
{% endraw %}
</script>

0 comments on commit 5fc5a48

Please sign in to comment.