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>
|
||||
<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 :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>
|
||||
<product :product="product" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '@/components/ui/Button';
|
||||
import store from '@/store'
|
||||
import Product from '@/components/ui/product';
|
||||
|
||||
export default {
|
||||
components: { Button },
|
||||
components: { Product },
|
||||
data() {
|
||||
return {
|
||||
color: Math.random() > 0.5 ? 'yellow' : 'blue',
|
||||
inStock: Math.random() > 0.5,
|
||||
product: null
|
||||
product: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -74,11 +25,6 @@ export default {
|
||||
.then(resp => resp.json())
|
||||
.then(product => this.product = product);
|
||||
},
|
||||
methods: {
|
||||
addToCart() {
|
||||
store.dispatch('cartModule/addItemToCart', { ...this.product });
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.querySelector('body').style.backgroundColor = '#19171A';
|
||||
}
|
||||
@@ -86,59 +32,4 @@ export default {
|
||||
</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%;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
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