' + message + '
'; - }); - } + if (lineItem.availability) { + if (lineItem.availability.messages) { + lineItem.availability.messages.forEach(function (message) { + messages += '' + message + '
'; + }); + } - if (lineItem.availability.inStockDate) { - messages += '' - + lineItem.availability.inStockDate - + '
'; + if (lineItem.availability.inStockDate) { + messages += '' + + lineItem.availability.inStockDate + + '
'; + } } - } - $('.availability-' + lineItem.UUID).html(messages); + $('.availability-' + lineItem.UUID).html(messages); + } } /** @@ -156,7 +175,7 @@ function updateAvailability(data, uuid) { * @param {function} match - function that takes an element and returns a boolean indicating if the match is made * @returns {Object|null} - returns an element of the array that matched the query. */ -function findItem(array, match) { +function findItem(array, match) { // eslint-disable-line no-unused-vars for (var i = 0, l = array.length; i < l; i++) { if (match.call(this, array[i])) { return array[i]; @@ -171,52 +190,7 @@ function findItem(array, match) { * @param {string} uuid - The uuid of the product line item to update */ function updateProductDetails(data, uuid) { - var lineItem = findItem(data.cartModel.items, function (item) { - return item.UUID === uuid; - }); - - if (lineItem.variationAttributes) { - var colorAttr = findItem(lineItem.variationAttributes, function (attr) { - return attr.attributeId === 'color'; - }); - - if (colorAttr) { - var colorSelector = '.Color-' + uuid; - var newColor = 'Color: ' + colorAttr.displayValue; - $(colorSelector).text(newColor); - } - - var sizeAttr = findItem(lineItem.variationAttributes, function (attr) { - return attr.attributeId === 'size'; - }); - - if (sizeAttr) { - var sizeSelector = '.Size-' + uuid; - var newSize = 'Size: ' + sizeAttr.displayValue; - $(sizeSelector).text(newSize); - } - - var imageSelector = '.card.product-info.uuid-' + uuid + ' .item-image > img'; - $(imageSelector).attr('src', lineItem.images.small[0].url); - $(imageSelector).attr('alt', lineItem.images.small[0].alt); - $(imageSelector).attr('title', lineItem.images.small[0].title); - } - - var qtySelector = '.quantity[data-uuid="' + uuid + '"]'; - $(qtySelector).val(lineItem.quantity); - $(qtySelector).data('pid', data.newProductId); - - $('.remove-product[data-uuid="' + uuid + '"]').data('pid', data.newProductId); - - var priceSelector = '.line-item-price-' + uuid + ' .sales .value'; - $(priceSelector).text(lineItem.price.sales.formatted); - $(priceSelector).attr('content', lineItem.price.sales.decimalPrice); - - if (lineItem.price.list) { - var listPriceSelector = '.line-item-price-' + uuid + ' .list .value'; - $(listPriceSelector).text(lineItem.price.list.formatted); - $(listPriceSelector).attr('content', lineItem.price.list.decimalPrice); - } + $('.card.product-info.uuid-' + uuid).replaceWith(data.renderedTemplate); } /** @@ -228,13 +202,15 @@ function getModalHtmlElement() { $('#editProductModal').remove(); } var htmlString = '' - + ''
+ + '
'
+ + ''
+ '
'
+ ''
+ '';
$('.shipping-error').append(errorHtml);
+ scrollAnimate($('.shipping-error'));
}
/**
@@ -502,7 +510,7 @@ function shippingFormResponse(defer, data) {
order: data.order,
customer: data.customer
});
-
+ scrollAnimate($('.payment-form'));
defer.resolve(data);
}
}
@@ -516,16 +524,16 @@ function clearShippingForms(order) {
var form = el.form;
if (!form) return;
- $('input[name$=_firstName]', form).val(null);
- $('input[name$=_lastName]', form).val(null);
- $('input[name$=_address1]', form).val(null);
- $('input[name$=_address2]', form).val(null);
- $('input[name$=_city]', form).val(null);
- $('input[name$=_postalCode]', form).val(null);
- $('select[name$=_stateCode],input[name$=_stateCode]', form).val(null);
- $('select[name$=_country]', form).val(null);
+ $('input[name$=_firstName]', form).val('');
+ $('input[name$=_lastName]', form).val('');
+ $('input[name$=_address1]', form).val('');
+ $('input[name$=_address2]', form).val('');
+ $('input[name$=_city]', form).val('');
+ $('input[name$=_postalCode]', form).val('');
+ $('select[name$=_stateCode],input[name$=_stateCode]', form).val('');
+ $('select[name$=_country]', form).val('');
- $('input[name$=_phone]', form).val(null);
+ $('input[name$=_phone]', form).val('');
$('input[name$=_isGift]', form).prop('checked', false);
$('textarea[name$=_giftMessage]', form).val('');
@@ -564,6 +572,7 @@ function createNewShipment(url, shipmentData) {
*/
function selectShippingMethodAjax(url, urlParams, el) {
$.spinner().start();
+ $('body').trigger('checkout:beforeShippingMethodSelected');
$.ajax({
url: url,
type: 'post',
@@ -588,6 +597,7 @@ function selectShippingMethodAjax(url, urlParams, el) {
}
);
}
+ $('body').trigger('checkout:shippingMethodSelected', data);
$.spinner().stop();
})
.fail(function () {
@@ -686,6 +696,8 @@ module.exports = {
},
selectShippingMethod: function () {
+ var baseObj = this;
+
$('.shipping-method-list').change(function () {
var $shippingForm = $(this).parents('form');
var methodID = $(':checked', this).val();
@@ -697,11 +709,18 @@ module.exports = {
urlParams.giftMessage = $shippingForm.find('textarea[name$=_giftMessage]').val();
var url = $(this).data('select-shipping-method-url');
- selectShippingMethodAjax(url, urlParams, $(this));
+
+ if (baseObj.methods && baseObj.methods.selectShippingMethodAjax) {
+ baseObj.methods.selectShippingMethodAjax(url, urlParams, $(this));
+ } else {
+ selectShippingMethodAjax(url, urlParams, $(this));
+ }
});
},
toggleMultiship: function () {
+ var baseObj = this;
+
$('input[name="usingMultiShipping"]').on('change', function () {
var url = $('.multi-shipping-checkbox-block form').attr('action');
var usingMultiShip = this.checked;
@@ -721,7 +740,11 @@ module.exports = {
});
if ($('#checkout-main').data('customer-type') === 'guest') {
- clearShippingForms(response.order);
+ if (baseObj.methods && baseObj.methods.clearShippingForms) {
+ baseObj.methods.clearShippingForms(response.order);
+ } else {
+ clearShippingForms(response.order);
+ }
} else {
response.order.shipping.forEach(function (shipping) {
$('input[value=' + shipping.UUID + ']').each(function (formIndex, el) {
@@ -761,6 +784,8 @@ module.exports = {
},
selectMultiShipping: function () {
+ var baseObj = this;
+
$('body').on('shipping:selectMultiShipping', function (e, data) {
$('.multi-shipping .shipping-address').addClass('d-none');
@@ -768,9 +793,19 @@ module.exports = {
var element = $('.multi-shipping .card[data-shipment-uuid="' + shipping.UUID + '"]');
if (shipping.shippingAddress) {
- viewMultishipAddress($(element));
+ if (baseObj.methods && baseObj.methods.viewMultishipAddress) {
+ baseObj.methods.viewMultishipAddress($(element));
+ } else {
+ viewMultishipAddress($(element));
+ }
} else {
- enterMultishipView($(element));
+ /* eslint-disable no-lonely-if */
+ if (baseObj.methods && baseObj.methods.enterMultishipView) {
+ baseObj.methods.enterMultishipView($(element));
+ } else {
+ enterMultishipView($(element));
+ }
+ /* eslint-enable no-lonely-if */
}
});
});
@@ -784,16 +819,14 @@ module.exports = {
var shipmentUUID = selectedOption[0].value;
var originalUUID = $('input[name=shipmentUUID]', form).val();
var element;
-
Object.keys(attrs).forEach(function (attr) {
element = attr === 'countryCode' ? 'country' : attr;
$('[name$=' + element + ']', form).val(attrs[attr]);
});
-
$('[name$=stateCode]', form).trigger('change');
-
if (shipmentUUID === 'new') {
$(form).attr('data-address-mode', 'new');
+ $(form).find('.shipping-address-block').removeClass('d-none');
} else if (shipmentUUID === originalUUID) {
$(form).attr('data-address-mode', 'shipment');
} else if (shipmentUUID.indexOf('ab_') === 0) {
@@ -805,6 +838,8 @@ module.exports = {
},
selectMultiShipAddress: function () {
+ var baseObj = this;
+
$('.multi-shipping .addressSelector').on('change', function () {
var form = $(this).closest('form');
var selectedOption = $('option:selected', this);
@@ -812,6 +847,7 @@ module.exports = {
var shipmentUUID = selectedOption[0].value;
var originalUUID = $('input[name=shipmentUUID]', form).val();
var pliUUID = $('input[name=productLineItemUUID]', form).val();
+ var createNewShipmentScoped = baseObj.methods && baseObj.methods.createNewShipment ? baseObj.methods.createNewShipment : createNewShipment;
var element;
Object.keys(attrs).forEach(function (attr) {
@@ -826,7 +862,7 @@ module.exports = {
if (shipmentUUID === 'new' && pliUUID) {
var createShipmentUrl = $(this).attr('data-create-shipment-url');
- createNewShipment(createShipmentUrl, { productLineItemUUID: pliUUID })
+ createNewShipmentScoped(createShipmentUrl, { productLineItemUUID: pliUUID })
.done(function (response) {
$.spinner().stop();
if (response.error) {
@@ -855,7 +891,7 @@ module.exports = {
} else if (shipmentUUID.indexOf('ab_') === 0) {
var url = $(form).attr('action');
var serializedData = $(form).serialize();
- createNewShipment(url, serializedData)
+ createNewShipmentScoped(url, serializedData)
.done(function (response) {
$.spinner().stop();
if (response.error) {
@@ -883,7 +919,7 @@ module.exports = {
} else {
var updatePLIShipmentUrl = $(form).attr('action');
var serializedAddress = $(form).serialize();
- createNewShipment(updatePLIShipmentUrl, serializedAddress)
+ createNewShipmentScoped(updatePLIShipmentUrl, serializedAddress)
.done(function (response) {
$.spinner().stop();
if (response.error) {
@@ -911,9 +947,15 @@ module.exports = {
},
updateShippingList: function () {
+ var baseObj = this;
+
$('select[name$="shippingAddress_addressFields_states_stateCode"]')
.on('change', function (e) {
- updateShippingMethodList($(e.currentTarget.form));
+ if (baseObj.methods && baseObj.methods.updateShippingMethodList) {
+ baseObj.methods.updateShippingMethodList($(e.currentTarget.form));
+ } else {
+ updateShippingMethodList($(e.currentTarget.form));
+ }
});
},
@@ -924,22 +966,36 @@ module.exports = {
},
enterMultiShipInfo: function () {
+ var baseObj = this;
+
$('.btn-enter-multi-ship').on('click', function (e) {
e.preventDefault();
- editOrEnterMultiShipInfo($(this), 'new');
+ if (baseObj.methods && baseObj.methods.editOrEnterMultiShipInfo) {
+ baseObj.methods.editOrEnterMultiShipInfo($(this), 'new');
+ } else {
+ editOrEnterMultiShipInfo($(this), 'new');
+ }
});
},
editMultiShipInfo: function () {
+ var baseObj = this;
+
$('.btn-edit-multi-ship').on('click', function (e) {
e.preventDefault();
- editOrEnterMultiShipInfo($(this), 'edit');
+ if (baseObj.methods && baseObj.methods.editOrEnterMultiShipInfo) {
+ baseObj.methods.editOrEnterMultiShipInfo($(this), 'edit');
+ } else {
+ editOrEnterMultiShipInfo($(this), 'edit');
+ }
});
},
saveMultiShipInfo: function () {
+ var baseObj = this;
+
$('.btn-save-multi-ship').on('click', function (e) {
e.preventDefault();
@@ -969,6 +1025,8 @@ module.exports = {
$.each(response.serverErrors, function (index, element) {
createErrorNotification(element);
});
+ } else if (response.redirectUrl) {
+ window.location.href = response.redirectUrl;
}
} else {
// Update UI from response
@@ -979,7 +1037,11 @@ module.exports = {
}
);
- viewMultishipAddress($rootEl);
+ if (baseObj.methods && baseObj.methods.viewMultishipAddress) {
+ baseObj.methods.viewMultishipAddress($rootEl);
+ } else {
+ viewMultishipAddress($rootEl);
+ }
}
if (response.order && response.order.shippable) {
@@ -1001,6 +1063,8 @@ module.exports = {
},
cancelMultiShipAddress: function () {
+ var baseObj = this;
+
$('.btn-cancel-multi-ship-address').on('click', function (e) {
e.preventDefault();
@@ -1014,13 +1078,21 @@ module.exports = {
var originalStateCode = restoreStateObj.shippingAddress.stateCode;
var stateCode = $('[name$=_stateCode]', form).val();
- updateShippingAddressFormValues(restoreStateObj);
+ if (baseObj.methods && baseObj.methods.updateShippingAddressFormValues) {
+ baseObj.methods.updateShippingAddressFormValues(restoreStateObj);
+ } else {
+ updateShippingAddressFormValues(restoreStateObj);
+ }
if (stateCode !== originalStateCode) {
$('[data-action=save]', form).trigger('click');
} else {
$(form).attr('data-address-mode', 'edit');
- editMultiShipAddress($rootEl);
+ if (baseObj.methods && baseObj.methods.editMultiShipAddress) {
+ baseObj.methods.editMultiShipAddress($rootEl);
+ } else {
+ editMultiShipAddress($rootEl);
+ }
}
}
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/checkout/summary.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/checkout/summary.js
index c51c2c4..c3b5a77 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/checkout/summary.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/checkout/summary.js
@@ -11,18 +11,18 @@ function updateTotals(totals) {
$('.grand-total-sum').text(totals.grandTotal);
if (totals.orderLevelDiscountTotal.value > 0) {
- $('.order-discount').show();
+ $('.order-discount').removeClass('hide-order-discount');
$('.order-discount-total').text('- ' + totals.orderLevelDiscountTotal.formatted);
} else {
- $('.order-discount').hide();
+ $('.order-discount').addClass('hide-order-discount');
}
if (totals.shippingLevelDiscountTotal.value > 0) {
- $('.shipping-discount').show();
+ $('.shipping-discount').removeClass('hide-shipping-discount');
$('.shipping-discount-total').text('- ' +
totals.shippingLevelDiscountTotal.formatted);
} else {
- $('.shipping-discount').hide();
+ $('.shipping-discount').addClass('hide-shipping-discount');
}
}
@@ -130,6 +130,14 @@ function updateOrderProductSummaryInformation(order) {
});
$('.product-summary-block').html($productSummary.html());
+
+ // Also update the line item prices, as they might have been altered
+ $('.grand-total-price').text(order.totals.subTotal);
+ order.items.items.forEach(function (item) {
+ if (item.priceTotal && item.priceTotal.renderedPrice) {
+ $('.item-total-' + item.UUID).empty().append(item.priceTotal.renderedPrice);
+ }
+ });
}
module.exports = {
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cleave.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cleave.js
index 3c0692c..98ec696 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cleave.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cleave.js
@@ -1,6 +1,6 @@
'use strict';
-var Cleave = require('cleave.js');
+var Cleave = require('cleave.js').default;
module.exports = {
handleCreditCardNumber: function (cardFieldSelector, cardTypeSelector) {
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/collapsibleItem.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/collapsibleItem.js
index 05ed6c4..cd72108 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/collapsibleItem.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/collapsibleItem.js
@@ -3,10 +3,16 @@ module.exports = function () {
var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
sizes.forEach(function (size) {
- var selector = '.collapsible-' + size + ' .title, .collapsible-' + size + '>.card-header';
+ var selector = '.collapsible-' + size + ' .title';
$('body').on('click', selector, function (e) {
e.preventDefault();
$(this).parents('.collapsible-' + size).toggleClass('active');
+
+ if ($(this).parents('.collapsible-' + size).hasClass('active')) {
+ $(this).attr('aria-expanded', true);
+ } else {
+ $(this).attr('aria-expanded', false);
+ }
});
});
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/consentTracking.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/consentTracking.js
index 0e58092..dcc2f7a 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/consentTracking.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/consentTracking.js
@@ -1,22 +1,27 @@
'use strict';
+var focusHelper = require('../components/focus');
+
/**
* Renders a modal window that will track the users consenting to accepting site tracking policy
*/
function showConsentModal() {
- if (!$('.tracking-consent').data('caonline')) {
+ var trackingConsentData = $('.tracking-consent');
+ if (!trackingConsentData.data('caonline')) {
return;
}
- var urlContent = $('.tracking-consent').data('url');
- var urlAccept = $('.tracking-consent').data('accept');
- var urlReject = $('.tracking-consent').data('reject');
- var textYes = $('.tracking-consent').data('accepttext');
- var textNo = $('.tracking-consent').data('rejecttext');
- var textHeader = $('.tracking-consent').data('heading');
+ var urlContent = trackingConsentData.data('url');
+ var urlAccept = trackingConsentData.data('accept');
+ var urlReject = trackingConsentData.data('reject');
+ var textYes = trackingConsentData.data('accepttext');
+ var textNo = trackingConsentData.data('rejecttext');
+ var textHeader = trackingConsentData.data('heading');
+ var tokenName = trackingConsentData.data('tokenname');
+ var token = trackingConsentData.data('token');
var htmlString = ''
- + '
'
+ + '
'
+ '
'
+ ''
+ '
'
@@ -26,10 +31,10 @@ function showConsentModal() {
+ ''
+ '
'
+ ''
@@ -46,6 +51,7 @@ function showConsentModal() {
dataType: 'html',
success: function (response) {
$('.modal-body').html(response);
+ $('#consent-tracking').modal('show');
},
error: function () {
$('#consent-tracking').remove();
@@ -55,19 +61,25 @@ function showConsentModal() {
$('#consent-tracking .button-wrapper button').click(function (e) {
e.preventDefault();
var url = $(this).data('url');
+ var data = {};
+ data[tokenName] = token;
$.ajax({
url: url,
- type: 'get',
+ type: 'post',
+ data: data,
dataType: 'json',
- success: function () {
- $('#consent-tracking .modal-body').remove();
- $('#consent-tracking').remove();
- $.spinner().stop();
+ success: function (response) {
+ // Only hide modal if the operation is successful - don't want to give a false impression
+ if (response.success) {
+ $('#consent-tracking').remove();
+ $.spinner().stop();
+ }
},
- error: function () {
- $('#consent-tracking .modal-body').remove();
- $('#consent-tracking').remove();
- $.spinner().stop();
+ error: function (err) {
+ // Expected error response is for CSRF failure, which will include a redirect to CSRF-Fail
+ if (err.responseJSON.redirectUrl) {
+ window.location.href = err.responseJSON.redirectUrl;
+ }
}
});
});
@@ -83,4 +95,24 @@ module.exports = function () {
showConsentModal();
});
}
+
+ $('body').on('shown.bs.modal', '#consent-tracking', function () {
+ $('#consent-tracking').siblings().attr('aria-hidden', 'true');
+ $('#consent-tracking .affirm').focus();
+ });
+
+ $('body').on('hidden.bs.modal', '#consent-tracking', function () {
+ $('#consent-tracking').siblings().attr('aria-hidden', 'false');
+ });
+
+ $('body').on('keydown', '#consent-tracking', function (e) {
+ var focusParams = {
+ event: e,
+ containerSelector: '#consent-tracking',
+ firstElementSelector: '.affirm',
+ lastElementSelector: '.decline',
+ nextToLastElementSelector: '.affirm'
+ };
+ focusHelper.setTabNextFocus(focusParams);
+ });
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cookie.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cookie.js
index facc6f1..fee3202 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cookie.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/cookie.js
@@ -38,7 +38,6 @@ module.exports = function () {
} else {
// Clear the previousSessionID from localStorage
// when user session is changed or expired
- previousSessionID = '';
window.localStorage.removeItem('previousSid');
}
}
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/focus.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/focus.js
new file mode 100644
index 0000000..ca6e4a9
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/focus.js
@@ -0,0 +1,35 @@
+'use strict';
+
+module.exports = {
+ setTabNextFocus: function (focusParams) {
+ var KEYCODE_TAB = 9;
+ var isTabPressed = (focusParams.event.key === 'Tab' || focusParams.event.keyCode === KEYCODE_TAB);
+
+ if (!isTabPressed) {
+ return;
+ }
+
+ var firstFocusableEl = $(focusParams.containerSelector + ' ' + focusParams.firstElementSelector);
+ var lastFocusableEl = $(focusParams.containerSelector + ' ' + focusParams.lastElementSelector);
+
+ if ($(focusParams.containerSelector + ' ' + focusParams.lastElementSelector).is(':disabled')) {
+ lastFocusableEl = $(focusParams.containerSelector + ' ' + focusParams.nextToLastElementSelector);
+ if ($('.product-quickview.product-set').length > 0) {
+ var linkElements = $(focusParams.containerSelector + ' a#fa-link.share-icons');
+ lastFocusableEl = linkElements[linkElements.length - 1];
+ }
+ }
+
+ if (focusParams.event.shiftKey) /* shift + tab */ {
+ if ($(':focus').is(firstFocusableEl)) {
+ lastFocusableEl.focus();
+ focusParams.event.preventDefault();
+ }
+ } else /* tab */ {
+ if ($(':focus').is(lastFocusableEl)) { // eslint-disable-line
+ firstFocusableEl.focus();
+ focusParams.event.preventDefault();
+ }
+ }
+ }
+};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/footer.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/footer.js
index 5a506fe..3621498 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/footer.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/footer.js
@@ -1,9 +1,60 @@
'use strict';
+var scrollAnimate = require('./scrollAnimate');
+
+/**
+ * appends params to a url
+ * @param {string} data - data returned from the server's ajax call
+ * @param {Object} button - button that was clicked for email sign-up
+ */
+function displayMessage(data, button) {
+ $.spinner().stop();
+ var status;
+ if (data.success) {
+ status = 'alert-success';
+ } else {
+ status = 'alert-danger';
+ }
+
+ if ($('.email-signup-message').length === 0) {
+ $('body').append(
+ ''
+ );
+ }
+ $('.email-signup-message')
+ .append('
' + data.msg + '
');
+
+ setTimeout(function () {
+ $('.email-signup-message').remove();
+ button.removeAttr('disabled');
+ }, 3000);
+}
+
module.exports = function () {
$('.back-to-top').click(function () {
- $('html, body').animate({
- scrollTop: 0
- }, 500);
+ scrollAnimate();
+ });
+
+ $('.subscribe-email').on('click', function (e) {
+ e.preventDefault();
+ var url = $(this).data('href');
+ var button = $(this);
+ var emailId = $('input[name=hpEmailSignUp]').val();
+ $.spinner().start();
+ $(this).attr('disabled', true);
+ $.ajax({
+ url: url,
+ type: 'post',
+ dataType: 'json',
+ data: {
+ emailId: emailId
+ },
+ success: function (data) {
+ displayMessage(data, button);
+ },
+ error: function (err) {
+ displayMessage(err, button);
+ }
+ });
});
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/formValidation.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/formValidation.js
index 388b0e6..88e5794 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/formValidation.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/formValidation.js
@@ -37,7 +37,7 @@ module.exports = function (formElement, payload) {
? $(formElement)
: $(formElement).parents('form');
- form.prepend(''
+ form.prepend('' +
+ var toInsert = '
'
+ payload.error.join('
') + '
');
}
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/menu.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/menu.js
index 1b9c280..417d935 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/menu.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/menu.js
@@ -6,7 +6,9 @@ var clearSelection = function (element) {
$(element).closest('.dropdown').children('.dropdown-menu').children('.top-category')
.detach();
$(element).closest('.dropdown.show').children('.nav-link').attr('aria-expanded', 'false');
+ $(element).closest('.dropdown.show').children('.dropdown-menu').attr('aria-hidden', 'true');
$(element).closest('.dropdown.show').removeClass('show');
+ $('div.menu-group > ul.nav.navbar-nav > li.nav-item > a').attr('aria-hidden', 'false');
$(element).closest('li').detach();
};
@@ -15,10 +17,16 @@ module.exports = function () {
return $(element).parents('.menu-toggleable-left').css('position') !== 'fixed';
};
+ var headerBannerStatus = window.sessionStorage.getItem('hide_header_banner');
$('.header-banner .close').on('click', function () {
- $('.header-banner').addClass('hide');
+ $('.header-banner').addClass('d-none');
+ window.sessionStorage.setItem('hide_header_banner', '1');
});
+ if (!headerBannerStatus || headerBannerStatus < 0) {
+ $('.header-banner').removeClass('d-none');
+ }
+
keyboardAccessibility('.main-menu .nav-link, .main-menu .dropdown-link',
{
40: function (menuItem) { // down
@@ -27,14 +35,18 @@ module.exports = function () {
.children('.dropdown-menu')
.removeClass('show');
menuItem.addClass('show').children('.dropdown-menu').addClass('show');
- $(this).attr('aria-expanded', 'true');
menuItem.find('ul > li > a')
.first()
.focus();
} else {
menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');
- $(this).attr('aria-expanded', 'false');
- menuItem.next().children().first().focus();
+ if (!(menuItem.next().length > 0)) { // if this is the last menuItem
+ menuItem.parent().parent().find('li > a') // set focus to the first menuitem
+ .first()
+ .focus();
+ } else {
+ menuItem.next().children().first().focus();
+ }
}
},
39: function (menuItem) { // right
@@ -53,12 +65,12 @@ module.exports = function () {
38: function (menuItem) { // up
if (menuItem.hasClass('nav-item')) { // top level
menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');
- $(this).attr('aria-expanded', 'false');
- } else if (menuItem.prev().length === 0) {
+ } else if (menuItem.prev().length === 0) { // first menuItem
menuItem.parent().parent().removeClass('show')
.children('.nav-link')
.attr('aria-expanded', 'false');
- menuItem.parent().parent().children().first()
+ menuItem.parent().children().last().children() // set the focus to the last menuItem
+ .first()
.focus();
} else {
menuItem.prev().children().first().focus();
@@ -88,10 +100,10 @@ module.exports = function () {
parentMenu.children().first().focus();
}
},
- function () {
- return $(this).parent();
- }
- );
+ function () {
+ return $(this).parent();
+ }
+ );
$('.dropdown:not(.disabled) [data-toggle="dropdown"]')
.on('click', function (e) {
@@ -108,10 +120,13 @@ module.exports = function () {
closeMenu.append($('.close-menu').first().clone());
$(this).parent().children('.dropdown-menu')
.prepend(li)
- .prepend(closeMenu);
+ .prepend(closeMenu)
+ .attr('aria-hidden', 'false');
// copy navigation menu into view
$(this).parent().addClass('show');
$(this).attr('aria-expanded', 'true');
+ $(link).focus();
+ $('div.menu-group > ul.nav.navbar-nav > li.nav-item > a').attr('aria-hidden', 'true');
e.preventDefault();
}
})
@@ -149,6 +164,12 @@ module.exports = function () {
e.preventDefault();
$('.menu-toggleable-left').removeClass('in');
$('.modal-background').hide();
+
+ $('.navbar-toggler').focus();
+
+ $('.main-menu').attr('aria-hidden', 'true');
+ $('.main-menu').siblings().attr('aria-hidden', 'false');
+ $('header').siblings().attr('aria-hidden', 'false');
});
$('.navbar-nav').on('click', '.back', function (e) {
@@ -162,6 +183,10 @@ module.exports = function () {
$('.navbar-nav').find('.nav-menu').detach();
$('.navbar-nav').find('.show').removeClass('show');
$('.menu-toggleable-left').removeClass('in');
+
+ $('.main-menu').siblings().attr('aria-hidden', 'false');
+ $('header').siblings().attr('aria-hidden', 'false');
+
$('.modal-background').hide();
});
@@ -169,13 +194,20 @@ module.exports = function () {
e.preventDefault();
$('.main-menu').toggleClass('in');
$('.modal-background').show();
+
+ $('.main-menu').removeClass('d-none');
+ $('.main-menu').attr('aria-hidden', 'false');
+ $('.main-menu').siblings().attr('aria-hidden', 'true');
+ $('header').siblings().attr('aria-hidden', 'true');
+
+ $('.main-menu .nav.navbar-nav .nav-link').first().focus();
});
keyboardAccessibility('.navbar-header .user',
{
40: function ($popover) { // down
if ($popover.children('a').first().is(':focus')) {
- $popover.children('a').first().next().focus();
+ $popover.next().children().first().focus();
} else {
$popover.children('a').first().focus();
}
@@ -188,19 +220,17 @@ module.exports = function () {
$popover.children('a').first().focus();
}
},
- 27: function ($popover) { // escape
- $(this).focus();
- $popover.removeClass('show');
+ 27: function () { // escape
+ $('.navbar-header .user .popover').removeClass('show');
+ $('.user').attr('aria-expanded', 'false');
},
- 9: function ($popover) { // tab
- $popover.removeClass('show');
+ 9: function () { // tab
+ $('.navbar-header .user .popover').removeClass('show');
+ $('.user').attr('aria-expanded', 'false');
}
},
function () {
- var $popover = $('.user .popover');
- if (!($popover.hasClass('show'))) {
- $popover.addClass('show');
- }
+ var $popover = $('.user .popover li.nav-item');
return $popover;
}
);
@@ -208,10 +238,15 @@ module.exports = function () {
$('.navbar-header .user').on('mouseenter focusin', function () {
if ($('.navbar-header .user .popover').length > 0) {
$('.navbar-header .user .popover').addClass('show');
+ $('.user').attr('aria-expanded', 'true');
}
});
$('.navbar-header .user').on('mouseleave', function () {
$('.navbar-header .user .popover').removeClass('show');
+ $('.user').attr('aria-expanded', 'false');
+ });
+ $('body').on('click', '#myaccount', function () {
+ event.preventDefault();
});
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/miniCart.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/miniCart.js
index 35a5099..3d52cb0 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/miniCart.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/miniCart.js
@@ -2,12 +2,18 @@
var cart = require('../cart/cart');
+var updateMiniCart = true;
+
module.exports = function () {
cart();
$('.minicart').on('count:update', function (event, count) {
if (count && $.isNumeric(count.quantityTotal)) {
$('.minicart .minicart-quantity').text(count.quantityTotal);
+ $('.minicart .minicart-link').attr({
+ 'aria-label': count.minicartCountOfItems,
+ title: count.minicartCountOfItems
+ });
}
});
@@ -19,18 +25,23 @@ module.exports = function () {
var count = parseInt($('.minicart .minicart-quantity').text(), 10);
if (count !== 0 && $('.minicart .popover.show').length === 0) {
+ if (!updateMiniCart) {
+ $('.minicart .popover').addClass('show');
+ return;
+ }
+
$('.minicart .popover').addClass('show');
$('.minicart .popover').spinner().start();
$.get(url, function (data) {
$('.minicart .popover').empty();
$('.minicart .popover').append(data);
+ updateMiniCart = false;
$.spinner().stop();
});
}
});
$('body').on('touchstart click', function (e) {
if ($('.minicart').has(e.target).length <= 0) {
- $('.minicart .popover').empty();
$('.minicart .popover').removeClass('show');
}
});
@@ -41,7 +52,6 @@ module.exports = function () {
event.stopPropagation();
return;
}
- $('.minicart .popover').empty();
$('.minicart .popover').removeClass('show');
});
$('body').on('change', '.minicart .quantity', function () {
@@ -49,4 +59,10 @@ module.exports = function () {
location.reload();
}
});
+ $('body').on('product:afterAddToCart', function () {
+ updateMiniCart = true;
+ });
+ $('body').on('cart:update', function () {
+ updateMiniCart = true;
+ });
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/scrollAnimate.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/scrollAnimate.js
new file mode 100644
index 0000000..1d85280
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/scrollAnimate.js
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function (element) {
+ var position = element && element.length ? element.offset().top : 0;
+ $('html, body').animate({
+ scrollTop: position
+ }, 500);
+ if (!element) {
+ $('.logo-home').focus();
+ }
+};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/search.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/search.js
index 29f255b..21f16f3 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/search.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/search.js
@@ -2,8 +2,11 @@
var debounce = require('lodash/debounce');
var endpoint = $('.suggestions-wrapper').data('url');
-var minChars = 3;
-
+var minChars = 1;
+var UP_KEY = 38;
+var DOWN_KEY = 40;
+var DIRECTION_DOWN = 1;
+var DIRECTION_UP = -1;
/**
* Retrieves Suggestions element relative to scope
@@ -31,6 +34,7 @@ function isMobileSearch(scope) {
*/
function clearModals() {
$('body').removeClass('modal-open');
+ $('header').siblings().attr('aria-hidden', 'false');
$('.suggestions').removeClass('modal');
}
@@ -42,6 +46,7 @@ function clearModals() {
function applyModals(scope) {
if (isMobileSearch(scope)) {
$('body').addClass('modal-open');
+ $('header').siblings().attr('aria-hidden', 'true');
getSuggestionsWrapper(scope).find('.suggestions').addClass('modal');
}
}
@@ -62,14 +67,14 @@ function tearDownSuggestions() {
* @param {string} action - Action to toggle to
*/
function toggleSuggestionsIcon(action) {
- var mobileSearchIcon = '.search-mobile span.';
+ var mobileSearchIcon = '.search-mobile button.';
var iconSearch = 'fa-search';
var iconSearchClose = 'fa-close';
if (action === 'close') {
- $(mobileSearchIcon + iconSearch).removeClass(iconSearch).addClass(iconSearchClose);
+ $(mobileSearchIcon + iconSearch).removeClass(iconSearch).addClass(iconSearchClose).attr('type', 'button');
} else {
- $(mobileSearchIcon + iconSearchClose).removeClass(iconSearchClose).addClass(iconSearch);
+ $(mobileSearchIcon + iconSearchClose).removeClass(iconSearchClose).addClass(iconSearch).attr('type', 'submit');
}
}
@@ -125,14 +130,23 @@ function processResponse(response) {
$.spinner().stop();
- if (!(typeof (response) === 'object')) {
+ if (typeof (response) !== 'object') {
$suggestionsWrapper.append(response).show();
+ $(this).siblings('.reset-button').addClass('d-sm-block');
positionSuggestions(this);
if (isMobileSearch(this)) {
toggleSuggestionsIcon('close');
applyModals(this);
}
+
+ // Trigger screen reader by setting aria-describedby with the new suggestion message.
+ var suggestionsList = $('.suggestions .item');
+ if ($(suggestionsList).length) {
+ $('input.search-field').attr('aria-describedby', 'search-result-count');
+ } else {
+ $('input.search-field').removeAttr('aria-describedby');
+ }
} else {
$suggestionsWrapper.hide();
}
@@ -151,16 +165,67 @@ function getSuggestions(scope) {
url: endpoint + encodeURIComponent($(scope).val()),
method: 'GET',
success: processResponse,
- error: function () { $.spinner().stop(); }
+ error: function () {
+ $.spinner().stop();
+ }
});
} else {
toggleSuggestionsIcon('search');
+ $(scope).siblings('.reset-button').removeClass('d-sm-block');
clearModals();
getSuggestionsWrapper(scope).empty();
}
}
+/**
+ * Handle Search Suggestion Keyboard Arrow Keys
+ *
+ * @param {Integer} direction takes positive or negative number constant, DIRECTION_UP (-1) or DIRECTION_DOWN (+1)
+ */
+function handleArrow(direction) {
+ // get all li elements in the suggestions list
+ var suggestionsList = $('.suggestions .item');
+ if (suggestionsList.filter('.selected').length === 0) {
+ suggestionsList.first().addClass('selected');
+ $('input.search-field').each(function () {
+ $(this).attr('aria-activedescendant', suggestionsList.first()[0].id);
+ });
+ } else {
+ suggestionsList.each(function (index) {
+ var idx = index + direction;
+ if ($(this).hasClass('selected')) {
+ $(this).removeClass('selected');
+ $(this).removeAttr('aria-selected');
+ if (suggestionsList.eq(idx).length !== 0) {
+ suggestionsList.eq(idx).addClass('selected');
+ suggestionsList.eq(idx).attr('aria-selected', true);
+ $(this).removeProp('aria-selected');
+ $('input.search-field').each(function () {
+ $(this).attr('aria-activedescendant', suggestionsList.eq(idx)[0].id);
+ });
+ } else {
+ suggestionsList.first().addClass('selected');
+ suggestionsList.first().attr('aria-selected', true);
+ $('input.search-field').each(function () {
+ $(this).attr('aria-activedescendant', suggestionsList.first()[0].id);
+ });
+ }
+ return false;
+ }
+ return true;
+ });
+ }
+}
+
module.exports = function () {
+ $('form[name="simpleSearch"]').submit(function (e) {
+ var suggestionsList = $('.suggestions .item');
+ if (suggestionsList.filter('.selected').length !== 0) {
+ e.preventDefault();
+ suggestionsList.filter('.selected').find('a')[0].click();
+ }
+ });
+
$('input.search-field').each(function () {
/**
* Use debounce to avoid making an Ajax call on every single key press by waiting a few
@@ -168,9 +233,20 @@ module.exports = function () {
* browser blink with every key press.
*/
var debounceSuggestions = debounce(getSuggestions, 300);
-
- $(this).on('keyup click', function (e) {
- debounceSuggestions(this, e);
+ $(this).on('keyup focus', function (e) {
+ // Capture Down/Up Arrow Key Events
+ switch (e.which) {
+ case DOWN_KEY:
+ handleArrow(DIRECTION_DOWN);
+ e.preventDefault(); // prevent moving the cursor
+ break;
+ case UP_KEY:
+ handleArrow(DIRECTION_UP);
+ e.preventDefault(); // prevent moving the cursor
+ break;
+ default:
+ debounceSuggestions(this, e);
+ }
});
});
@@ -180,9 +256,14 @@ module.exports = function () {
}
});
- $('body').on('click touchend', '.search-mobile span.fa-close', function () {
+ $('body').on('click touchend', '.search-mobile button.fa-close', function (e) {
+ e.preventDefault();
$('.suggestions').hide();
toggleSuggestionsIcon('search');
tearDownSuggestions();
});
+
+ $('.site-search .reset-button').on('click', function () {
+ $(this).removeClass('d-sm-block');
+ });
};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/toolTip.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/toolTip.js
new file mode 100644
index 0000000..8aa9257
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/components/toolTip.js
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function () {
+ $('.info-icon').on('mouseenter focusin', function () {
+ $(this).find('.tooltip').removeClass('d-none');
+ });
+
+ $('.info-icon').on('mouseleave focusout', function () {
+ $(this).find('.tooltip').addClass('d-none');
+ });
+};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/contactUs.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/contactUs.js
new file mode 100644
index 0000000..ec7d373
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/contactUs.js
@@ -0,0 +1,7 @@
+'use strict';
+
+var processInclude = require('./util');
+
+$(document).ready(function () {
+ processInclude(require('./contactUs/contactUs'));
+});
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/contactUs/contactUs.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/contactUs/contactUs.js
new file mode 100644
index 0000000..1df4ee3
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/contactUs/contactUs.js
@@ -0,0 +1,58 @@
+'use strict';
+
+/**
+ * Display the returned message.
+ * @param {string} data - data returned from the server's ajax call
+ * @param {Object} button - button that was clicked for contact us sign-up
+ */
+function displayMessage(data, button) {
+ $.spinner().stop();
+ var status;
+ if (data.success) {
+ status = 'alert-success';
+ } else {
+ status = 'alert-danger';
+ }
+
+ if ($('.contact-us-signup-message').length === 0) {
+ $('body').append(
+ ''
+ );
+ }
+ $('.contact-us-signup-message')
+ .append('') + '
' + data.msg + '
');
+
+ setTimeout(function () {
+ $('.contact-us-signup-message').remove();
+ button.removeAttr('disabled');
+ }, 3000);
+}
+
+module.exports = {
+ subscribeContact: function () {
+ $('form.contact-us').submit(function (e) {
+ e.preventDefault();
+ var form = $(this);
+ var button = $('.subscribe-contact-us');
+ var url = form.attr('action');
+
+ $.spinner().start();
+ button.attr('disabled', true);
+ $.ajax({
+ url: url,
+ type: 'post',
+ dataType: 'json',
+ data: form.serialize(),
+ success: function (data) {
+ displayMessage(data, button);
+ if (data.success) {
+ $('.contact-us').trigger('reset');
+ }
+ },
+ error: function (err) {
+ displayMessage(err, button);
+ }
+ });
+ });
+ }
+};
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/einsteinCarousel.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/einsteinCarousel.js
new file mode 100644
index 0000000..33900f5
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/einsteinCarousel.js
@@ -0,0 +1,170 @@
+'use strict';
+
+/**
+ * Validates and Return the cquotient namespace provided by the commerce cloud platform
+ * @returns {Object} - einsteinUtils or null
+ */
+function getEinsteinUtils() {
+ var einsteinUtils = window.CQuotient;
+ if (einsteinUtils && (typeof einsteinUtils.getCQUserId === 'function') && (typeof einsteinUtils.getCQCookieId === 'function')) {
+ return einsteinUtils;
+ }
+ return null;
+}
+
+/**
+ * Renders the einstein response into a given dom element
+ * @param {jQuery} $parentElement parent element where recommendations will show.
+ */
+function showControls($parentElement) {
+ var $liTemplate = $parentElement.find('.hidden-indicators-template li');
+ var $carouselItems = $parentElement.find('.carousel-item');
+
+ $carouselItems.each(function (index) {
+ var $newIndiator = $liTemplate.clone();
+ if (index === 0) {
+ $parentElement.find('.pd-carousel-indicators').append($newIndiator);
+ } else {
+ $newIndiator.removeClass('active');
+ $parentElement.find('.pd-carousel-indicators').append($newIndiator);
+ }
+ $parentElement.find('.pd-carousel-indicators li').last().attr('data-position', index);
+ $parentElement.removeClass('hide-indicators');
+ });
+}
+
+/**
+ * fills in the carousel with product tile html objects
+ * @param {string} einsteinResponse string html for product tiles
+ * @param {jQuery} $parentElement parent element where recommendations will show.
+ */
+function fillDomElement(einsteinResponse, $parentElement) {
+ var recommender = $parentElement.data('recommender');
+ var recommendedProducts = einsteinResponse[recommender].recs;
+ if (recommendedProducts && recommendedProducts.length > 0) {
+ var template = $parentElement.data('template');
+ var swatches = $parentElement.data('swatches');
+ var displayRatings = $parentElement.data('displayratings');
+ var components = [];
+ components = recommendedProducts.map(function (recommendedProduct) {
+ var tiledefinition = {};
+ tiledefinition.classxs = $parentElement.data('bsxs');
+ tiledefinition.classsm = $parentElement.data('bssm');
+ tiledefinition.classmd = $parentElement.data('bsmd');
+ tiledefinition.template = template;
+ tiledefinition.swatches = swatches;
+ tiledefinition.displayratings = displayRatings;
+ tiledefinition.model = {
+ type: 'product',
+ id: recommendedProduct.id
+ };
+ return tiledefinition;
+ });
+
+ var url = new URL($parentElement.data('product-load-url'));
+ url.searchParams.append('components', JSON.stringify(components));
+ url.searchParams.append('limit', $parentElement.data('limit'));
+ url.searchParams.append('recommender', recommender);
+ $.ajax({
+ url: url.href,
+ type: 'get',
+ dataType: 'html',
+ success: function (html) {
+ $parentElement.find('.carousel-inner').html(html);
+ showControls($parentElement);
+ $('body').trigger('carousel:setup', {});
+ },
+ error: function () {
+ $parentElement.spinner().stop();
+ }
+ });
+ }
+}
+
+ /**
+ * Processes a recommendation tile, with an already initialized category specific anchors array
+ * @param {jQuery} $parentElement parent element where recommendations will show.
+ * @param {Object} einsteinUtils cquotient object
+ * @param {Array} anchorsArray array of objects representing anchors
+ */
+function processRecommendationsTile($parentElement, einsteinUtils, anchorsArray) {
+ var recommender = $parentElement.data('recommender');
+
+ var params = {
+ userId: einsteinUtils.getCQUserId(),
+ cookieId: einsteinUtils.getCQCookieId(),
+ ccver: '1.01'
+ };
+
+ if (anchorsArray) {
+ params.anchors = anchorsArray;
+ }
+
+ /**
+ * Processes a recommendation responses
+ * @param {Object} einsteinResponse cquotient object
+ */
+ function recommendationsReceived(einsteinResponse) {
+ fillDomElement(einsteinResponse, $parentElement);
+ $parentElement.spinner().stop();
+ }
+
+ if (einsteinUtils.getRecs) {
+ einsteinUtils.getRecs(einsteinUtils.clientId, recommender, params, recommendationsReceived);
+ } else {
+ einsteinUtils.widgets = einsteinUtils.widgets || []; // eslint-disable-line no-param-reassign
+ einsteinUtils.widgets.push({
+ recommenderName: recommender,
+ parameters: params,
+ callback: recommendationsReceived
+ });
+ }
+}
+
+/**
+ * Processes a recommendation tile, with an already initialized product specific anchors array
+ * @param {jQuery} $parentElement parent element where recommendations will show.
+ * @returns {Array} - containing an anchor object
+ */
+function createProductAnchor($parentElement) {
+ return [{
+ id: $parentElement.data('primaryProductId'),
+ sku: $parentElement.data('secondaryProductId'),
+ type: $parentElement.data('alternativeGroupType'),
+ alt_id: $parentElement.data('alternativeGroupId')
+ }];
+}
+
+/**
+ * Rerieves data attributes from parent element and converts to gretel compatible recommenders array
+ * @param {jQuery} $parentElement parent element where recommendations will show.
+ * @returns {Array} - containing an anchor object
+ */
+function createCategoryAnchor($parentElement) {
+ return [{ id: $parentElement.data('categoryId') }];
+}
+
+/**
+ * Gets all placeholder elements, which hold einstein recommendations queries the details from the
+ * einstein engine and feeds them back to the dom element
+ */
+function loadRecommendations() {
+ var einsteinUtils = getEinsteinUtils();
+ if (einsteinUtils) {
+ var $recommendationTiles = $('.einstein-carousel');
+ $recommendationTiles.each(function () {
+ var $parentElement = $(this);
+ $parentElement.spinner().start();
+ if ($(this).closest('.experience-einstein-einsteinCarouselProduct').length) {
+ return processRecommendationsTile($parentElement, einsteinUtils, createProductAnchor($parentElement));
+ } else if ($(this).closest('.experience-einstein-einsteinCarouselCategory').length) {
+ return processRecommendationsTile($parentElement, einsteinUtils, createCategoryAnchor($parentElement));
+ }
+ return processRecommendationsTile($parentElement, einsteinUtils);
+ });
+ }
+}
+
+$(document).ready(function () {
+ loadRecommendations();
+});
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/login/login.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/login/login.js
index 67f32f1..ffb12a1 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/login/login.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/login/login.js
@@ -54,8 +54,10 @@ module.exports = {
success: function (data) {
form.spinner().stop();
if (!data.success) {
+ $('form.registration').trigger('login:register:error', data);
formValidation(form, data);
} else {
+ $('form.registration').trigger('login:register:success', data);
location.href = data.redirectUrl;
}
},
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/main.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/main.js
index 5099e7a..96841ec 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/main.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/main.js
@@ -11,6 +11,7 @@ $(document).ready(function () {
processInclude(require('./components/search'));
processInclude(require('./components/clientSideValidation'));
processInclude(require('./components/countrySelector'));
+ processInclude(require('./components/toolTip'));
});
require('./thirdParty/bootstrap');
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/mobileGridLookBook.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/mobileGridLookBook.js
new file mode 100644
index 0000000..e00c64d
--- /dev/null
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/mobileGridLookBook.js
@@ -0,0 +1,13 @@
+'use strict';
+
+$(document).ready(function () {
+ $('body').on('click', '.show-more-button', function (e) {
+ e.preventDefault();
+
+ var $set2Element = $(this).closest('.look-book-layout').find('.look-book-set2');
+ $set2Element.removeClass('hide-set');
+
+ var $showMoreElement = $(this).closest('.look-book-layout').find('.show-more');
+ $showMoreElement.addClass('d-none');
+ });
+});
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/paymentInstruments/paymentInstruments.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/paymentInstruments/paymentInstruments.js
index 90b4291..53fd707 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/paymentInstruments/paymentInstruments.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/paymentInstruments/paymentInstruments.js
@@ -22,10 +22,10 @@ module.exports = {
success: function (data) {
$('#uuid-' + data.UUID).remove();
if (data.message) {
- var toInsert = '' +
+ var toInsert = '' +
data.message +
- '
';
- $('.paymentInstruments').after(toInsert);
+ '';
+ $('.paymentInstruments').empty().append(toInsert);
}
},
error: function (err) {
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js
index d95747d..a47723f 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js
@@ -1,4 +1,5 @@
'use strict';
+var focusHelper = require('../components/focus');
/**
* Retrieves the relevant pid value
@@ -25,9 +26,21 @@ function getPidValue($el) {
* @return {jquery} - quantity selector DOM container
*/
function getQuantitySelector($el) {
- return $el && $('.set-items').length
- ? $($el).closest('.product-detail').find('.quantity-select')
- : $('.quantity-select');
+ var quantitySelected;
+ if ($el && $('.set-items').length) {
+ quantitySelected = $($el).closest('.product-detail').find('.quantity-select');
+ } else if ($el && $('.product-bundle').length) {
+ var quantitySelectedModal = $($el).closest('.modal-footer').find('.quantity-select');
+ var quantitySelectedPDP = $($el).closest('.bundle-footer').find('.quantity-select');
+ if (quantitySelectedModal.val() === undefined) {
+ quantitySelected = quantitySelectedPDP;
+ } else {
+ quantitySelected = quantitySelectedModal;
+ }
+ } else {
+ quantitySelected = $('.quantity-select');
+ }
+ return quantitySelected;
}
/**
@@ -51,23 +64,26 @@ function getQuantitySelected($el) {
* selected. If there is no variant that corresponds to a specific combination of attribute
* values, an attribute may be disabled in the Product Detail Page
* @param {jQuery} $productContainer - DOM container for a given product
+ * @param {Object} msgs - object containing resource messages
*/
-function processSwatchValues(attr, $productContainer) {
+function processSwatchValues(attr, $productContainer, msgs) {
attr.values.forEach(function (attrValue) {
var $attrValue = $productContainer.find('[data-attr="' + attr.id + '"] [data-attr-value="' +
attrValue.value + '"]');
- var $swatchAnchor = $attrValue.parent();
+ var $swatchButton = $attrValue.parent();
if (attrValue.selected) {
$attrValue.addClass('selected');
+ $attrValue.siblings('.selected-assistive-text').text(msgs.assistiveSelectedText);
} else {
$attrValue.removeClass('selected');
+ $attrValue.siblings('.selected-assistive-text').empty();
}
if (attrValue.url) {
- $swatchAnchor.attr('href', attrValue.url);
+ $swatchButton.attr('data-url', attrValue.url);
} else {
- $swatchAnchor.removeAttr('href');
+ $swatchButton.removeAttr('data-url');
}
// Disable if not selectable
@@ -114,14 +130,15 @@ function processNonSwatchValues(attr, $productContainer) {
* @param {Object} attrs - Attribute
* @param {string} attr.id - Attribute ID
* @param {jQuery} $productContainer - DOM element for a given product
+ * @param {Object} msgs - object containing resource messages
*/
-function updateAttrs(attrs, $productContainer) {
+function updateAttrs(attrs, $productContainer, msgs) {
// Currently, the only attribute type that has image swatches is Color.
var attrsWithSwatches = ['color'];
attrs.forEach(function (attr) {
if (attrsWithSwatches.indexOf(attr.id) > -1) {
- processSwatchValues(attr, $productContainer);
+ processSwatchValues(attr, $productContainer, msgs);
} else {
processNonSwatchValues(attr, $productContainer);
}
@@ -139,10 +156,10 @@ function updateAvailability(response, $productContainer) {
var availabilityValue = '';
var availabilityMessages = response.product.availability.messages;
if (!response.product.readyToOrder) {
- availabilityValue = '' + response.resources.info_selectforstock + '';
+ availabilityValue = '' + response.resources.info_selectforstock + ' ';
} else {
availabilityMessages.forEach(function (message) {
- availabilityValue += '' + message + '';
+ availabilityValue += '' + message + ' ';
});
}
@@ -154,27 +171,6 @@ function updateAvailability(response, $productContainer) {
});
}
-/**
- * Generates html for promotions section
- *
- * @param {array} promotions - list of promotions
- * @return {string} - Compiled HTML
- */
-function getPromotionsHtml(promotions) {
- if (!promotions) {
- return '';
- }
-
- var html = '';
-
- promotions.forEach(function (promotion) {
- html += '' + promotion.calloutMsg +
- '';
- });
-
- return html;
-}
-
/**
* Generates html for product attributes section
*
@@ -219,18 +215,35 @@ function getAttributesHtml(attributes) {
/**
* Updates DOM using post-option selection Ajax response
*
- * @param {OptionSelectionResponse} options - Ajax response options from selecting a product option
+ * @param {OptionSelectionResponse} optionsHtml - Ajax response optionsHtml from selecting a product option
* @param {jQuery} $productContainer - DOM element for current product
*/
-function updateOptions(options, $productContainer) {
- options.forEach(function (option) {
- var $optionEl = $productContainer.find('.product-option[data-option-id*="' + option.id
- + '"]');
- option.values.forEach(function (value) {
- var valueEl = $optionEl.find('option[data-value-id*="' + value.id + '"]');
- valueEl.val(value.url);
- });
- });
+function updateOptions(optionsHtml, $productContainer) {
+ // Update options
+ $productContainer.find('.product-options').empty().html(optionsHtml);
+}
+
+/**
+ * Dynamically creates Bootstrap carousel from response containing images
+ * @param {Object[]} imgs - Array of large product images,along with related information
+ * @param {jQuery} $productContainer - DOM element for a given product
+ */
+function createCarousel(imgs, $productContainer) {
+ var carousel = $productContainer.find('.carousel');
+ $(carousel).carousel('dispose');
+ var carouselId = $(carousel).attr('id');
+ $(carousel).empty().append('
' + $(carousel).data('prev') + '' + $(carousel).data('next') + '');
+ for (var i = 0; i < imgs.length; i++) {
+ $('![' + imgs[i].alt + ' image number ' + parseInt(imgs[i].index, 10) + '](' + imgs[i].url + ' "' + imgs[i].title + '")
').appendTo($(carousel).find('.carousel-inner'));
+ $('').appendTo($(carousel).find('.carousel-indicators'));
+ }
+ $($(carousel).find('.carousel-item')).first().addClass('active');
+ $($(carousel).find('.carousel-indicators > li')).first().addClass('active');
+ if (imgs.length === 1) {
+ $($(carousel).find('.carousel-indicators, a[class^="carousel-control-"]')).detach();
+ }
+ $(carousel).carousel();
+ $($(carousel).find('.carousel-indicators')).attr('aria-hidden', true);
}
/**
@@ -250,7 +263,7 @@ function handleVariantResponse(response, $productContainer) {
$productContainer.parents('.choose-bonus-product-dialog').length > 0;
var isVaraint;
if (response.product.variationAttributes) {
- updateAttrs(response.product.variationAttributes, $productContainer);
+ updateAttrs(response.product.variationAttributes, $productContainer, response.resources);
isVaraint = response.product.productType === 'variant';
if (isChoiceOfBonusProducts && isVaraint) {
$productContainer.parent('.bonus-product-item')
@@ -262,11 +275,8 @@ function handleVariantResponse(response, $productContainer) {
}
// Update primary images
- var primaryImageUrls = response.product.images;
- primaryImageUrls.large.forEach(function (imageUrl, idx) {
- $productContainer.find('.primary-images').find('img').eq(idx)
- .attr('src', imageUrl.url);
- });
+ var primaryImageUrls = response.product.images.large;
+ createCarousel(primaryImageUrls, $productContainer);
// Update pricing
if (!isChoiceOfBonusProducts) {
@@ -277,7 +287,7 @@ function handleVariantResponse(response, $productContainer) {
}
// Update promotions
- $('.promotions').empty().html(getPromotionsHtml(response.product.promotions));
+ $productContainer.find('.promotions').empty().html(response.product.promotionsHtml);
updateAvailability(response, $productContainer);
@@ -313,7 +323,7 @@ function handleVariantResponse(response, $productContainer) {
* @param {jQuery} $productContainer - DOM container for a given product
*/
function updateQuantities(quantities, $productContainer) {
- if (!($productContainer.parent('.bonus-product-item').length > 0)) {
+ if ($productContainer.parent('.bonus-product-item').length <= 0) {
var optionsHtml = quantities.map(function (quantity) {
var selected = quantity.selected ? ' selected ' : '';
return '
' + data.message + - '
';
- $('.paymentInstruments').after(toInsert);
+ '
';
+ $('.paymentInstruments').empty().append(toInsert);
}
},
error: function (err) {
diff --git a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js
index d95747d..a47723f 100644
--- a/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js
+++ b/sfra/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js
@@ -1,4 +1,5 @@
'use strict';
+var focusHelper = require('../components/focus');
/**
* Retrieves the relevant pid value
@@ -25,9 +26,21 @@ function getPidValue($el) {
* @return {jquery} - quantity selector DOM container
*/
function getQuantitySelector($el) {
- return $el && $('.set-items').length
- ? $($el).closest('.product-detail').find('.quantity-select')
- : $('.quantity-select');
+ var quantitySelected;
+ if ($el && $('.set-items').length) {
+ quantitySelected = $($el).closest('.product-detail').find('.quantity-select');
+ } else if ($el && $('.product-bundle').length) {
+ var quantitySelectedModal = $($el).closest('.modal-footer').find('.quantity-select');
+ var quantitySelectedPDP = $($el).closest('.bundle-footer').find('.quantity-select');
+ if (quantitySelectedModal.val() === undefined) {
+ quantitySelected = quantitySelectedPDP;
+ } else {
+ quantitySelected = quantitySelectedModal;
+ }
+ } else {
+ quantitySelected = $('.quantity-select');
+ }
+ return quantitySelected;
}
/**
@@ -51,23 +64,26 @@ function getQuantitySelected($el) {
* selected. If there is no variant that corresponds to a specific combination of attribute
* values, an attribute may be disabled in the Product Detail Page
* @param {jQuery} $productContainer - DOM container for a given product
+ * @param {Object} msgs - object containing resource messages
*/
-function processSwatchValues(attr, $productContainer) {
+function processSwatchValues(attr, $productContainer, msgs) {
attr.values.forEach(function (attrValue) {
var $attrValue = $productContainer.find('[data-attr="' + attr.id + '"] [data-attr-value="' +
attrValue.value + '"]');
- var $swatchAnchor = $attrValue.parent();
+ var $swatchButton = $attrValue.parent();
if (attrValue.selected) {
$attrValue.addClass('selected');
+ $attrValue.siblings('.selected-assistive-text').text(msgs.assistiveSelectedText);
} else {
$attrValue.removeClass('selected');
+ $attrValue.siblings('.selected-assistive-text').empty();
}
if (attrValue.url) {
- $swatchAnchor.attr('href', attrValue.url);
+ $swatchButton.attr('data-url', attrValue.url);
} else {
- $swatchAnchor.removeAttr('href');
+ $swatchButton.removeAttr('data-url');
}
// Disable if not selectable
@@ -114,14 +130,15 @@ function processNonSwatchValues(attr, $productContainer) {
* @param {Object} attrs - Attribute
* @param {string} attr.id - Attribute ID
* @param {jQuery} $productContainer - DOM element for a given product
+ * @param {Object} msgs - object containing resource messages
*/
-function updateAttrs(attrs, $productContainer) {
+function updateAttrs(attrs, $productContainer, msgs) {
// Currently, the only attribute type that has image swatches is Color.
var attrsWithSwatches = ['color'];
attrs.forEach(function (attr) {
if (attrsWithSwatches.indexOf(attr.id) > -1) {
- processSwatchValues(attr, $productContainer);
+ processSwatchValues(attr, $productContainer, msgs);
} else {
processNonSwatchValues(attr, $productContainer);
}
@@ -139,10 +156,10 @@ function updateAvailability(response, $productContainer) {
var availabilityValue = '';
var availabilityMessages = response.product.availability.messages;
if (!response.product.readyToOrder) {
- availabilityValue = '' + response.resources.info_selectforstock + '
';
+ availabilityValue = '' + response.resources.info_selectforstock + '
' + message + '
';
+ availabilityValue += '' + message + '
' + promotion.calloutMsg +
- '
';
- });
-
- return html;
-}
-
/**
* Generates html for product attributes section
*
@@ -219,18 +215,35 @@ function getAttributesHtml(attributes) {
/**
* Updates DOM using post-option selection Ajax response
*
- * @param {OptionSelectionResponse} options - Ajax response options from selecting a product option
+ * @param {OptionSelectionResponse} optionsHtml - Ajax response optionsHtml from selecting a product option
* @param {jQuery} $productContainer - DOM element for current product
*/
-function updateOptions(options, $productContainer) {
- options.forEach(function (option) {
- var $optionEl = $productContainer.find('.product-option[data-option-id*="' + option.id
- + '"]');
- option.values.forEach(function (value) {
- var valueEl = $optionEl.find('option[data-value-id*="' + value.id + '"]');
- valueEl.val(value.url);
- });
- });
+function updateOptions(optionsHtml, $productContainer) {
+ // Update options
+ $productContainer.find('.product-options').empty().html(optionsHtml);
+}
+
+/**
+ * Dynamically creates Bootstrap carousel from response containing images
+ * @param {Object[]} imgs - Array of large product images,along with related information
+ * @param {jQuery} $productContainer - DOM element for a given product
+ */
+function createCarousel(imgs, $productContainer) {
+ var carousel = $productContainer.find('.carousel');
+ $(carousel).carousel('dispose');
+ var carouselId = $(carousel).attr('id');
+ $(carousel).empty().append('