Add basic support for displaying variations

Author: w3bdesign

components/Product/SingleProduct.component.jsx

@@ -14,8 +14,8 @@ const SingleProduct = ({ product }) => {
     setIsLoading(false);
   }, []);
 
-  console.log("Product information: ");
-  console.log(product);
+  //console.log("Product information: ");
+  //console.log(product);
 
   const {
     description,
@@ -72,6 +72,27 @@ const SingleProduct = ({ product }) => {
               <p className="pt-1 mt-4 text-2xl text-gray-900">
                 {DESCRIPTION_WITHOUT_HTML}
               </p>
+
+              {product.variations && (
+                <p className="pt-1 mt-4 text-xl text-gray-900">
+                  <span className="py-2">Varianter</span>
+                  <select
+                    id="farge"
+                    className="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
+                  >
+                    {product.variations.nodes.map(({ id, name }) => {
+                      const filteredName = name.split('-').pop();
+
+                      return (
+                        <option key={id} value={filteredName}>
+                          {filteredName}
+                        </option>
+                      );
+                    })}
+                  </select>
+                </p>
+              )}
+
               {/*
               <p className="pt-1 mt-4 text-xl text-gray-900">
                 <span className="py-2">Farge</span>

utils/const/GQL_QUERIES.js

@@ -37,9 +37,12 @@ export const GET_SINGLE_PRODUCT = gql`
         nodes {
           id
           name
-          stockStatus
-          price
+          stockStatus          
           stockQuantity
+          purchasable
+          onSale
+          salePrice
+          regularPrice
         }
       }
       }