diff --git a/src/app/app.component.html b/src/app/app.component.html index 51a47e97..b8e0db63 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,14 +2,12 @@
- - - + +
-
- - - + + +
diff --git a/src/app/checkout/cart/cart.component.html b/src/app/checkout/cart/cart.component.html index dd6fde9c..9cf2684d 100644 --- a/src/app/checkout/cart/cart.component.html +++ b/src/app/checkout/cart/cart.component.html @@ -1,24 +1,25 @@
-
-
+ +
+
- My Shopping Bag ({{totalCartItems$ | async}}) + Your Shopping Cart
-
Total: ${{totalCartValue$ | async | number:'1.2-2'}}
- +
-
+
+ diff --git a/src/app/checkout/cart/cart.component.scss b/src/app/checkout/cart/cart.component.scss index 0d18da14..d7b4c568 100644 --- a/src/app/checkout/cart/cart.component.scss +++ b/src/app/checkout/cart/cart.component.scss @@ -1,20 +1,18 @@ @import '../../shared/scss/selected_theme_variables'; .cart-section { + position: relative; .left { - display: inline-block; - width: 70%; - padding-right: 40px; - border-right: 1px solid #f5f5f6; - min-height: 500px; + padding-right: 40px; .checkout-header-container { .checkout-header { display: inline-block; - padding: 30px 0; + padding: 3rem 0 0.8rem; .text { - font-size: 18px; - font-weight: 600; - color: #535766; - font-family: $primary-font;; + font-size: 1.8em; + font-weight: normal; + color: $gray-900; + font-family: $primary-font; + ; } } .total-price { @@ -22,15 +20,17 @@ padding: 30px 0; display: inline-block; font-size: 18px; - color: #535766; + color: $gray-900; } } .prod-set { width: 100%; display: inline-block; - height: 100%; overflow: auto; - padding-left: 1px; + padding: 1rem; + background-color: $white; + border-radius: 4px; + box-shadow: 0px 0px 3px #ccc; .wishlist-link { cursor: pointer; .icon { @@ -49,17 +49,21 @@ display: block; height: 40px; padding-top: 10px; - background: #fff; - color: #535766; - border: 1px solid #eaeaec; + background: $white; + color: $gray-900; + border: 1px solid $gray-10; + font-size: 1.7em; } } } .right { - display: inline-block; - width: 29%; vertical-align: top; - margin-top: 52px; - padding-left: 35px; + position: absolute; + right:0; + margin-top: 15.3vh; + background-color:$white; + border-radius:4px ; + box-shadow:0px 0px 4px $gray-10; + padding: 0.9rem 1.4rem; } } \ No newline at end of file diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html index dd854c6c..dac4d735 100644 --- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html +++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html @@ -1,37 +1,34 @@ -
-
+
+
-
-
- - {{name}} - +
+
+
+
+ {{name}} +
+
+
+
+ + Qty: + {{quantity}} + +
+ +
+
{{amount}}
-
-
- - - - - - - Qty: - {{quantity}} - - -
- -
- REMOVE - MOVE TO WISHLIST + +
-
+
\ No newline at end of file diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss index 1ab5f75a..f2836d00 100644 --- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss +++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss @@ -1,100 +1,98 @@ @import '../../../../../shared/scss/selected_theme_variables'; .prod-item { - background: #fff; - border: 1px solid #eaeaec; - box-shadow: 0 0 4px rgba(40,44,63,.08); - margin-bottom: 30px; - text-transform: none; - padding-bottom: 0!important; - .col1 { - width: 20%; + margin-bottom: 30px; + text-transform: none; + border-bottom: 1px solid $gray-10; + position: relative; + .col1 { + display: inline-block; + vertical-align: bottom; + img { + width: 120px; + height: 160px; + object-fit: contain; + } + } + .col2 { + vertical-align: top; + display: inline-block; + padding: 10px 10px 10px 25px; + min-height: 145px; + position: relative; + + + .prod-name { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 5px 5px 5px 0; + .c-gray { + font-size: 1.3em; + font-family: $primary-font; + font-weight: normal; + color: $gray-900; + margin-right: 6px; + } + } + .prod-amount { + padding: 5px 5px 5px 0; + display: inline-block; + vertical-align: top; + font-weight: 600; + font-size: 1.3em; + font-family: $primary-font; + color: $theme-action-color - 50; + } + .size-qty-wrap { + display: inline-block; + margin: 5px 0; + color: $gray-400; + text-align: right; + .size-qty { + margin: 0 0 4px; + padding-right: 10px; display: inline-block; - vertical-align: bottom; - img { - width: 120px; - height: 160px; - object-fit: contain; - } - } - .col2 { - vertical-align: top; - display: inline-block; - padding: 10px 10px 10px 25px; - min-height: 145px; - position: relative; - width: 79%; - .prod-name { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 400px; - padding: 5px 5px 5px 0; - a { - font-size: 14px; - font-family: $primary-font;; - font-weight: 600; - color: #535766; - margin-right: 6px; - } - } - .prod-amount { - float: right; - padding: 5px 5px 5px 0; - display: inline-block; - vertical-align: top; - font-weight: 600; - font-size: 14px; - font-family: $primary-font;; - color: #535766; - margin-left: 20px; - } - .size-qty-wrap { - margin: 5px 0; - color: #535766; - .size-qty { - margin: 0 0 4px; - padding-right: 10px; - display: inline-block; - .size, .qty { - cursor: pointer; - margin-right: 20px; - .gray { - color: gray; - } - .icon { - width: 20px; - height: 20px; - background-position: -2570px -13px; - display: inline-block; - overflow: hidden; - background-repeat: no-repeat; - background-size: 4250px 153px; - vertical-align: middle; - background-image: url(/assets/checkout_sprite.png); - } - } - } - } - .edit-move-delete { - position: absolute; - left: 25px; - right: 20px; - bottom: 0; - border-top: 1px solid #eaeaec; - padding-top: 9px; - font-size: 13px; - font-weight: 600; - padding-left: 0; - color: #696e79; - .delete-item, .move-item { - font-family: $primary-font;; - margin: 0 15px 0 0; - cursor: pointer; - } - .move-item { - color: #526cd0; - } - } - } + + .size, + .qty { + color: $gray-400; + cursor: pointer; + margin-right: 20px; + font-size: 1.7em; + .gray,.value { + color: $gray-900; + } + .icon { + width: 20px; + height: 20px; + background-position: -2570px -13px; + display: inline-block; + overflow: hidden; + background-repeat: no-repeat; + background-size: 4250px 153px; + vertical-align: middle; + background-image: url(/assets/checkout_sprite.png); + } + } + } + } + .edit-move-delete { + position: absolute; + right: 20px; + top: 0; + color: $gray-11; + right: -14px; + top: -8px; + .delete-item, + .move-item { + margin: 0 15px 0 0; + cursor: pointer; + font-size: 1em; + } + .move-item { + color: $gray-200; + } + } + } } \ No newline at end of file diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts index 0d894de3..c0cb935e 100644 --- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts +++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts @@ -23,10 +23,10 @@ export class LineItemComponent implements OnInit { private store: Store, private actions: CheckoutActions, private checkoutService: CheckoutService - ) { } + ) {} ngOnInit() { - this.image = environment.apiEndpoint + this.lineItem.variant.images[0].product_url; + this.image = environment.apiEndpoint+ this.lineItem.variant.images[0].product_url; this.name = this.lineItem.variant.name; this.quantity = this.lineItem.quantity; this.amount = this.lineItem.display_amount; diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html index a3473b10..2383f809 100644 --- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html +++ b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html @@ -1,34 +1,17 @@
-
- Coupons - -
-
- - Gift wrap for - $1 - Cash/Card On Delivery not available +
+
+ +
- Bag Total - ${{totalCartValue | number:'1.2-2'}} -
-
- Coupon Discount - Apply Coupon + Sub Total + ${{totalCartValue | number:'1.2-2'}}
- Delivery + Flat-Rate Shipping FREE
-
-
- -
-
- ${{totalCartValue | number:'1.2-2'}} -
-
-
+
\ No newline at end of file diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss index a982cdf2..63b68e07 100644 --- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss +++ b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss @@ -1,179 +1,64 @@ @import '../../../../shared/scss/selected_theme_variables'; .order-total-summary { - &:before { - content: 'OPTIONS'; - text-align: left; - width: 100%; - display: block; - top: -16px; - position: relative; - font-weight: 600; - font-size: 12px; - color: #7e818c; - font-family: $primary-font;; - } - .coupon-section { - position: relative; - text-align: left; - font-size: inherit; - border-bottom: 1px dotted #d4d5d9; - min-height: 30px; - padding-bottom: 20px!important; - margin-bottom: 10px; - .text-label { - font-size: 14px; - display: block; - font-weight: 600; - color: #596062; - font-family: $primary-font;; - } - .apply-coupon:after { - font-size: 14px; - content: 'Apply Coupon'; - position: absolute; - background: #fff; - color: #526cd0; - border: 1px solid #526cd0; - font-weight: 600; - font-family: $primary-font;; - border-radius: 3px; - padding: 2px 12px; - top: -6px; - right: 0px; - // cursor: pointer; - } - } - .gift-wrap-order { - height: 20px; - margin-bottom: 80px; - position: relative; - .gift-wrap-checkbox { - float: right; - width: 20px; - height: 20px; - background-position: -116px 0; - overflow: hidden; - background-repeat: no-repeat; - background-size: 4250px 153px; - vertical-align: middle; - background-image: url(/assets/checkout_sprite.png); - margin-top: 8px; - margin-right: 0; - cursor: pointer; - } - .gift-card-lbl, .gift-card-price { - font-size: 14px; - font-family: $primary-font;; - font-weight: 600; - color: #596062; - } - .not-cod { - display: block; - margin-top: 0; - padding: 3px 0 0; - font-size: 12px; - color: #535766; - } - } .order-summary-span { position: relative; padding: none; - border-bottom: 1px solid #eaeaec; - &:before { - content: 'Price Details'; - position: absolute; - top: -32px; - font-size: 12px; - left: 0; - text-transform: uppercase; - font-weight: 600; - font-family: $primary-font;; - color: #7e818c; - } - .bag-total, .coupon, .shipping { - padding-bottom: 8px; - height: 22px; - margin-bottom: 6px; + .bag-total, + { + padding: 1rem 0; + border-bottom: 1px solid $gray-10; position: relative; span { - color: #535766; + color: $gray-900; + font-size: 1.2em; + } + } + .shipping { + padding: 1rem 0; + span { + color: $gray-900; + font-size: 1.2em; } } - .bag-total > .value, - .coupon > .apply-coupon, - .shipping > .shipping-fee { + .bag-total>.value, + .coupon>.apply-coupon, + .shipping>.shipping-fee { position: absolute; right: 0; text-align: right; - color: #596062; + color: $theme-action-color - 50; + font-size: 1.2em; + font-weight: 600; } - .coupon > .c-blue { - color: #526cd0; + .coupon>.c-blue { + color: $theme-action-color - 50; cursor: pointer; } - .shipping > .c-green { - color: #20bd99; + .shipping>.c-green { + color: $theme-action-color - 50; } } .order-total.footer { position: relative; display: inline-block; width: 100%; - vertical-align: top; - margin-top: 42px; - margin-bottom: 40px; clear: right; - min-height: 80px; .place-order { - position: absolute; - right: 0; - width: auto; - left: 0; - top: 0; - bottom: 0; text-align: right; .order-btn { - border: none; - border-radius: 3px; - height: 45px; - background-color: #2cd2b1!important; - font-weight: 600!important; + border: 1px solid $theme-action-color - 50; + border-radius: 0.4rem; + padding: 0.5rem; + background-color: $theme-action-color !important; + font-weight: 300 !important; box-shadow: none; width: 100%; - color: #fff; - font-family: $primary-font;; - font-size: 14px; - margin: 10px auto; - } - } - .total-amount { - float: none; - position: absolute; - top: -51px; - left: 0; - right: 0; - text-align: right; - margin: 20px auto; - color: #333; - .total-rupees { - color: #535766; - font-weight: 600; - font-size: 15px; - font-family: $primary-font;; - } - &:after { - content: 'Order Total'; - font-size: 15px; - top: 0; - position: absolute; - color: #596062; - left: 0; - text-align: left; - font-weight: 600; - font-family: $primary-font;; + color: $white; + font-family: "Roboto Regular"; + font-size: 1.4em; + margin: 10px auto; + } } - } - } \ No newline at end of file diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.ts b/src/app/product/components/product-detail-page/product-details/product-details.component.ts index 4745676a..c3773c30 100644 --- a/src/app/product/components/product-detail-page/product-details/product-details.component.ts +++ b/src/app/product/components/product-detail-page/product-details/product-details.component.ts @@ -26,7 +26,6 @@ export class ProductDetailsComponent implements OnInit { variantId: any; productID: any productdata: any; - constructor( private variantParser: VariantParserService, @@ -96,12 +95,11 @@ export class ProductDetailsComponent implements OnInit { addToCart(quantitiy) { this.store.dispatch(this.checkoutActions.addToCart(this.variantId, quantitiy)); } - -// TO DO (to add the daynamic quantity) - buyNow(){ - this.store.dispatch(this.checkoutActions.addToCart(this.variantId, 1)); +// TO DO (to add the daynamic quantity) + buyNow() { + this.store.dispatch(this.checkoutActions.addToCart(this.variantId, 1)); } markAsFavorite() { diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts index ae3ee006..ddb7ea9d 100644 --- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts +++ b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts @@ -19,7 +19,7 @@ export class ProductPriceInfoComponent implements OnInit { @Input() product; @Output() onAddToCart = new EventEmitter(); @Output() onMarkAsFavorites = new EventEmitter(); - + customOptionTypesHash: any; @@ -54,7 +54,7 @@ export class ProductPriceInfoComponent implements OnInit { }); } - + onOptionClick(option) { const result = new VariantRetriverService() .getVariant(this.currentSelectedOptions,