Improved Cart

xuskivadzzee4 · Aug 23, 2024 · 2b129aa · 2b129aa
1 parent 0d780c5
commit 2b129aa
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 17 deletions.
diff --git a/src/app/cart-page/cart-page.component.html b/src/app/cart-page/cart-page.component.html
@@ -1,8 +1,8 @@
-<div class="cartBackground">
+<div class="cartBackground" *ngIf="showCartPage === false">
     <div class="cartPage" id="cartPage">
         <div class="heading">
             <span class="heading__title">Shopping Cart</span>
-            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
+            <svg (click)="toggleCartPage()" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                 <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                 <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
             </svg>
@@ -22,6 +22,9 @@ <h3>{{product.title}}({{ productQuantity }}x)</h3>
                     <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
                 </svg>
             </div>
+            <div *ngIf="productsArrLength === 0" class="emptyCart">
+                <span class="emptyCart__span">Empty Cart</span>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/app/cart-page/cart-page.component.scss b/src/app/cart-page/cart-page.component.scss
@@ -71,6 +71,16 @@
                     cursor: pointer;
                 }
             }
+            & .emptyCart {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: 100%;
+                &__span {
+                    font-size: 1.3rem;
+                }
+            }
         }
     }
 }

diff --git a/src/app/cart-page/cart-page.component.ts b/src/app/cart-page/cart-page.component.ts
@@ -8,18 +8,27 @@ import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 
 export class CartPageComponent implements OnInit {
   productQuantity : number = 1;
+  productsArrLength : number = 0;
+  showCartPage : boolean = false;
 
   @Input()
   productsArr : Array<any> = [];
 
-  removeProduct(product : any): void {
-    let productDiv = document.getElementById(`${product.id}`);
-    productDiv?.remove();
+  @Output() sendProductsInfo : EventEmitter<number> = new EventEmitter();
+
+  ngOnInit(): void {
+    this.productsArrLength = this.productsArr.length;
+    this.sendProductsInfo.emit(this.productsArrLength);
   };
 
-  @Output() sendProductsInfo : EventEmitter<boolean> = new EventEmitter();
+  removeProduct(product : any): void {
+    this.productsArrLength = this.productsArrLength - 1;
+    this.sendProductsInfo.emit(this.productsArrLength);
+    let productIndex = this.productsArr.indexOf(product);
+    this.productsArr.splice(productIndex, 1);
+  };
 
-  ngOnInit(): void {
-    console.log('Loaded!')
-  }
+  toggleCartPage() {
+    this.showCartPage = !this.showCartPage;
+  };
 }
diff --git a/src/app/cart/cart.component.html b/src/app/cart/cart.component.html
@@ -1,7 +1,9 @@
-<div class="cartDiv" id="cartDiv" (click)="toggleCartPage()">
-    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
-        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
-    </svg>
-    <span class="cartProductQuantity">{{ cartProductQuantity }}</span>
-    <app-cart-page [productsArr]="productsArr" *ngIf="showCartPage === true"></app-cart-page>
+<div>
+    <div class="cartDiv" id="cartDiv">
+        <svg (click)="toggleCartPage()" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
+            <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+        </svg>
+        <span (click)="toggleCartPage()" class="cartProductQuantity">{{ cartProductQuantity }}</span>
+        <app-cart-page (sendProductsInfo)="reciveProductsInfo($event)" [productsArr]="productsArr" *ngIf="showCartPage === true"></app-cart-page>
+    </div>
 </div>
diff --git a/src/app/cart/cart.component.ts b/src/app/cart/cart.component.ts
@@ -12,7 +12,11 @@ export class CartComponent implements OnInit {
   toggleCartPage() {
     this.showCartPage = !this.showCartPage;
   };
-
+
+  reciveProductsInfo($event : number) {
+    this.cartProductQuantity = $event;
+  };
+
   @Input()
   cartProductQuantity : number = 0;
 
@@ -21,7 +25,7 @@ export class CartComponent implements OnInit {
 
   ngOnInit() {
     let clickedProductsArr : any = localStorage.getItem('clickedProductsArr');
-    if(clickedProductsArr) {
+    if(clickedProductsArr && this.cartProductQuantity !== 0) {
       this.cartProductQuantity = JSON.parse(clickedProductsArr).length;
     } else {
       this.cartProductQuantity = 0;