Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

STRF-5640 - Load cart quantity in FE #1379

Merged
merged 1 commit into from Dec 11, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Expand Up @@ -8,6 +8,7 @@
- shotaK's Add context to the menu collapsible factory target elements [#1382](https://github.com/bigcommerce/cornerstone/pull/1382)
- Added default rule for product carousel card title to break words on overflow. [#1389](https://github.com/bigcommerce/cornerstone/pull/1389)
- Only show cookie privacy notice for EU IP addresses [#1381](https://github.com/bigcommerce/cornerstone/pull/1381)
- Move Cart Quantity header value to a FE API call [#1379](https://github.com/bigcommerce/cornerstone/pull/1379)

## 2.6.0 (2018-11-05)
- Add support for Card Management: List, Delete, Edit, Add and Default Payment Method [#1376](https://github.com/bigcommerce/cornerstone/pull/1376)
Expand Down
2 changes: 1 addition & 1 deletion assets/js/theme/global.js
Expand Up @@ -24,11 +24,11 @@ export default class Global extends PageManager {
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;

cartPreview(this.context.secureBaseUrl);
quickSearch();
currencySelector();
foundation($(document));
quickView(this.context);
cartPreview();
compareProducts(this.context.urls);
carousel();
menu();
Expand Down
34 changes: 32 additions & 2 deletions assets/js/theme/global/cart-preview.js
Expand Up @@ -8,13 +8,15 @@ export const CartPreviewEvents = {
open: 'opened.fndtn.dropdown',
};

export default function () {
export default function (secureBaseUrl) {
const loadingClass = 'is-loading';
const $cart = $('[data-cart-preview]');
const $cartDropdown = $('#cart-preview-dropdown');
const $cartLoading = $('<div class="loadingOverlay"></div>');

$('body').on('cart-quantity-update', (event, quantity) => {
const $body = $('body');

$body.on('cart-quantity-update', (event, quantity) => {
$('.cart-quantity')
.text(quantity)
.toggleClass('countPill--positive', quantity > 0);
Expand Down Expand Up @@ -49,4 +51,32 @@ export default function () {
.hide();
});
});

let quantity = 0;

// Get existing quantity from localStorage if found
if (utils.tools.storage.localStorageAvailable()) {
if (localStorage.getItem('cart-quantity')) {
quantity = Number(localStorage.getItem('cart-quantity'));
$body.trigger('cart-quantity-update', quantity);
}
}

// Get updated cart quantity from the Cart API
const cartQtyPromise = new Promise((resolve, reject) => {
utils.api.cart.getCartQuantity({ baseUrl: secureBaseUrl }, (err, qty) => {
if (err) {
reject(err);
}
resolve(qty);
});
});

// If the Cart API gives us a different quantity number, update it
cartQtyPromise.then(qty => {
$body.trigger('cart-quantity-update', qty);
if (utils.tools.storage.localStorageAvailable()) {
localStorage.setItem('cart-quantity', qty);
}
});
}
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -6,7 +6,7 @@
"author": "BigCommerce",
"license": "MIT",
"dependencies": {
"@bigcommerce/stencil-utils": "^2.0.0",
"@bigcommerce/stencil-utils": "^4.0.0",
"babel-polyfill": "^6.26.0",
"creditcards": "^3.0.1",
"easyzoom": "^2.5.0",
Expand Down
2 changes: 1 addition & 1 deletion templates/components/common/navigation.html
Expand Up @@ -50,7 +50,7 @@
data-dropdown="cart-preview-dropdown"
data-options="align:right"
href="{{urls.cart}}">
<span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> <span class="countPill{{#if cart.items}} countPill--positive{{/if}} cart-quantity">{{cart.quantity}}</span>
<span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> <span class="countPill cart-quantity"></span>
</a>

<div class="dropdown-menu" id="cart-preview-dropdown" data-dropdown-content aria-hidden="true"></div>
Expand Down
1 change: 1 addition & 0 deletions templates/layout/base.html
Expand Up @@ -25,6 +25,7 @@
{{inject 'genericError' (lang 'common.generic_error')}}
{{inject 'maintenanceMode' settings.maintenance}}
{{inject 'urls' urls}}
{{inject 'secureBaseUrl' settings.secure_base_url}}
{{inject 'template' template}}
{{{snippet 'htmlhead'}}}
</head>
Expand Down