Merge pull request #193 from w3bdesign/development

Remove item from TODO list

Author: w3bdesign

README.md

@@ -43,7 +43,6 @@
 
 ## TODO
 
-- Make search results from Algolia clickable
 - Add support for variable products / product variations
 - Hide products not in stock
 - Add better SEO

components/Cart/AddToCartButton.component.jsx

@@ -9,13 +9,8 @@ import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
 import { ADD_TO_CART } from 'utils/const/GQL_MUTATIONS';
-import { WOO_CONFIG } from 'utils/config/nextConfig';
 
-import {
-  getFormattedCart,
-  getUpdatedItems,
-  removeItemFromCart,
-} from 'utils/functions/functions';
+import { getFormattedCart } from 'utils/functions/functions';
 
 /**
  * Display and process product object when we click on the Add To Cart button
@@ -25,14 +20,17 @@ import {
 const AddToCartButton = (props) => {
   const [cart, setCart] = useContext(AppContext);
   const [requestError, setRequestError] = useState(null);
-  const [showViewCart, setShowViewCart] = useState(false);  
-  const [showAddToCart, setshowAddToCart] = useState(false);  
+  const [showViewCart, setShowViewCart] = useState(false);
+  const [showAddToCart, setshowAddToCart] = useState(false);
 
   const product = props.product;
 
+  console.log(props);
+
   const productQueryInput = {
     clientMutationId: uuidv4(), // Generate a unique id.
-    productId: product.productId,
+    //productId: product.productId,
+    productId: product
   };
 
   // Get Cart Data.
@@ -64,8 +62,7 @@ const AddToCartButton = (props) => {
       refetch();
       // Show View Cart Button
       setShowViewCart(true);
-      setshowAddToCart(true)
-     
+      setshowAddToCart(true);
     },
     onError: (error) => {
       if (error) {
@@ -86,7 +83,8 @@ const AddToCartButton = (props) => {
       <button
         onClick={handleAddToCartClick}
         className={`px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400 ${
-          addToCartLoading && `animate__animated animate__fadeOutUp`} ${showAddToCart && `animate__animated animate__fadeInDown` }`}
+          addToCartLoading && `animate__animated animate__fadeOutUp`
+        } ${showAddToCart && `animate__animated animate__fadeInDown`}`}
       >
         KJØP
       </button>

components/Product/SingleProduct.component.jsx

@@ -10,10 +10,18 @@ import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
  */
 const SingleProduct = ({ product }) => {
   const [isLoading, setIsLoading] = useState(true);
+  // Set first variation as default selected variant
+  const [selectedVariation, setselectedVariation] = useState(
+    product.variations.nodes[0].variationId
+  );
+
   useEffect(() => {
     setIsLoading(false);
   }, []);
 
+  //console.log("Product information: ");
+  //console.log(product);
+
   const {
     description,
     image,
@@ -69,28 +77,34 @@ const SingleProduct = ({ product }) => {
               <p className="pt-1 mt-4 text-2xl text-gray-900">
                 {DESCRIPTION_WITHOUT_HTML}
               </p>
-              {/*
-              <p className="pt-1 mt-4 text-xl text-gray-900">
-                <span className="py-2">Farge</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"
-                >
-                  <option value="sort">Blå</option>
-                </select>
-              </p>
-              <p className="pt-1 mt-2 text-xl text-gray-900 ">
-                <span className="py-2">Størrelse</span>
-                <select
-                  id="størrelse"
-                  className="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
-                >
-                  <option value="sort">Large</option>
-                </select>
-              </p>
-              */}
+
+              {product.variations && (
+                <p className="pt-1 mt-4 text-xl text-gray-900">
+                  <span className="py-2">Varianter</span>
+                  <select
+                    id="variant"
+                    name="variant"
+                    className="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
+                    onChange={(e) => {setselectedVariation(e.target.value)}}
+                  >
+                    {product.variations.nodes.map(
+                      ({ id, name, variationId }) => {
+                        const filteredName = name.split('- ').pop();
+
+                        return (
+                          <option key={id} value={variationId}>
+                            {filteredName}
+                          </option>
+                        );
+                      }
+                    )}
+                  </select>
+                </p>
+              )}
+
               <div className="pt-1 mt-2">
-                <AddToCartButton product={product} />
+                {!product.variations && <AddToCartButton product={product} />}
+                {product.variations && <AddToCartButton product={selectedVariation} />}
               </div>
             </div>
           </div>

utils/const/GQL_QUERIES.js

@@ -23,6 +23,29 @@ export const GET_SINGLE_PRODUCT = gql`
       ... on VariableProduct {
         price
         id
+        paColors {
+          nodes {
+            name
+          }
+        }
+        paSizes {
+          nodes {
+            name
+          }
+        }
+        variations {
+        nodes {
+          id
+          variationId
+          name
+          stockStatus          
+          stockQuantity
+          purchasable
+          onSale
+          salePrice
+          regularPrice          
+        }
+      }
       }
       ... on ExternalProduct {
         price