Correctly show price on variable product on sale

Author: w3bdesign

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

@@ -24,7 +24,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 }}
@@ -65,13 +65,13 @@
 </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 },
+  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 }