Got variations to work

Author: w3bdesign

components/Cart/AddToCartButton.vue

@@ -31,7 +31,7 @@ import ADD_TO_CART_MUTATION from '@/apollo/mutations/ADD_TO_CART_MUTATION'
 
 export default {
   props: {
-    product: { type: Object, required: true },
+    product: { type: [Number, Object], required: true },
   },
   data() {
     return {
@@ -52,7 +52,7 @@ export default {
             mutation: ADD_TO_CART_MUTATION,
             variables: { input: productQueryInput },
           })
-          .then(({ data }) => {
+          .then(() => {
             this.loading = false
             this.$apollo.queries.cart.refetch()
           })

components/Products/ShowSingleProduct.vue

@@ -12,7 +12,6 @@
             :alt="product.name"
             :src="product.image.sourceUrl"
           />
-
           <img
             v-else
             id="product-image"
@@ -44,16 +43,24 @@
               <span class="py-2">Varianter</span>
               <select
                 id="variant"
+                v-model="variationProduct"
                 name="variant"
                 class="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
               >
-                VARIATION
+                <option
+                  v-for="(variation, index) in product.variations.nodes"
+                  :key="variation.databaseId"
+                  :value="variation.databaseId"
+                  :selected="index === 0"
+                >
+                  {{ variation.name }}
+                </option>
               </select>
             </p>
             <div class="pt-1 mt-2">
               <CartAddToCartButton
                 v-if="product.variations"
-                :product="product"
+                :product="variationProduct"
               />
               <CartAddToCartButton v-else :product="product" />
             </div>
@@ -72,6 +79,16 @@ export default {
   props: {
     product: { type: Object, required: true },
   },
-  methods: { stripHTML, filteredVariantPrice },
+  data() {
+    return {
+      // Set default value
+      variationProduct: 18,
+    }
+  },
+
+  methods: {
+    stripHTML,
+    filteredVariantPrice,
+  },
 }
 </script>