We can now purchase variations

Now we just need to display the variation in the cart

Author: w3bdesign

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,6 +10,11 @@ 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);
   }, []);
@@ -77,44 +82,29 @@ const SingleProduct = ({ product }) => {
                 <p className="pt-1 mt-4 text-xl text-gray-900">
                   <span className="py-2">Varianter</span>
                   <select
-                    id="farge"
+                    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 }) => {
-                      const filteredName = name.split('-').pop();
+                    {product.variations.nodes.map(
+                      ({ id, name, variationId }) => {
+                        const filteredName = name.split('- ').pop();
 
-                      return (
-                        <option key={id} value={filteredName}>
-                          {filteredName}
-                        </option>
-                      );
-                    })}
+                        return (
+                          <option key={id} value={variationId}>
+                            {filteredName}
+                          </option>
+                        );
+                      }
+                    )}
                   </select>
                 </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>
-              */}
               <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

@@ -36,13 +36,14 @@ export const GET_SINGLE_PRODUCT = gql`
         variations {
         nodes {
           id
+          variationId
           name
           stockStatus          
           stockQuantity
           purchasable
           onSale
           salePrice
-          regularPrice
+          regularPrice          
         }
       }
       }