feat: add product to cart from main page

static/components/customer-market/customer-market.html

@@ -28,7 +28,7 @@
   <q-infinite-scroll v-if="showProducts" @load="onLoad" :offset="250">
     <div class="row q-col-gutter-md">
       <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in partialProducts" :key="idx">
-        <product-card :product="item" @change-page="changePageM"></product-card>
+        <product-card :product="item" @change-page="changePageM" @add-to-cart="addToCart"></product-card>
       </div>
     </div>
     <template v-if="lastProductIndex < filteredProducts.length" v-slot:loading>

static/components/customer-market/customer-market.js

@@ -62,7 +62,9 @@ async function customerMarket(path) {
         this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
 
         setTimeout(() => { this.showProducts = true }, 0)
-        console.log('### xxx this.filteredProducts', this.lastProductIndex, this.filteredProducts)
+      },
+      addToCart(item) {
+        this.$emit('add-to-cart', item)
       },
       changePageM(page, opts) {
         this.$emit('change-page', page, opts)
@@ -109,7 +111,6 @@ async function customerMarket(path) {
     },
     created() {
       this.filteredProducts = [...this.products]
-      console.log('#### created  this.filteredProducts',  this.filteredProducts)
       this.lastProductIndex = Math.min(this.filteredProducts.length, 24)
       this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
     }

static/components/customer-stall/customer-stall.js

@@ -105,52 +105,6 @@ async function customerStall(path) {
       },
       addToCart(item) {
         this.$emit('add-to-cart', item)
-      //   console.log('### addToCart', item)
-      //   console.log('### this.cart.products', this.cart.products)
-      //   let prod = this.cart.products
-      //   if (prod.has(item.id)) {
-      //     let qty = prod.get(item.id).quantity
-      //     if (qty == item.quantity) {
-      //       this.$q.notify({
-      //         type: 'warning',
-      //         message: `${item.name} only has ${item.quantity} units!`,
-      //         icon: 'production_quantity_limits'
-      //       })
-      //       return
-      //     }
-      //     prod.set(item.id, {
-      //       ...prod.get(item.id),
-      //       quantity: qty + 1
-      //     })
-      //   } else {
-      //     prod.set(item.id, {
-      //       name: item.name,
-      //       quantity: 1,
-      //       price: item.price,
-      //       image: item?.images[0] || null
-      //     })
-      //   }
-      //   this.$q.notify({
-      //     type: 'positive',
-      //     message: `'${item.name}' added to cart`,
-      //     icon: 'thumb_up'
-      //   })
-      //   this.cart.products = prod
-      //   this.updateCart()
-      // },
-      // removeFromCart(item, del = false) {
-      //   let prod = this.cart.products
-      //   let qty = prod.get(item.id).quantity
-      //   if (qty == 1 || del) {
-      //     prod.delete(item.id)
-      //   } else {
-      //     prod.set(item.id, {
-      //       ...prod.get(item.id),
-      //       quantity: qty - 1
-      //     })
-      //   }
-      //   this.cart.products = prod
-      //   this.updateCart()
       },
       updateCart() {
         this.cart.total = 0

static/components/market-config/market-config.js

@@ -15,7 +15,6 @@ async function marketConfig(path) {
         },
         methods: {
             addMerchant: async function () {
-                console.log('### market config', this.merchants)
                 if (!isValidKey(this.inputPubkey, 'npub')) {
                     this.$q.notify({
                         message: 'Invalid Public Key!',

static/components/product-card/product-card.html

@@ -4,7 +4,7 @@
     alt="Product Image" loading="lazy" spinner-color="white" fit="contain" height="300px"></q-img>
 
   <q-card-section class="q-pb-xs q-pt-md">
-    <q-btn v-if="isStall" round :disabled="product.quantity < 1" color="primary" rounded icon="shopping_cart" size="lg" style="
+    <q-btn round :disabled="product.quantity < 1" color="primary" rounded icon="shopping_cart" size="lg" style="
         position: absolute;
         top: 0;
         right: 0;

static/js/market.js

@@ -605,6 +605,7 @@ const market = async () => {
       },
 
       addProductToCart(item) {
+        console.log('### addProductToCart', item)
         let stallCart = this.shoppingCarts.find(s => s.id === item.stall_id)
         if (!stallCart) {
           stallCart = {
@@ -624,6 +625,11 @@ const market = async () => {
         product.orderedQuantity = Math.min(product.quantity, item.orderedQuantity || (product.orderedQuantity + 1))
 
         this.$q.localStorage.set('nostrmarket.shoppingCarts', this.shoppingCarts)
+
+        this.$q.notify({
+          type: 'positive',
+          message: 'Product added to cart!'
+        })
       },
 
       removeProductFromCart(item) {

templates/nostrmarket/market.html

@@ -224,8 +224,9 @@
           :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
           :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"
           @login-dialog="openAccountDialog" @change-page="navigateTo" @add-to-cart="addProductToCart"></customer-stall>
-        <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="products" :search-text="searchText"
+        <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="products"
-          :styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market>
+          :search-text="searchText" :styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"
+          @add-to-cart="addProductToCart"></customer-market>
       </div>
       <div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
     </div>