Product now fetches and passes to ui/product.

frontend/components/ui/product.vue

@@ -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>