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

Add line item properties to ajax cart. Cleaned up ajax cart JS. #411

Merged
merged 1 commit into from
May 14, 2015
Merged

Add line item properties to ajax cart. Cleaned up ajax cart JS. #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 50 additions & 66 deletions assets/ajax-cart.js.liquid
View file
Open in desktop
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
Open in desktop
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>