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

BEM styles for ajax cart #248

Merged
merged 2 commits into from
Oct 8, 2014
Merged

BEM styles for ajax cart #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1464bf
BEM styles for ajax cart
cshold Sep 30, 2014
72a1f33
removed comment
cshold Sep 30, 2014
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
40 changes: 20 additions & 20 deletions assets/ajaxify.js.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ var ajaxifyShopify = (function(module, $) {

// Write a (hidden) Checkout button, a loader, and the extra view cart button
var checkoutBtn = $('<a href="/cart" class="flip-back" style="background-color: #C00; color: #fff;" id="flip-checkout">Checkout</a>').addClass($btnClass),
flipLoader = $('<span class="ajaxifyCart-loader"></span>'),
flipLoader = $('<span class="ajaxcart__flip-loader"></span>'),
flipExtra = $('<div class="flip-extra"><a href="#" class="flip-cart">View Cart (<span></span>)</a></div>');

// Append checkout button and loader
Expand Down Expand Up @@ -434,19 +434,19 @@ var ajaxifyShopify = (function(module, $) {
template = Handlebars.compile(source);

// Append modal and overlay to body
$body.append(template).append('<div id="ajaxifyCart-overlay"></div>');
$body.append(template).append('<div class="ajaxcart__overlay"></div>');

// Modal selectors
$modalContainer = $('#ajaxifyModal');
$modalOverlay = $('#ajaxifyCart-overlay');
$modalOverlay = $('.ajaxcart__overlay');
$cartContainer = $('#ajaxifyCart');

// Close modal when clicking the overlay
$modalOverlay.on('click', hideModal);

// Create a close modal button
$modalContainer.prepend('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
$closeCart = $('.ajaxifyCart--close');
$modalContainer.prepend('<button class="ajaxcart__close" title="Close Cart">Close Cart</button>');
$closeCart = $('.ajaxcart__close');
$closeCart.on('click', hideModal);

// Add a class if CSS translate isn't available
Expand All @@ -473,7 +473,7 @@ var ajaxifyShopify = (function(module, $) {
};

showModal = function (toggle) {
$body.addClass('ajaxify-modal--visible');
$body.addClass('ajaxcart--is-visible');
// Build the cart if it isn't already there
if ( !cartInit && toggle ) {
Shopify.getCart(cartUpdateCallback);
Expand Down Expand Up @@ -508,7 +508,7 @@ var ajaxifyShopify = (function(module, $) {
};

hideModal = function (e) {
$body.removeClass('ajaxify-modal--visible');
$body.removeClass('ajaxcart--is-visible');
if (e) {
e.preventDefault();
}
Expand Down Expand Up @@ -537,7 +537,7 @@ var ajaxifyShopify = (function(module, $) {
// Drawer selectors
$drawerContainer = $('#ajaxifyDrawer');
$cartContainer = $('#ajaxifyCart');
$drawerCaret = $('.ajaxifyDrawer-caret > span');
$drawerCaret = $('.ajaxcart__caret > span');

// Toggle drawer with cart button
setToggleButtons();
Expand All @@ -560,7 +560,7 @@ var ajaxifyShopify = (function(module, $) {
// Position the caret
function positionCaret() {
if ($toggleCartButton.offset()) {
// Get the position of the toggle button to align the carat with
// Get the position of the toggle button to align the caret with
var togglePos = $toggleCartButton.offset(),
toggleWidth = $toggleCartButton.outerWidth(),
toggleMiddle = togglePos.left + toggleWidth/2;
Expand Down Expand Up @@ -887,20 +887,20 @@ var ajaxifyShopify = (function(module, $) {
}

// Update quantify selectors
var qtyAdjust = $('.ajaxifyCart--qty-adjuster');
var qtyAdjust = $('.ajaxcart__qty-adjust');

// Add or remove from the quantity
qtyAdjust.off('click');
qtyAdjust.on('click', function() {
var el = $(this),
id = el.data('id'),
qtySelector = el.siblings('.ajaxifyCart--num'),
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('ajaxifyCart--add')) {
if (el.hasClass('ajaxcart__qty--plus')) {
qty = qty + 1;
} else {
qty = qty - 1;
Expand All @@ -918,7 +918,7 @@ var ajaxifyShopify = (function(module, $) {
});

// Update quantity based on input on change
var qtyInput = $('.ajaxifyCart--num');
var qtyInput = $('.ajaxcart__qty-num');
qtyInput.off('change');
qtyInput.on('change', function() {
var el = $(this),
Expand All @@ -943,7 +943,7 @@ var ajaxifyShopify = (function(module, $) {
});

// Completely remove product
$('.ajaxifyCart--remove').on('click', function(e) {
$('.ajaxcart__remove').on('click', function(e) {
var el = $(this),
id = el.data('id') || null,
qty = 0;
Expand All @@ -960,9 +960,9 @@ var ajaxifyShopify = (function(module, $) {
function updateQuantity(id, qty) {
// Add activity classes when changing cart quantities
if (!settings.useCartTemplate) {
var row = $('.ajaxifyCart--row[data-id="' + id + '"]').addClass('ajaxifyCart--is-loading');
var row = $('.ajaxcart__row[data-id="' + id + '"]').addClass('is-loading');
} else {
var row = $('.cart-row[data-id="' + id + '"]').addClass('ajaxifyCart--is-loading');
var row = $('.cart-row[data-id="' + id + '"]').addClass('is-loading');
}

if ( qty === 0 ) {
Expand Down Expand Up @@ -1037,7 +1037,7 @@ var ajaxifyShopify = (function(module, $) {
// If there is a regular link to remove an item, add attributes needed to ajaxify it
if ($('a[href^="/cart/change"]', $cartContainer).length) {
$('a[href^="/cart/change"]', $cartContainer).each(function() {
var el = $(this).addClass('ajaxifyCart--remove');
var el = $(this).addClass('ajaxcart__remove');
});
}
};
Expand Down Expand Up @@ -1074,16 +1074,16 @@ var ajaxifyShopify = (function(module, $) {
});

// Setup listeners to add/subtract from the input
$('.js--qty-adjuster').on('click', function() {
$('.js-qty__adjust').on('click', function() {
var el = $(this),
id = el.data('id'),
qtySelector = el.siblings('.js--num'),
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--add')) {
if (el.hasClass('js-qty__adjust--plus')) {
qty = qty + 1;
} else {
qty = qty - 1;
Expand Down
Loading