Quantity picker for product page.

frontend/components/ui/product.vue

@@ -8,13 +8,16 @@
 
     <section class="product padding-top--lg">
       <div class="max-width col-wrap">
+        <!-- image -->
         <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">
+          <!-- pricing -->
           <div class="pricing">
             <span :class="{ sale: selectedVariation.discount }">
               {{ selectedVariation.price }} kr
@@ -23,9 +26,11 @@
               {{ selectedVariation.discount }} kr</span>
           </div>
 
+          <!-- description -->
           <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>
 
+          <!-- in-stock -->
           <div class="stock" v-if="selectedVariation.stock > 0">
             <i class="icon icon--checkmark-circle"></i>
             På lager
@@ -35,23 +40,22 @@
             Utsolgt
           </div>
 
-          <div class="actions">
+
           <!-- Variation picker -->
           Size:
           <size-picker class="variationPicker" :sizes="availableSizes"
                        @selectedSize="sizeSelected" :sizeVariable="selectedVariation.size" />
 
-          <!-- Amount picker -->
+          <!-- Quantity picker -->
-
           <div v-if="selectedVariation.stock > 0">
             Quantity:
-              <input type="number" value="1" min="1" :max="selectedVariation.stock" />
+            <quantity-picker :max="selectedVariation.stock" />
           </div>
+
           <!-- Buy button -->
+          <Button color="green" :small="true" @click="addToCart" :scaleRotate="true" :disabled="selectedVariation.stock == 0">Add to cart</Button>
 
-            <Button color="black" :small="true" @click="addToCart" :scaleRotate="true" :disabled="selectedVariation.stock == 0">Add to cart</Button>
+          <!-- meta -->
-          </div>
-
           <div class="meta">
             <span class="categories">
               Kategorier:
@@ -66,10 +70,11 @@
 <script>
 import Button from '@/components/ui/Button';
 import SizePicker from '@/components/ui/sizePicker';
+import QuantityPicker from '@/components/ui/quantityPicker';
 import store from '@/store'
 
 export default {
-  components: { Button, SizePicker },
+  components: { Button, SizePicker, QuantityPicker },
   props: {
     product: {
       type: Object,
@@ -173,7 +178,7 @@ h1 {
   margin-top: 1rem;
   font-size: 1.3rem;
 
-  > div, > p {
+  > * {
     margin-bottom: 2.25rem;
   }
 
@@ -203,10 +208,6 @@ h1 {
   }
 }
 
-button {
-  margin-top: 1rem;
-}
-
 .variationPicker {
   margin-bottom: 1rem;
 }

frontend/components/ui/quantityPicker.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="quantity-picker noSelect">
+    <span tabindex="0" class="button"
+          @click="decrement" @keyup.enter="decrement">-</span>
+    <div class="display">{{ quantity }}</div>
+    <span tabindex="0" class="button"
+          @click="increment" @keyup.enter="increment">+</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    max: {
+      type: String,
+      required: true
+    }
+  },
+  watch: {
+    quantity(val) {
+      if (val <= 0)
+        this.quantity = 0;
+      else if (val >= this.max)
+        this.quantity = this.max;
+    }
+  },
+  data() {
+    return {
+      quantity: 1
+    }
+  },
+  methods: {
+    decrement() {
+      this.quantity = this.quantity - 1;
+    },
+    increment() {
+      this.quantity = this.quantity + 1;
+    }
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.quantity-picker {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: max-content;
+  height: 3rem;
+  border: 3px solid gray;
+  font-size: 2rem;
+
+  .button {
+    width: 3rem;
+    height: 3rem;
+    border: unset;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      border: 3px solid black;
+      margin-left: -3px;
+      margin-right: -3px;
+    }
+  }
+ 
+  .display {
+    display: flex;
+    justify-content: center;
+    width: 3rem;
+  }
+}
+</style>