mirror of
https://github.com/KevinMidboe/planetposen.git
synced 2025-10-29 17:50:32 +00:00
Product now fetches and passes to ui/product.
This commit is contained in:
@@ -1,64 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<main role="main" v-if="product">
|
<product :product="product" />
|
||||||
<div class="banner padding-bottom--lg" :class="'bg-' + color">
|
|
||||||
<div class="banner-content top-show-sm col-wrap max-width">
|
|
||||||
<h1>{{ product.name }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="product padding-top--lg">
|
|
||||||
<div class="max-width col-wrap">
|
|
||||||
<div class="col-6 image-preview">
|
|
||||||
<img :src="product.image" />
|
|
||||||
</div>
|
|
||||||
<div class="col-6 details">
|
|
||||||
<div class="pricing">
|
|
||||||
<span class="amount">24.99</span>
|
|
||||||
<span class="currency">kr</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="product.description">{{ product.description }}</p>
|
|
||||||
<p v-else class="description">Notatbøkene fra All Pine Press er trykket i Oslo og papir fra Hellefoss Paper AS i Hokksund. (Notatbøkene er uten linjer)</p>
|
|
||||||
|
|
||||||
<div class="stock" v-if="inStock">
|
|
||||||
<i class="icon icon--checkmark-circle"></i>
|
|
||||||
På lager
|
|
||||||
</div>
|
|
||||||
<div class="stock soldOut" v-else>
|
|
||||||
<i class="icon icon--close-circle"></i>
|
|
||||||
Utsolgt
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="actions">
|
|
||||||
<!-- Variation picker -->
|
|
||||||
|
|
||||||
<!-- Amount picker -->
|
|
||||||
<!-- Buy button -->
|
|
||||||
<Button color="black" :small="true" @click="addToCart" :scaleRotate="true">Add to cart</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="meta">
|
|
||||||
<span class="categories">
|
|
||||||
Kategorier:
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Button from '@/components/ui/Button';
|
import Product from '@/components/ui/product';
|
||||||
import store from '@/store'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Button },
|
components: { Product },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
color: Math.random() > 0.5 ? 'yellow' : 'blue',
|
product: null,
|
||||||
inStock: Math.random() > 0.5,
|
|
||||||
product: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -74,11 +25,6 @@ export default {
|
|||||||
.then(resp => resp.json())
|
.then(resp => resp.json())
|
||||||
.then(product => this.product = product);
|
.then(product => this.product = product);
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
addToCart() {
|
|
||||||
store.dispatch('cartModule/addItemToCart', { ...this.product });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
document.querySelector('body').style.backgroundColor = '#19171A';
|
document.querySelector('body').style.backgroundColor = '#19171A';
|
||||||
}
|
}
|
||||||
@@ -86,59 +32,4 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '/frontend//styles/spacing';
|
|
||||||
@import '/frontend//styles/variables';
|
|
||||||
|
|
||||||
main {
|
|
||||||
color: var(--color-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
section.product {
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
.col-6 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-preview img {
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
margin-top: 1rem;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
|
|
||||||
> div, > p {
|
|
||||||
margin-bottom: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock {
|
|
||||||
padding: 1rem;
|
|
||||||
border: 4px solid var(--color-green);
|
|
||||||
width: max-content;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
left: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.soldOut {
|
|
||||||
border-color: var(--color-pink);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
177
frontend/components/ui/product.vue
Normal file
177
frontend/components/ui/product.vue
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<main role="main" v-if="product">
|
||||||
|
<div class="banner padding-bottom--lg" :class="'bg-' + color">
|
||||||
|
<div class="banner-content top-show-sm col-wrap max-width">
|
||||||
|
<h1>{{ product.name }}</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="product padding-top--lg">
|
||||||
|
<div class="max-width col-wrap">
|
||||||
|
<div class="col-6 image-preview">
|
||||||
|
<img v-if="product.image" :src="product.image" />
|
||||||
|
<div v-else role="image" aria-label="no image" class="image-placeholder" ref="placeholder">
|
||||||
|
<h3>(no image)</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 details">
|
||||||
|
<div class="pricing">
|
||||||
|
<span :class="{ sale: selectedVariation.discount }">24.99 kr</span>
|
||||||
|
<span v-if="selectedVariation.discount">19.99 kr</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p v-if="product.description">{{ product.description }}</p>
|
||||||
|
<p v-else class="description">Notatbøkene fra All Pine Press er trykket i Oslo og papir fra Hellefoss Paper AS i Hokksund. (Notatbøkene er uten linjer)</p>
|
||||||
|
|
||||||
|
<div class="stock" v-if="inStock">
|
||||||
|
<i class="icon icon--checkmark-circle"></i>
|
||||||
|
På lager
|
||||||
|
</div>
|
||||||
|
<div class="stock soldOut" v-else>
|
||||||
|
<i class="icon icon--close-circle"></i>
|
||||||
|
Utsolgt
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<!-- Variation picker -->
|
||||||
|
|
||||||
|
<!-- Amount picker -->
|
||||||
|
<!-- Buy button -->
|
||||||
|
<Button color="black" :small="true" @click="addToCart" :scaleRotate="true">Add to cart</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="meta">
|
||||||
|
<span class="categories">
|
||||||
|
Kategorier:
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Button from '@/components/ui/Button';
|
||||||
|
import store from '@/store'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Button },
|
||||||
|
props: {
|
||||||
|
product: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
placeholderWidth: '0px',
|
||||||
|
color: Math.random() > 0.5 ? 'yellow' : 'blue',
|
||||||
|
inStock: Math.random() > 0.5,
|
||||||
|
selectedVariation: { discount: Math.random() > 0.5 ? true : false }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
setTimeout(this.squareImagePlaceholder, 10);
|
||||||
|
},
|
||||||
|
// TODO remove
|
||||||
|
watch: {
|
||||||
|
product: {
|
||||||
|
deep: true,
|
||||||
|
handler(newVal) {
|
||||||
|
if (this.product.color)
|
||||||
|
this.color = this.product.color;
|
||||||
|
if (newVal.image == '')
|
||||||
|
setTimeout(this.squareImagePlaceholder, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addToCart() {
|
||||||
|
store.dispatch('cartModule/addItemToCart', { ...this.product });
|
||||||
|
},
|
||||||
|
squareImagePlaceholder() {
|
||||||
|
const { placeholder } = this.$refs;
|
||||||
|
if (placeholder)
|
||||||
|
placeholder.style.height = placeholder.clientWidth + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '/frontend//styles/spacing';
|
||||||
|
@import '/frontend//styles/variables';
|
||||||
|
|
||||||
|
main {
|
||||||
|
color: var(--color-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
section.product {
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
.col-6 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview img {
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image-preview .image-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid var(--color-background);
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
|
||||||
|
> div, > p {
|
||||||
|
margin-bottom: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock {
|
||||||
|
padding: 1rem;
|
||||||
|
border: 4px solid var(--color-green);
|
||||||
|
width: max-content;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.soldOut {
|
||||||
|
border-color: var(--color-pink);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing {
|
||||||
|
font-size: 2rem;
|
||||||
|
|
||||||
|
& .sale {
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user