product page and cart finished

pages/products/_handle/index.vue

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

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