components/Header.vue

@@ -63,14 +63,14 @@ export default {
         shoppingCart:[],
         links: [
             { img: 'mdi-account', link: "/category/services", title: 'পরিসেবা ' },
+            { img: 'mdi-diamond', link: "/category/jewlry", title: 'গয়না ' },
+            { img: 'mdi-spray', link: "/category/cosmetics", title: 'প্রসাধন  ' },
             { img: 'mdi-corn', link: "/category/vegetables", title: 'সবজি ' },
             { img: 'mdi-apple', link: "/category/fruits", title: 'ফল ' },
             { img: 'mdi-apple', link: "/category/cloths", title: 'পরিধান ' },
-            { img: 'mdi-diamond', link: "/category/jewlry", title: 'গয়না ' },
-            { img: 'mdi-spray', link: "/category/cosmetics", title: 'প্রসাধন  ' },
             { img: 'mdi-tag', link: "/category/grocery", title: 'মুদি ' },
             { img: 'mdi-basket', link: "/bag", title: 'ব্যাগ ' },
-            { img: 'mdi-cellphone-basic', link: "/contact", title: 'যোগাযোগ ' },
+            { img: 'mdi-cellphone-basic', link: "/category/", title: 'সব বিভাগ' },
 
         ],
     }),

pages/bag.vue

@@ -1,8 +1,11 @@
 <template>
     <v-container mt-4 style="padding-bottom:120px;">
         <!-- <v-card class="bg mb-5"  v-show="calculateCart"> -->
-        <v-card class="bg mb-5" >
-            <v-card v-for="item in cartBag" :key="item.slug">
+            
+        <div class="bg mb-5" >
+            <v-row>
+                <v-col v-for="item in cartBag" :key="item.slug" sm="6" lg="4" xl="3">
+                <v-card>
                 <div>
                     <div>
                         <v-avatar class="ma-3" size="125" tile>
@@ -11,38 +14,19 @@
 
                         <v-card-title class="text-h5" v-text="item.product.name"></v-card-title>
 
-                        <v-card-subtitle v-text="item.product.name"></v-card-subtitle>
-
-                        <!-- <v-card-actions>
-                  <v-btn
-                    v-if="item.artist === 'Ellie Goulding'"
-                    class="ml-2 mt-3"
-                    fab
-                    icon
-                    height="40px"
-                    right
-                    width="40px"
-                  >
-                    <v-icon>mdi-play</v-icon>
-                  </v-btn>
-
-                  <v-btn
-                    v-else
-                    class="ml-2 mt-5"
-                    outlined
-                    rounded
-                    big
-                  >
-                    বাদ
-                  </v-btn>
-                        </v-card-actions>-->
+                        <v-card-subtitle v-text="item.product.price"></v-card-subtitle>
+                        <v-btn @click="cartRemoveItem(item.product.slug)"> বাদ </v-btn>
                     </div>
                 </div>
-            </v-card>
+                </v-card>
+                </v-col>
+            </v-row>
+            
+            
             <div v-if="bagTotalPrice>0" >
                 <h2 > মোট {{bagTotalPrice}} /- টাকা</h2>
                 <v-btn @click="cartEmpty()">
-                    বাদ
+                   সব  বাদ
                 </v-btn>
                 <v-btn>
                     <nuxt-link to="/purchase">এগিয়ে যাই</nuxt-link>
@@ -51,7 +35,7 @@
             </div>
             
             <h2 v-else >  ব্যাগ ফাঁকা  </h2>
-        </v-card>
+        </div>
         <v-btn>
             <nuxt-link to="/">আরও কিনবো</nuxt-link>
         </v-btn>
@@ -115,6 +99,41 @@ export default {
         this.$router.go(0);
 
         
+        },
+        cartRemoveItem(itemslug) {
+        let cartData = {}
+        // alert(itemslug)
+        var json = localStorage.cart;
+        // var key = "foo";
+        // delete json[itemslug];
+        // localStorage.cart =json;
+        // localStorage.cart =  '[]';
+        // this.$forceUpdate();
+        try {
+            cartData = JSON.parse(json)
+        }
+        catch(err) {
+            console.log("unable to get local storage data")
+        }
+        console.log("final data",cartData, itemslug)
+
+        let index = cartData.findIndex(x => x.product.slug ===itemslug);
+        console.log("index:",index)
+        
+        // debugger
+        if(index>=0){
+            cartData.splice(index, 1);
+        } else {
+            console.log("unable to remove the cart: index, cart item not available", index, "final data:", cartData)
+            return
+        }
+        localStorage.cart =  JSON.stringify(cartData);
+        console.log("cartData:",cartData)
+        
+        
+        this.$router.go(0);
+
+        
         },
         calculateCart(){
             if (localStorage && localStorage.cart) {

pages/category/index.vue

@@ -0,0 +1,58 @@
+<template>
+<div>
+
+<center>
+    <h2>সব বিভাগ</h2>
+</center>
+    <v-row>
+      <v-col v-for="link in links" :key="link.id" sm="6" lg="4" xl="3">
+        <nuxt-link :to="`/${link.link}`">
+          <v-card class="mx-auto mb-1">
+            <v-img :src="`${link.img}`" aspect-ratio="1.2"></v-img>
+            <center>
+                <v-card-text>
+              <h2>{{ link.title }}</h2>
+            </v-card-text>
+            </center>
+            
+
+          </v-card>
+        </nuxt-link>
+      </v-col>
+    </v-row>
+</div>    
+</template>
+<script>
+export default {
+    data: () => ({
+        links: [
+            { img: '/images/service.jpeg', id:1, link: "/category/services", title: 'পরিসেবা ' },
+            { img: '/images/jewl.jpeg', id:2, link: "/category/jewlry", title: 'গয়না ' },
+            { img: '/images/cosm.jpeg', id:3, link: "/category/cosmetics", title: 'প্রসাধন  ' },
+            { img: '/images/veg.jpeg', id:4, link: "/category/vegetables", title: 'সবজি ' },
+            { img: '/images/fru.jpeg', id:5, link: "/category/fruits", title: 'ফল ' },
+            { img: '/images/dres.jpeg', id:6, link: "/category/cloths", title: 'পরিধান ' },
+            { img: '/images/gro.jpeg', id:7, link: "/category/grocery", title: 'মুদি ' },
+            { img: '/images/bag.jpeg', id:8, link: "/bag", title: 'ব্যাগ ' },
+
+        ],
+    }),
+    // mounted() {
+    //     /// Retrieves cart from local storage when user first loads
+
+    //     this.shoppingCart = JSON.parse(localStorage.getItem('shoppingCart') || "[]")
+
+    // },
+    // watch: {
+    //     shoppingCart: {
+    //         handler(newValue) {
+    //             /// Updates the item in local storage
+
+    //             localStorage.setItem(
+    //                 'shoppingCart', JSON.stringify(newValue));
+
+    //         }, deep: true
+    //     }
+    // }
+}
+</script>