Add the function of adding items to the cart

src/app.js

@@ -9,14 +9,14 @@ const prefer = {
 
 const STORAGE_KEY = `${BRAND_NAME.replaceAll(' ', '-')}-hyper-app`;
 const localStore = {
-  fetch() {
-    return JSON.parse(localStorage.getItem(STORAGE_KEY));
+  get(name) {
+    return JSON.parse(localStorage.getItem(`${STORAGE_KEY}-${name}`));
   },
-  save(id) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(id));
+  set(name, data) {
+    localStorage.setItem(`${STORAGE_KEY}-${name}`, JSON.stringify(data));
   },
-  remove() {
-    localStorage.removeItem(STORAGE_KEY);
+  remove(name) {
+    localStorage.removeItem(`${STORAGE_KEY}-${name}`);
   },
 };
 
@@ -338,9 +338,11 @@ const shop = {
 };
 
 const cart = {
-  items: [],
+  storeName: 'cart-items',
+  items: localStore.get(this.storeName) || [],
   addItem(item) {
     this.items.push(item);
+    localStore.set(this.storeName, cart.items);
   },
 };
 

src/pages/shop/shop.html

@@ -129,6 +129,14 @@
                     x-html="svg('bag')"
                     class="mt-4 ml-1"
                     :class="btn.roundedLight"
+                    @click="cart.addItem({
+                      name: product.name,
+                      color: currentColor,
+                      category: product.category,
+                      price: product.price,
+                      discount: product.discount,
+                      SKU: product.SKU,
+                    })"
                   ></button>
                 </template>
               </div>