tphilippot/shopify-storefront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product page and cart finished

Browse Source
This commit is contained in:
thomas
2020-02-25 20:14:23 +01:00
parent ef8c22855f
commit bbca265dea
12 changed files with 198 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/basket/index.vue
+61 -35
View File
@@ -1,46 +1,72 @@
<template>
<div>
<div class="columns">
<div v-if="checkout.lineItems.length === 0">
<div class="column">
<h1 class="is-size-1">
Panier
Empty Cart
</h1>
</div>
</div>
<div class="columns">
<div class="column">
<b-table :data="cart">
<template slot-scope="props">
<b-table-column field="image" label="Image">
<figure class="image is-96x96">
<img class="is-rounded" :src="props.row.images[0].src" :alt="props.row.description">
</figure>
</b-table-column>
<b-table-column field="title" label="Title">
<p class="title">{{ props.row.title }}</p>
</b-table-column>
<b-table-column field="description" label="Description">
<p class="subtitle">{{ props.row.description }}</p>
</b-table-column>
<b-table-column field="price" label="Price">
{{ props.row.variants[0].price }} €
</b-table-column>
<b-table-column field="quantity" label="Quantity">
{{ props.row.count }}
</b-table-column>
<b-table-column field="total" label="Total">
{{ getItemTotal(props.row) }} €
</b-table-column>
</template>
</b-table>
<div v-else>
<div class="columns">
<div class="column">
<h1 class="is-size-1">
Panier
</h1>
</div>
</div>
<div class="columns">
<div class="column">
<b-table :data="checkout.lineItems">
<template slot-scope="props">
<b-table-column field="image" label="Image">
<figure class="image is-96x96">
<img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
</figure>
</b-table-column>
<b-table-column field="title" label="Title">
<p class="title">
{{ props.row.title }}
</p>
</b-table-column>
<b-table-column field="price" label="Price">
{{ props.row.variant.price }}€
</b-table-column>
<b-table-column field="quantity" label="Quantity">
{{ props.row.quantity }}
</b-table-column>
<b-table-column field="total" label="Total">
{{ getItemTotal(props.row) }} €
</b-table-column>
<b-table-column field="delete" label="Delete">
<b-button
class="is-danger"
icon-left="delete"
@click="deleteItem(props.row.id)"
>
Delete
</b-button>
</b-table-column>
</template>
</b-table>
<div class="columns">
<div class="column">
</div>
<div class="column is-2 is-pulled-right">
<p class="subtitle">
Subtotal : {{ checkout.subtotalPrice }} €
</p>
</div>
</div>
</div>
</div>
<b-button
type="is-primary"
@click="confirmCheckout"
>
Checkout
</b-button>
</div>
<b-button
type="is-primary"
@click="confirmCheckout"
>
Checkout
</b-button>
</div>
</template>
@@ -55,7 +81,7 @@ export default {
window.open(this.$store.state.checkout.webUrl)
},
getItemTotal (item) {
return item.variants[0].price * item.count
return item.variant.price * item.quantity
}
}
}