Support for variable products

README.md

@@ -72,7 +72,7 @@ The current release has been tested and is confirmed working with the following
 -   Vue Apollo with GraphQL Codegen
 -   Vue Awesome Swiper for image slider on frontpage
 -   Responsive design
--   Support for simple products
+-   Support for simple and variable products
 -   GraphQL-based filters
 -   CSS animations and transitions
 -   Form handling and validation with Vue Formulate
@@ -91,6 +91,5 @@ Check the attributes of the products. Right now the application requires Size an
 
 ## TODO
 
--   Look into variable product support
 -   Make WooCommerce session token expire and get deleted after 24 hours
 -   Make Algolia look good on mobile

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/ShowAllProducts.vue

@@ -32,7 +32,7 @@
                 {{ product.regularPrice }}
               </div>
               <div class="ml-4 text-xl text-gray-900">
-                {{ product.salePrice }}
+                {{ filteredVariantPrice(product.salePrice) }}
               </div>
             </div>
             <div v-else>
@@ -48,17 +48,21 @@
 </template>
 
 <script>
+import { filteredVariantPrice } from '@/utils/functions'
+
 export default {
   name: 'ShowAllProducts',
   props: {
     products: { type: Array, required: true },
   },
+
   methods: {
     productImage(product) {
       return product.image
         ? product.image.sourceUrl
         : process.env.placeholderSmallImage
     },
+    filteredVariantPrice,
   },
 }
 </script>

components/Products/ShowSingleProduct.vue

@@ -12,7 +12,6 @@
             :alt="product.name"
             :src="product.image.sourceUrl"
           />
-
           <img
             v-else
             id="product-image"
@@ -24,7 +23,7 @@
             <p class="text-3xl font-bold text-left">{{ product.name }}</p>
             <div v-if="product.onSale" class="flex">
               <p class="pt-1 mt-4 text-3xl text-gray-900">
-                {{ product.salePrice }}
+                {{ filteredVariantPrice(product.salePrice) }}
               </p>
               <p class="pt-1 pl-8 mt-4 text-2xl text-gray-900 line-through">
                 {{ product.regularPrice }}
@@ -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>
@@ -65,13 +72,23 @@
 </template>
 
 <script>
-import { stripHTML } from '@/utils/functions'
+import { stripHTML, filteredVariantPrice } from '@/utils/functions'
 
 export default {
   name: 'ShowSingleProduct',
   props: {
     product: { type: Object, required: true },
   },
-  methods: { stripHTML },
+  data() {
+    return {
+      // Set default value
+      variationProduct: 18,
+    }
+  },
+
+  methods: {
+    stripHTML,
+    filteredVariantPrice,
+  },
 }
 </script>

utils/functions.js

@@ -4,6 +4,11 @@ function stripHTML(description) {
   return description.replace(/(<([^>]+)>)/gi, '')
 }
 
+function filteredVariantPrice(price) {
+  // Filter price from "kr198.00 - kr299.00" to kr299.00
+  return price.substring(price.length, price.indexOf('-')).replace('-', '')
+}
+
 function createCheckoutData(form) {
   const checkoutData = {
     clientMutationId: uid(),
@@ -42,4 +47,4 @@ function createCheckoutData(form) {
   return { checkoutData }
 }
 
-export { stripHTML, createCheckoutData }
+export { stripHTML, createCheckoutData, filteredVariantPrice }