lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: add shipping cost to cart

Browse source
This commit is contained in:
Vlad Stan 2023-07-07 15:02:51 +03:00
parent 761a3137a6
commit 303afcfab4
4 changed files with 46 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

62
static/components/shopping-cart-checkout/shopping-cart-checkout.html
View file

@ -32,11 +32,10 @@
<strong>Subtotal:</strong>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<strong>{{formatCurrency(cartTotal, stall.currency)}}</strong>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<strong>{{formatCurrency(cartTotal,
cart.products[0]?.currency)}}</strong>
</div>
</div>
<div class="row q-mt-md">
@ -44,11 +43,21 @@
<strong>Shipping:</strong>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<strong v-if="shippingZone">{{formatCurrency(shippingZone.cost, stall.currency)}}</strong>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<strong>00.00</strong>
<q-btn-dropdown unelevated color="secondary" rounded :label="shippingZoneLabel">
<q-item v-for="zone of stall.shipping" @click="selectShippingZone(zone)" :key="zone.id"
clickable v-close-popup>
<q-item-section>
<q-item-label><span v-text="zone.name"></span></q-item-label>
<q-item-label caption><span
v-text="zone.countries?.join(', ')"></span></q-item-label>
</q-item-section>
</q-item>
</q-btn-dropdown>
</div>
</div>
<q-separator class="q-mt-sm" />
<div class="row q-mt-md">
@ -56,51 +65,12 @@
<strong>Total:</strong>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<strong>{{formatCurrency(cartTotalWithShipping, stall.currency)}}</strong>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<strong>00.00</strong>
</div>
</div>
<!-- <q-item>
<q-item-section>
<q-item-label>
<strong>Subtotal:</strong>
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label> <strong>{{formatCurrency(cartTotal,
cart.products[0]?.currency)}}</strong></q-item-label>
</q-item-section>
<q-item-section>
<q-item-label> xx</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label>
<strong>Shipping:</strong>
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label> 0.00</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label> xx</q-item-label>
</q-item-section>
</q-item>
<q-separator />
<q-item>
<q-item-section>
<q-item-label>
<strong>Total:</strong>
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label> </q-item-label>
</q-item-section>
</q-item> -->
</q-card-section>

25
static/components/shopping-cart-checkout/shopping-cart-checkout.js
View file

@ -5,10 +5,11 @@ async function shoppingCartCheckout(path) {
name: 'shopping-cart-checkout',
template,
props: ['cart'],
props: ['cart', 'stall'],
data: function () {
return {
paymentMethod: 'ln',
shippingZone: null,
paymentOptions: [
{
label: 'Lightning Network',
@ -30,17 +31,37 @@ async function shoppingCartCheckout(path) {
if (!this.cart.products?.length) return 0
return this.cart.products.reduce((t, p) => p.price + t, 0)
},
cartTotalWithShipping() {
if (!this.shippingZone) return this.cartTotal
return this.cartTotal + this.shippingZone.cost
},
shippingZoneLabel() {
if (!this.shippingZone) {
return 'Shipping Zone'
}
const zoneName = this.shippingZone.name.substring(0, 10)
if (this.shippingZone?.name.length < 10) {
return zoneName
}
return zoneName + '...'
}
},
methods: {
formatCurrency: function (value, unit) {
return formatCurrency(value, unit)
},
selectShippingZone: function (zone) {
this.shippingZone = zone
},
requestInvoice: function () {
}
},
created() {
console.log('### shoppingCartCheckout', this.cart)
console.log('### shoppingCartCheckout', this.stall)
if (this.stall.shipping?.length === 1) {
this.shippingZone = this.stall.shipping[0]
}
}
})
}

8
static/js/market.js
View file

@ -53,7 +53,8 @@ const market = async () => {
merchants: [],
shoppingCarts: [],
shoppingCartCheckout: null,
checkoutCart: null,
checkoutStall: null,
activePage: 'market',
@ -611,8 +612,9 @@ const market = async () => {
this.$q.localStorage.set('nostrmarket.shoppingCarts', this.shoppingCarts)
},
checkoutCart(cart) {
this.shoppingCartCheckout = cart
checkoutStallCart(cart) {
this.checkoutCart = cart
this.checkoutStall = this.stalls.find(s => s.id === cart.id)
this.setActivePage('shopping-cart-checkout')
}

4
templates/nostrmarket/market.html
View file

@ -212,9 +212,9 @@
@remove-merchant="removeMerchant"></market-config>
<shopping-cart-list v-else-if="activePage === 'shopping-cart-list'" :carts="shoppingCarts"
@add-to-cart="addProductToCart" @remove-from-cart="removeProductFromCart" @remove-cart="removeCart"
@checkout-cart="checkoutCart"></shopping-cart-list>
@checkout-cart="checkoutStallCart"></shopping-cart-list>
<shopping-cart-checkout v-else-if="activePage === 'shopping-cart-checkout'"
:cart="shoppingCartCheckout"></shopping-cart-checkout>
:cart="checkoutCart" :stall="checkoutStall"></shopping-cart-checkout>
<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 ?? {}"