add remove product and reset cart buttons

This commit is contained in:
Tiago Vasconcelos 2022-12-30 10:30:29 +00:00
parent 0fdc13666f
commit 0b9672076d

View file

@ -27,10 +27,10 @@
{{ cart.size }} {{ cart.size }}
</q-badge> </q-badge>
{% endraw %} {% endraw %}
<q-menu auto-close v-if="cart.size"> <q-menu v-if="cart.size">
<q-list style="min-width: 100px"> <q-list style="min-width: 100px">
{% raw %} {% raw %}
<q-item clickable :key="p.id" v-for="p in cartMenu"> <q-item :key="p.id" v-for="p in cartMenu">
<q-item-section side> <q-item-section side>
<span>{{p.quantity}} x </span> <span>{{p.quantity}} x </span>
</q-item-section> </q-item-section>
@ -50,20 +50,35 @@
<q-item-section side> <q-item-section side>
<span> <span>
{{unit != 'sat' ? getAmountFormated(p.price) : p.price + {{unit != 'sat' ? getAmountFormated(p.price) : p.price +
'sats'}}</span 'sats'}}
> <q-btn
class="q-ml-md"
round
color="red"
size="xs"
icon="close"
@click="removeFromCart(p)"
/>
</span>
</q-item-section> </q-item-section>
</q-item> </q-item>
{% endraw %} {% endraw %}
<q-separator /> <q-separator />
</q-list> </q-list>
<div class="q-pa-md q-gutter-md"> <div class="row q-pa-md q-gutter-md">
<q-btn <q-btn
color="primary" color="primary"
icon-right="checkout" icon-right="checkout"
label="Checkout" label="Checkout"
@click="checkoutDialog.show = true" @click="checkoutDialog.show = true"
/> ></q-btn>
<q-btn
class="q-ml-lg"
flat
color="primary"
label="Reset"
@click="resetCart"
/></q-btn>
</div> </div>
</q-menu> </q-menu>
</q-btn> </q-btn>
@ -397,13 +412,23 @@
this.cart.products = prod this.cart.products = prod
this.updateCart(+item.price) this.updateCart(+item.price)
}, },
removeFromCart() {}, removeFromCart(item) {
updateCart(price) { this.cart.products.delete(item.id)
this.cart.total += price this.updateCart(+item.price, true)
this.cart.size++ },
updateCart(price, del = false) {
console.log(this.cart, this.cartMenu)
if (del) {
this.cart.total -= price
this.cart.size--
} else {
this.cart.total += price
this.cart.size++
}
this.cartMenu = Array.from(this.cart.products, item => { this.cartMenu = Array.from(this.cart.products, item => {
return {id: item[0], ...item[1]} return {id: item[0], ...item[1]}
}) })
console.log(this.cart, this.cartMenu)
}, },
getPubkey() { getPubkey() {
let data = this.$q.localStorage.getItem(`lnbits.shop.data`) let data = this.$q.localStorage.getItem(`lnbits.shop.data`)
@ -503,8 +528,4 @@
} }
}) })
</script> </script>
<style scoped>
.card--product {
}
</style>
{% endblock %} {% endblock %}