From d702238f25ce6a84a809bbfde0a59639046001cc Mon Sep 17 00:00:00 2001 From: Wesley Cocks Date: Mon, 13 May 2019 05:33:01 -0600 Subject: [PATCH 1/2] feature/134-cart-layout - wjcps - 190513 Initial blocking in of the cart layout and wiring up of the data --- src/pages/cart/cart-items.hbs | 50 +++++- src/pages/cart/cart-moneybox.hbs | 24 +++ src/pages/cart/cart-page.js | 5 + src/pages/cart/cart.scss | 274 +++++++++++++++++++++++++++++++ src/pages/cart/index.html | 26 ++- 5 files changed, 370 insertions(+), 9 deletions(-) create mode 100644 src/pages/cart/cart-moneybox.hbs create mode 100644 src/pages/cart/cart.scss diff --git a/src/pages/cart/cart-items.hbs b/src/pages/cart/cart-items.hbs index faa3edc..f98ca92 100644 --- a/src/pages/cart/cart-items.hbs +++ b/src/pages/cart/cart-items.hbs @@ -1,5 +1,45 @@ - \ No newline at end of file +
+

Items in Cart

+ +
\ No newline at end of file diff --git a/src/pages/cart/cart-moneybox.hbs b/src/pages/cart/cart-moneybox.hbs new file mode 100644 index 0000000..dfd93bc --- /dev/null +++ b/src/pages/cart/cart-moneybox.hbs @@ -0,0 +1,24 @@ +
+

Cost of Cart

+
+

Subtotal

+

${{cartSubtotal}}

+
+
+

Shipping estimate

+

Free

+
+
+

Taxes estimate

+

$0.00

+
+
+
+

Estimated Total

+

${{cartSubtotal}}

+
+
+ Continue Shopping + Pay Securely Now +
+
\ No newline at end of file diff --git a/src/pages/cart/cart-page.js b/src/pages/cart/cart-page.js index 704986c..8f03df5 100644 --- a/src/pages/cart/cart-page.js +++ b/src/pages/cart/cart-page.js @@ -1,8 +1,13 @@ import { getCartFromStorage } from '../../components/cart/cart'; import cartItemsTemplate from './cart-items.hbs'; +import cartMoneyBoxTemplate from './cart-moneybox.hbs'; (function cartPage() { const cartData = getCartFromStorage(); const cartItemsEl = document.querySelector('[data-template="cart-items"]'); + const cartMoneyBoxEl = document.querySelector('[data-template="cart-moneybox"]'); + //console.log("cartData", cartData); cartItemsEl.outerHTML = cartItemsTemplate(cartData); + cartMoneyBoxEl.outerHTML = cartMoneyBoxTemplate(cartData); + })(); \ No newline at end of file diff --git a/src/pages/cart/cart.scss b/src/pages/cart/cart.scss new file mode 100644 index 0000000..9ed433b --- /dev/null +++ b/src/pages/cart/cart.scss @@ -0,0 +1,274 @@ +@import '../../scss/variables'; +@import '../../scss/mixins'; + +.page--cart { + .main-content { + display: flex; + + + padding-bottom: 72px; + border-bottom: 1px solid $grey; + margin-bottom: 24px; + @media only screen and (min-width: $filters-collapse) { + display: grid; + grid-column-gap: 24px; + grid-template-columns: 190px 1fr; + } + + @media only screen and (min-width: 900px) { + grid-template-columns: between(190px, 250px, 900px, $max-width) 1fr; + grid-column-gap: between(24px, 50px, 900px, $max-width); + padding-right: between(0px, 50px, 900px, $max-width); + } + + @media only screen and (min-width: $max-width) { + grid-template-columns: 66% 1fr; + grid-column-gap: 50px; + padding-right: 50px; + } + + } + + .cart-summary { + grid-column: 1 / span 2; + } + + .cart-items { + // grid-row: 2/6; + // align-self: start; + } + + /* + .cart-items__item-list, .cart-items__moneybox{ + flex: 1 0 50%; + } + .cart-items__moneybox{ + max-width: 50%; + } + */ + .cart-items { + //grid-row: 2/8; + //align-self: start; + + .heading--section { + border-bottom: 1px solid $black; + } + + &__visible-label { + &--amount { + text-align: center; + margin-left: 8px; + background-color: $white; + color: $black; + border-radius: 50%; + font-size: 1.2rem; + width: 2.0rem; + height: 2.0rem; + line-height: 2.0rem; + } + } + + &__description { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + &__details { + margin: 0; + font-size: 1.2rem; + line-height: 18px; + + dt { + text-transform: uppercase; + display: inline-block; + margin-right: 8px; + } + + dd { + margin: 0; + display: inline-block; + + &:not(.detail__price) { + font-weight: normal; + text-transform: capitalize; + } + } + } + + &__detail { + margin-bottom: 8px; + } + + &__title { + margin-top: 0; + margin-bottom: 16px; + font-size: $font-lg; + font-weight: bold; + } + + &__quantity { + font-size: 1.4rem; + font-weight: 300; + } + + &__total-quantity { + width: 100%; + margin: 0; + padding-top: 16px; + padding-bottom: 16px; + } + + &__items { + width: 100%; + } + + &__item-list { + list-style-type: none; + padding: 0; + margin: 0; + //flex: 0 0 100%; + //overflow-y: scroll; + //max-height: 324px; + } + + &__item { + display: block; + padding: 16px 0; + border-bottom: 1px solid $grey; + } + + &__item-link { + color: $black; + text-decoration: none; + display: flex; + align-items: flex-start; + + &:hover, + &:focus { + outline-offset: -1px; + + .mini-cart__item-title { + text-decoration: underline; + } + } + } + + &__image { + max-width: 100%; + height: auto; + flex: 0 0 70px; + margin-right: 16px; + } + + &__item-title { + font-size: 1.4rem; + line-height: 1.8rem; + margin-top: 0; + margin-bottom: 8px; + flex: 0 0 100%; + } + + &__item-price { + margin-top: 0; + } + + &__controls { + border-top: 1px solid $grey; + margin-left: 76px; + padding: 8px 8px 0; + display: flex; + justify-content: space-between; + } + + &__control { + color: $black; + font-weight: normal; + font-size: $font-xs; + cursor: pointer; + } + + &__summary { + padding-top: 24px; + width: 100%; + } + + &__summary-subtotal { + display: inline-block; + width: 100%; + margin-bottom: 16px; + } + + &__subtotal-title { + float: left; + font-size: 1.4rem; + line-height: 22px; + } + + &__subtotal { + float: right; + } + } + + .cart-moneybox { + background-color: $white; + padding: 25px; + .heading--section { + border-bottom: 1px solid $black; + } + + + &__summary-subtotal { + display: inline-block; + width: 100%; + font-size: 1.4rem; + font-weight: bold; + line-height: 17px; + } + + &__subtotal-title { + float: left; + //color: #1F1F1F; + //font-family: Verdana; + //font-size: 14px; + font-size: 1.4rem; + font-weight: bold; + line-height: 17px; + //letter-spacing: -0.53px; + } + + &__subtotal { + float: right; + } + + &__summary-controls { + display: flex; + justify-content: space-between; + width: 100%; + } +/* + &__view-cart { + text-decoration: none; + padding: 0.5rem; + float: left; + + &:hover, + &:focus { + text-decoration: underline; + } + } + &__checkout{ + &:focus{ + outline-color: $black; + } + } +*/ + &__cta-btn { + text-align: center; + flex: 0 0 48%; + } + + } + + +} \ No newline at end of file diff --git a/src/pages/cart/index.html b/src/pages/cart/index.html index 87b5efa..a929fbb 100644 --- a/src/pages/cart/index.html +++ b/src/pages/cart/index.html @@ -8,22 +8,40 @@ Cart | The Accessibile eStore - + - + +
-

Your Cart

-
+
+

Your Cart

+

You {{cartItemCount}} {{cartItemsLabel}}

+
+ Continue Shopping + Pay Securely Now +
+
+ +
+
+
+
+ Continue Shopping + Pay Securely Now +
+
+
+
From 72c59f24aee5a4bb214c6412e21e1521800f9557 Mon Sep 17 00:00:00 2001 From: puneetsehgal Date: Fri, 6 Mar 2020 12:34:34 -0800 Subject: [PATCH 2/2] Cart layout #134 Update the Cart layout to match the comp and implement the quantity change and remove item features --- src/components/cart/cart.js | 118 ++++++++++++- src/components/mini-cart/mini-cart.hbs | 2 +- src/images/easy-return-icon.png | Bin 0 -> 12848 bytes src/images/truck-icon.png | Bin 0 -> 10790 bytes src/pages/cart/cart-items.hbs | 70 ++++++-- src/pages/cart/cart-moneybox.hbs | 4 +- src/pages/cart/cart-page.js | 14 +- src/pages/cart/cart-quantity-summary.hbs | 2 + src/pages/cart/cart.scss | 210 ++++++++++++++--------- src/pages/cart/index.html | 23 ++- 10 files changed, 326 insertions(+), 117 deletions(-) create mode 100644 src/images/easy-return-icon.png create mode 100644 src/images/truck-icon.png create mode 100644 src/pages/cart/cart-quantity-summary.hbs diff --git a/src/components/cart/cart.js b/src/components/cart/cart.js index a497bc1..ba454c3 100644 --- a/src/components/cart/cart.js +++ b/src/components/cart/cart.js @@ -1,4 +1,8 @@ import { roundNumber } from '../../js/utils'; +import cartItemsTemplate from '../../pages/cart/cart-items.hbs'; +import cartMoneyBoxTemplate from '../../pages/cart/cart-moneybox.hbs'; +import cartQuanitySummaryTemplate from '../../pages/cart/cart-quantity-summary.hbs'; +import * as Modal from '../../components/modal/modal'; function pushCartUpdatedEvent(detail){ const event = new CustomEvent('update:cart', { detail }); @@ -30,7 +34,6 @@ function getCartSubtotal(cartItems){ return accumulator + Number(cartItem.total_price); }, 0); } - function addToCart(newCartItem){ let cart = getCartFromStorage(); cart.cartIndex++; @@ -39,7 +42,6 @@ function addToCart(newCartItem){ cart.cartItems.push(newCartItem); updateCart(cart); } - function removeFromCart(itemId) { let cart = getCartFromStorage(); const updatedCartItems = cart.cartItems.filter(function(cartItem){ @@ -48,13 +50,123 @@ function removeFromCart(itemId) { cart.cartItems = updatedCartItems; updateCart(cart); } +function removeItemFromCart(cartItemsEl) { + const removeItems = cartItemsEl.querySelectorAll('[data-remove]'); + if (removeItems) { + removeItems.forEach(el => { + el.addEventListener('click', (event) => { + removeFromCart(event.target.dataset.remove); + event.stopPropagation(); + }); + }); + } +} +/* +* function will be called on increase and decrease click event and on quantity input change event +* +* @function changeItemQuantity +* @param event +* @param {element} - cartIemsEL - will contain [data-template="cart-items"] element +* @param {String} - eventType - to indentify the event type +* +*/ +function changeItemQuantity(event, cartItemsEl, eventType) { + let cart = getCartFromStorage(); + let cartItems = cart.cartItems; + cartItems.forEach(cartItem => { + if (cartItem.cart_id == event.target.dataset.eventCartId) { + let itemEl = cartItemsEl.querySelector('li[data-cart-id="' + cartItem.cart_id + '"') + let quantityInput = itemEl.querySelector('[data-js="quantity"]'); + if (eventType != 'onChange') { + if (eventType === "increment") { + quantityInput.value++; + } else { + quantityInput.value--; + } + } + // set quantity value to 1 if quantity is negative value + cartItem.quantity = quantityInput.value < 0 ? 1 : quantityInput.value; + cartItem.total_price = roundNumber(parseInt(cartItem.quantity ) * Number(cartItem.price_sale)).toFixed(2); + itemEl.querySelector(".cart-items__column .detail__price").innerHTML = `$${cartItem.total_price}`; + // remove item if quantity is 0 + if (cartItem.quantity == 0) { + setTimeout(function(){ + removeFromCart(cartItem.cart_id); + }, 300); + return; + } + updateCart(cart); + } + }); +} +/* +* function will load/refresh the cart page on page load and change event +* +* @function loadCard +* @param {Object} - cart // will contain card data +* +*/ +function loadCart(cart) { + const cartItemsEl = document.querySelector('[data-template="cart-items"]'); + const cartMoneyBoxEl = document.querySelector('[data-template="cart-moneybox"]'); + const cartQuantitySummaryEl = document.querySelector('[data-template="cart-quantity-summary"]'); + + if (cartItemsEl && cartMoneyBoxEl) { + cartItemsEl.outerHTML = cartItemsTemplate(cart); + cartMoneyBoxEl.outerHTML = cartMoneyBoxTemplate(cart); + cartQuantitySummaryEl.innerHTML = cartQuanitySummaryTemplate(cart); + init(); + } +} function updateCart(cart) { cart.cartItemCount = getCartItemCount(cart.cartItems); cart.cartSubtotal = getCartSubtotal(cart.cartItems).toFixed(2); cart.cartItemsLabel = (cart.cartItemCount === 1) ? 'item' : 'items'; putCartInStorage(cart); pushCartUpdatedEvent(cart); + loadCart(cart); +} +/* +* function will be called on page load and change event +* +* @function init +* +*/ +function init(){ + Modal.init('construction-modal'); + const cartItemsEl = document.querySelector('[data-template="cart-items"]'); + + if (cartItemsEl) { + const increment = cartItemsEl.querySelectorAll('.quantity-comp__increase'); + const decrement = cartItemsEl.querySelectorAll('.quantity-comp__decrease'); + const quantityInput = document.querySelectorAll('[data-js="quantity"]'); + + increment.forEach(el => { + el.addEventListener('click', function (event) { + event.preventDefault(); + changeItemQuantity(event, cartItemsEl, "increment"); + }); + }); + + decrement.forEach(el => { + el.addEventListener('click', function (event) { + event.preventDefault(); + changeItemQuantity(event, cartItemsEl, "decrement"); + }); + }); + + quantityInput.forEach(el => { + el.addEventListener('click', function (event) { + event.preventDefault(); + }) + el.addEventListener('change', function (event) { + changeItemQuantity(event, cartItemsEl, "onChange"); + }); + }); + + removeItemFromCart(cartItemsEl); + } } -export { addToCart, getCartFromStorage, removeFromCart, getCartSubtotal }; \ No newline at end of file +export { init, addToCart, getCartFromStorage, removeFromCart, getCartSubtotal, loadCart }; \ No newline at end of file diff --git a/src/components/mini-cart/mini-cart.hbs b/src/components/mini-cart/mini-cart.hbs index 3d243af..4d3af2b 100644 --- a/src/components/mini-cart/mini-cart.hbs +++ b/src/components/mini-cart/mini-cart.hbs @@ -9,7 +9,7 @@
- View Cart + View Cart Checkout
diff --git a/src/images/easy-return-icon.png b/src/images/easy-return-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..5f3b7748a4b161ce9a88b4a6db573f8c41c2b7f7 GIT binary patch literal 12848 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 M7FQ6f5djAOA3ZW=asU7T literal 0 HcmV?d00001 diff --git a/src/pages/cart/cart-items.hbs b/src/pages/cart/cart-items.hbs index f98ca92..2f1edc1 100644 --- a/src/pages/cart/cart-items.hbs +++ b/src/pages/cart/cart-items.hbs @@ -1,11 +1,11 @@ -
+

Items in Cart

+ +
+ + + + + + Edit item -
- - Edit - -
- + +
+ {{/each}}
\ No newline at end of file diff --git a/src/pages/cart/cart-moneybox.hbs b/src/pages/cart/cart-moneybox.hbs index dfd93bc..205bd00 100644 --- a/src/pages/cart/cart-moneybox.hbs +++ b/src/pages/cart/cart-moneybox.hbs @@ -1,6 +1,6 @@ -
+

Cost of Cart

-
+

Subtotal

${{cartSubtotal}}

diff --git a/src/pages/cart/cart-page.js b/src/pages/cart/cart-page.js index 8f03df5..680cefd 100644 --- a/src/pages/cart/cart-page.js +++ b/src/pages/cart/cart-page.js @@ -1,13 +1,7 @@ -import { getCartFromStorage } from '../../components/cart/cart'; -import cartItemsTemplate from './cart-items.hbs'; -import cartMoneyBoxTemplate from './cart-moneybox.hbs'; +import { getCartFromStorage, loadCart} from '../../components/cart/cart'; (function cartPage() { const cartData = getCartFromStorage(); - const cartItemsEl = document.querySelector('[data-template="cart-items"]'); - const cartMoneyBoxEl = document.querySelector('[data-template="cart-moneybox"]'); - //console.log("cartData", cartData); - cartItemsEl.outerHTML = cartItemsTemplate(cartData); - cartMoneyBoxEl.outerHTML = cartMoneyBoxTemplate(cartData); - -})(); \ No newline at end of file + // load card data on page load + loadCart(cartData); +})(); diff --git a/src/pages/cart/cart-quantity-summary.hbs b/src/pages/cart/cart-quantity-summary.hbs new file mode 100644 index 0000000..db5f5ca --- /dev/null +++ b/src/pages/cart/cart-quantity-summary.hbs @@ -0,0 +1,2 @@ +

Your Cart

+

You have {{cartItemCount}} {{cartItemsLabel}} in your cart. Estimated total is ${{cartSubtotal}}.

\ No newline at end of file diff --git a/src/pages/cart/cart.scss b/src/pages/cart/cart.scss index 9ed433b..a5132c6 100644 --- a/src/pages/cart/cart.scss +++ b/src/pages/cart/cart.scss @@ -3,55 +3,35 @@ .page--cart { .main-content { - display: flex; - - - padding-bottom: 72px; - border-bottom: 1px solid $grey; - margin-bottom: 24px; + @media only screen and (max-width: $filters-collapse) { + .mobile-hide { + display: none; + } + } @media only screen and (min-width: $filters-collapse) { - display: grid; grid-column-gap: 24px; grid-template-columns: 190px 1fr; } @media only screen and (min-width: 900px) { - grid-template-columns: between(190px, 250px, 900px, $max-width) 1fr; - grid-column-gap: between(24px, 50px, 900px, $max-width); - padding-right: between(0px, 50px, 900px, $max-width); + display: grid; + grid-template-columns: 70% 1fr; } @media only screen and (min-width: $max-width) { - grid-template-columns: 66% 1fr; + grid-template-columns: 60% 1fr; grid-column-gap: 50px; - padding-right: 50px; + padding-right: 0; } - } - .cart-summary { + .grid-row { grid-column: 1 / span 2; } - - .cart-items { - // grid-row: 2/6; - // align-self: start; - } - - /* - .cart-items__item-list, .cart-items__moneybox{ - flex: 1 0 50%; - } - .cart-items__moneybox{ - max-width: 50%; - } - */ .cart-items { - //grid-row: 2/8; - //align-self: start; - .heading--section { border-bottom: 1px solid $black; + padding-bottom: 15px; } &__visible-label { @@ -72,6 +52,7 @@ display: flex; flex-wrap: wrap; justify-content: space-between; + margin-left: 15px; } &__details { @@ -80,19 +61,19 @@ line-height: 18px; dt { - text-transform: uppercase; display: inline-block; margin-right: 8px; + font-weight: bold; + text-transform: uppercase; } dd { margin: 0; display: inline-block; - - &:not(.detail__price) { - font-weight: normal; - text-transform: capitalize; - } + text-transform: capitalize; + &.detail__price { + font-weight: bold; + } } } @@ -100,11 +81,11 @@ margin-bottom: 8px; } - &__title { - margin-top: 0; - margin-bottom: 16px; - font-size: $font-lg; + &__column { font-weight: bold; + dd { + display: block; + } } &__quantity { @@ -127,14 +108,11 @@ list-style-type: none; padding: 0; margin: 0; - //flex: 0 0 100%; - //overflow-y: scroll; - //max-height: 324px; } &__item { display: block; - padding: 16px 0; + padding: 16px 0 0; border-bottom: 1px solid $grey; } @@ -152,21 +130,28 @@ text-decoration: underline; } } + @media only screen and (max-width: $mobile) { + flex-wrap: wrap; + } } &__image { - max-width: 100%; + max-width: 200px; height: auto; flex: 0 0 70px; margin-right: 16px; } &__item-title { - font-size: 1.4rem; + font-size: $font-lg; + font-weight: bold; line-height: 1.8rem; - margin-top: 0; - margin-bottom: 8px; + margin-top: 0px; + margin-bottom: 16px; flex: 0 0 100%; + @media only screen and (max-width: $mobile) { + margin-top: 16px; + } } &__item-price { @@ -175,17 +160,28 @@ &__controls { border-top: 1px solid $grey; - margin-left: 76px; - padding: 8px 8px 0; + margin-left: 230px; + @media only screen and (max-width: 584px) { + margin-left: 0; + } + padding: 25px 0 ; display: flex; - justify-content: space-between; + // justify-content: space-between; } &__control { color: $black; font-weight: normal; - font-size: $font-xs; + font-size: 1.2rem; cursor: pointer; + display: flex; + align-items: center; + padding: 0; + margin-left: 30px; + margin-right: 30px; + &:nth-child(1) { + margin-left: 0; + } } &__summary { @@ -208,6 +204,11 @@ &__subtotal { float: right; } + + .quantity-comp { + display: block; + margin-top: 5px; + } } .cart-moneybox { @@ -215,6 +216,11 @@ padding: 25px; .heading--section { border-bottom: 1px solid $black; + margin-top: 0; + padding-bottom: 15px; + } + .divider { + margin: 5px 0 10px; } @@ -222,19 +228,17 @@ display: inline-block; width: 100%; font-size: 1.4rem; - font-weight: bold; line-height: 17px; + &--header { + font-weight: bold; + } + p { + margin: 5px 0; + } } &__subtotal-title { float: left; - //color: #1F1F1F; - //font-family: Verdana; - //font-size: 14px; - font-size: 1.4rem; - font-weight: bold; - line-height: 17px; - //letter-spacing: -0.53px; } &__subtotal { @@ -242,33 +246,77 @@ } &__summary-controls { - display: flex; - justify-content: space-between; + margin-top: 20px; + } + + &__cta-btn { + text-align: center; width: 100%; + margin: 5px 0; } -/* - &__view-cart { - text-decoration: none; - padding: 0.5rem; - float: left; - &:hover, - &:focus { - text-decoration: underline; + } + .cart { + &__total-quantity { + font-weight: bold; + } + } + + .cart-summary { + .mini-cart{ + &__summary-controls{ + justify-content: flex-end; + width: auto; + margin-top: 20px; + margin-bottom: 40px; + } + &__cta-btn { + flex: 0 0 30%; + margin: 0 5px;; + @media only screen and (max-width: $filters-collapse) { + flex: 0 0 48%; + } } } - &__checkout{ - &:focus{ - outline-color: $black; + } + .shipping-info { + margin-top: 60px; + .bottom-content { + display: grid; + grid-template-columns: 50% 1fr; + grid-column-gap: 50px; + padding: 40px 0; + @media only screen and (max-width: $filters-collapse) { + grid-template-columns: initial; + grid-column-gap: 0px; } } -*/ - &__cta-btn { - text-align: center; - flex: 0 0 48%; + background-color: $white; + &__heading { + font-weight: bold; + font-size: 1.8rem; + margin-bottom: 0; + } + &__summary{ + padding-right: 150px; + &:nth-child(1) { + border-right: 1px solid $grey; + } + @media only screen and (max-width: $filters-collapse) { + padding-right: 20px; + &:nth-child(1) { + border-right: none;; + border-bottom: 1px solid $grey; + } + margin: 10px 0; + } + } + &__details { + margin-top: 5px; + } + &__image { + width: auto; + height: 70px; } - } - - } \ No newline at end of file diff --git a/src/pages/cart/index.html b/src/pages/cart/index.html index b55655b..33bf4c0 100644 --- a/src/pages/cart/index.html +++ b/src/pages/cart/index.html @@ -21,25 +21,40 @@
-

Your Cart

-

You {{cartItemCount}} {{cartItemsLabel}}

+
Continue Shopping Pay Securely Now
+
-
+
Continue Shopping Pay Securely Now
-
+
+
+
+
+ +

Free & Easy Return

+

If your product doesn't work, arrives damaged or just isn't right! no problem! All returns are free!

+
+
+ +

Fast, Free Delivery

+

We make sure everything is delivered quickly at no cost to you. it's just one more way to show that we value you as a customer.

+
+
+
+