Fix all known bugs with variable products

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -29,7 +29,7 @@ const CartItem = ({
         return;
       }
       // If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
-      const newQty = event.target.value ? parseInt(event.target.value) : 1;
+      const newQty = event.target.value ? parseInt(event.target.value, 10) : 1;
 
       // Set the new quantity in state.
       setProductCount(newQty);

components/Product/IndexProducts.component.jsx

@@ -11,6 +11,7 @@ import { filteredVariantPrice } from 'utils/functions/functions';
  * @param {Object} products
  */
 const IndexProducts = ({ products }) => {
+  console.log(products);
   return (
     <>
       <section className="container mx-auto bg-white">
@@ -26,6 +27,7 @@ const IndexProducts = ({ products }) => {
                 onSale,
                 slug,
                 image,
+                variations,
               }) => (
                 <div
                   key={uuidv4()}
@@ -72,11 +74,13 @@ const IndexProducts = ({ products }) => {
                   {onSale && (
                     <>
                       <div className="flex justify-center">
-                        <div className="pt-1 text-gray-900 line-through">
-                          {regularPrice}
+                        <div className="pt-1 text-gray-900">
+                          {variations && filteredVariantPrice(price)}
+                          {!variations && salePrice}
                         </div>
-                        <div className="pt-1 ml-2 text-gray-900">
-                          {filteredVariantPrice(salePrice)}
+                        <div className="pt-1 ml-2 text-gray-900 line-through">
+                          {variations && filteredVariantPrice(price, 'right')}
+                          {!variations && regularPrice}
                         </div>
                       </div>
                     </>

components/Product/SingleProduct.component.jsx

@@ -72,11 +72,14 @@ const SingleProduct = ({ product }) => {
               {onSale && (
                 <>
                   <div className="flex">
-                    <p className="pt-1 mt-4 text-3xl text-gray-900">                      
-                      {filteredVariantPrice(salePrice)}
+                    <p className="pt-1 mt-4 text-3xl text-gray-900">
+                      {product.variations && filteredVariantPrice(price)}
+                      {!product.variations && salePrice}
                     </p>
                     <p className="pt-1 pl-8 mt-4 text-2xl text-gray-900 line-through">
-                      {regularPrice}
+                      {product.variations &&
+                        filteredVariantPrice(price, 'right')}
+                      {!product.variations && regularPrice}
                     </p>
                   </div>
                 </>

utils/functions/functions.js

@@ -17,12 +17,15 @@ export const trimmedStringToLength = (string, length) => {
 };
 
 /**
- * Filter variant price. Changes from "kr198.00 - kr299.00" to kr299.00
+ * Filter variant price. Changes "kr198.00 - kr299.00" to kr299.00 or kr198 depending on the side variable
+ * @param {String} side Which side of the string to return (which side of the "-" symbol)
  * @param {String} price The inputted price that we need to convert
  */
-export const filteredVariantPrice = (price) => {
-  // Filter price from "kr198.00 - kr299.00" to kr299.00
-  return price.substring(price.length, price.indexOf('-')).replace('-', '');
+export const filteredVariantPrice = (price, side) => {
+  if ('right' === side) {
+    return price.substring(price.length, price.indexOf('-')).replace('-', '');
+  }
+  return price.substring(0, price.indexOf('-')).replace('-', '');
 };
 
 /**

utils/gql/GQL_QUERIES.js

@@ -126,6 +126,13 @@ export const FETCH_ALL_PRODUCTS_QUERY = gql`
           price
           regularPrice
           salePrice
+          variations {
+            nodes {
+              price
+              regularPrice
+              salePrice
+            }
+          }
         }
       }
     }