feat: basic stopping card list

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

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

static/components/shopping-cart-list/shopping-cart-list.html

@@ -1,3 +1,54 @@
 <div>
-  xxxx
+  <div v-for="cart in carts">
+
+    <q-card bordered class="q-mb-md">
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar>
+            <img v-if="cart.merchant?.profile?.picture" :src="cart.merchant?.profile?.picture">
+            <img v-else src="/nostrmarket/static/images/blank-avatar.webp">
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>
+            <strong>
+              <span v-text="cart.products[0]?.stallName"></span>
+            </strong>
+          </q-item-label>
+          <q-item-label caption>
+            By <span v-text="cart.merchant?.profile?.name || cart.merchant?.publicKey"></span>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+
+      <q-separator />
+
+      <q-card-section horizontal>
+        <q-card-section>
+        </q-card-section>
+
+        <q-separator vertical />
+
+        <q-card-section class="col-10">
+          <div v-for="product in cart.products">
+            {{product.name}}
+          </div>
+        </q-card-section>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn flat round icon="event" />
+        <q-btn flat>
+          7:30PM
+        </q-btn>
+        <q-btn flat color="primary">
+          Proceed to Checkout
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+
+  </div>
+
 </div>

static/js/market.js

@@ -128,6 +128,7 @@ const market = async () => {
     },
     async created() {
       this.merchants = this.$q.localStorage.getItem('nostrmarket.merchants') || []
+      this.shoppingCarts = this.$q.localStorage.getItem('nostrmarket.shoppingCarts') || []
 
       // Check for user stored
       this.account = this.$q.localStorage.getItem('diagonAlley.account') || null
@@ -460,7 +461,7 @@ const market = async () => {
         } else {
           this.activeStall = null
           this.activeProduct = null
-          
+
           url.searchParams.delete('merchant_pubkey')
           url.searchParams.delete('stall_id')
           url.searchParams.delete('product_id')
@@ -542,7 +543,7 @@ const market = async () => {
         this.initNostr()
       },
 
-      setActivePage(page = 'market'){
+      setActivePage(page = 'market') {
         this.activePage = page
       },
 
@@ -563,7 +564,32 @@ const market = async () => {
         this.products = this.products.filter(p => p.pubkey !== publicKey)
         this.stalls = this.stalls.filter(p => p.pubkey !== publicKey)
         this.initNostr() // todo: improve
+      },
+
+      addProductToCart(item) {
+        console.log('### addProductToCart:', item)
+
+        let stallCart = this.shoppingCarts.find(s => s.id === item.stall_id)
+        if (!stallCart) {
+          stallCart = {
+            id: item.stall_id,
+            products: []
+          }
+          this.shoppingCarts.push(stallCart)
+        }
+        stallCart.merchant = this.merchants.find(m => m.publicKey === item.pubkey)
+
+        const product = stallCart.products.find(p => p.id === item.id)
+        if (product) {
+          product.orderedQuantity = item.orderedQuantity || (product.orderedQuantity + 1)
+        } else {
+          stallCart.products.push({ ...item, orderedQuantity: 1 })
+        }
+
+        this.$q.localStorage.set('nostrmarket.shoppingCarts', this.shoppingCarts)
+        console.log('### this.shoppingCarts', this.shoppingCarts)
       }
+
     }
   })
 }

templates/nostrmarket/market.html

@@ -209,7 +209,7 @@
         <customer-stall v-else-if="!isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
           :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"></customer-stall>
+          @login-dialog="openAccountDialog" @change-page="navigateTo" @add-to-cart="addProductToCart"></customer-stall>
         <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts"
           :styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market>
       </div>