Skip to content

Commit

Permalink
Work on the product cart page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaypal412
jaypal412 committed Jun 7, 2018
1 parent c3b6813 commit 1b845e9
Show file tree
Hide file tree
Showing 7 changed files with 195 additions and 329 deletions.
5 changes: 2 additions & 3 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@

<main class="main-body">
<router-outlet></router-outlet>
</main>

<app-checkout-footer *ngIf="currentUrl"></app-checkout-footer>
</main>
<app-footer *ngIf="currentUrl"></app-footer>

</section>
</div>
33 changes: 16 additions & 17 deletions src/app/checkout/cart/cart.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
<div class="cart-section container">
<div>
<div *ngIf="(totalCartItems$ | async) > 0 else emptyCart" class="row">
<div class="left col-md-8">
<div class="checkout-header-container">
<div class="checkout-header">
<span class="text">Your Shopping Cart</span>
</div>
<div class="total-price">Total: ${{totalCartValue$ | async | number:'1.2-2'}}</div>
</div>
<div class="prod-set">
<app-line-item-list></app-line-item-list>
<a class="wishlist-link">
<span class="icon"></span>
<span class="coming-soon">Add more from wishlist</span>
</a>

<div *ngIf="(totalCartItems$ | async) > 0 else emptyCart" class="row">
<div class="left col-md-9">
<div class="checkout-header-container">
<div class="checkout-header">
<span class="text">Your Shopping Cart</span>
</div>
</div>
<div class="right col-md-4">
<app-order-total-summary [totalCartValue]="totalCartValue$ | async"></app-order-total-summary>
<div class="prod-set">
<app-line-item-list></app-line-item-list>
<!-- <a class="wishlist-link">
<span class="icon"></span>
<span class="coming-soon">Add more from wishlist</span>
</a> -->
</div>
</div>
<div class="right col-md-3">
<app-order-total-summary [totalCartValue]="totalCartValue$ | async"></app-order-total-summary>
</div>
</div>

<ng-template #emptyCart>
<app-empty-cart></app-empty-cart>
</ng-template>
Expand Down
35 changes: 20 additions & 15 deletions src/app/checkout/cart/cart.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
@import '../../shared/scss/selected_theme_variables';
.cart-section {
position: relative;
.left {

padding-right: 40px;
border-right: 1px solid $gray-11;
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:$gray-900;
font-family: $primary-font;;
font-size: 1.8em;
font-weight: normal;
color: $gray-900;
font-family: $primary-font;
;
}
}
.total-price {
Expand All @@ -27,9 +26,11 @@
.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 {
Expand All @@ -55,10 +56,14 @@
}
}
}
.right {

.right {
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;
}
}
47 changes: 22 additions & 25 deletions src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,34 @@
<div class="prod-item">
<div class="col1">
<div class="prod-item pb-3">
<div class="col1 col-2 col-sm-2 col-md-2 col-lg-2">
<!--<img [src]="'http://assets.myntassets.com/h_128,q_100,w_96/v1/assets/images/1714052/2017/3/6/11488792709467-HRX-by-Hrithik-Roshan-Men-Black-Printed-Round-Neck-T-Shirt-191488792709172-1.jpg'">-->
<img [src]="image" alt="">
</div>
<div class="col2">
<div class="prod-name">
<a class="c-gray">
{{name}}
</a>
<div class="col2 col-10 col-sm-10 col-md-10 col-lg-10">
<div class="row m-0">
<div class="prod-name col-9">
<div class="c-gray">
{{name}}
</div>
</div>
<div class="size-qty-wrap col-3">
<div class="size-qty">
<span class="qty">
<span class="gray">Qty:</span>
<span class="value">{{quantity}}</span>
</span>
</div>
<!-- <div class="seller">Sold by: Proleague</div> -->
</div>
</div>

<div class="prod-amount">
{{amount}}
</div>
<div class="size-qty-wrap">
<div class="size-qty">
<!-- <span class="size"> -->
<!-- <span class="gray">Size:</span> -->
<!-- <span class="value">L</span> -->
<!-- <\!--<span class="icon"></span>-\-> -->
<!-- </span> -->
<span class="qty">
<span class="gray">Qty:</span>
<span class="value">{{quantity}}</span>
<!--<span class="icon"></span>-->
</span>
</div>
<!-- <div class="seller">Sold by: Proleague</div> -->
</div>
<div class="edit-move-delete">
<div class="actions">
<span (click)="removeLineItem()" class="delete-item">REMOVE</span>
<span class="move-item coming-soon">MOVE TO WISHLIST</span>
<span (click)="removeLineItem()" class="delete-item"><i class="fa fa-times"></i></span>
<!-- <span class="move-item coming-soon">MOVE TO WISHLIST</span> -->
</div>
</div>
</div>
</div>
</div>
190 changes: 94 additions & 96 deletions src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Loading

0 comments on commit 1b845e9

Please sign in to comment.