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
}
}
}
pages/index.vue
+6 -4
View File
@@ -10,10 +10,12 @@ export default {
const products = await $shopify.product.fetchAll()
return { products }
},
created () {
this.$shopify.checkout.create().then((checkout) => {
this.$store.commit('setCheckout', checkout)
})
beforeUpdate () {
if (typeof this.$store.state.checkout.id === 'undefined') {
this.$shopify.checkout.create().then((checkout) => {
this.$store.commit('setCheckout', checkout)
})
}
}
}
</script>
pages/products/_handle/index.vue
+81 -11
View File
@@ -1,14 +1,78 @@
<template>
<div>
<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<b-button
icon-left="cart"
class="mx-2"
@click="addToCart(product, checkout)"
>
Ajouter
</b-button>
<div class="columns">
<div class="column is-4">
<b-carousel :indicator-inside="false">
<b-carousel-item
v-for="(image, index) in product.images"
:key="index"
>
<span class="image">
<img
:src="image.src"
style="max-width: 25rem"
:alt="product.description"
>
</span>
</b-carousel-item>
<template slot="indicators" slot-scope="props">
<span class="al image">
<img
:src="product.images[props.i].src"
:alt="product.description"
style="max-width: 5rem"
>
</span>
</template>
</b-carousel>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="columns">
<div class="column">
<h1 class="title">
{{ product.title }}
</h1>
</div>
</div>
<div class="columns">
<div class="column">
<p class="subtitle">
{{ product.description }}
</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="is-size-3">
{{ product.variants[0].price }} €
</p>
</div>
</div>
<div class="columns">
<div class="column is-1">
<p>Quantity</p>
</div>
<div class="column is-3">
<b-numberinput
v-model.number="quantity"
/>
</div>
<div class="column is-7">
<b-button
icon-left="cart"
class="mx-2"
@click="addToCart(product.variants[0].id, quantity)"
>
Ajouter
</b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -26,12 +90,18 @@ export default {
},
data () {
return {
product: {}
product: {},
quantity: 1
}
}
}
</script>
<style scoped>
.is-active .al img {
filter: grayscale(0%);
}
.al img {
filter: grayscale(100%);
}
</style>
pages/products/index.vue
+2 -2
View File
@@ -25,12 +25,12 @@
:to="'/products/' + product.handle"
type="is-primary"
>
Voir
See
</b-button>
<b-button
type="is-primary"
icon-left="cart"
@click="addToCart(product, checkout)"
@click="addToCart(product.variants[0].id, 1)"
>
Buy
</b-button>