Merge pull request #272 from hyva-themes/216/configurable-options

#216 configurable options

src/reactapp/src/api/cart/fetchGuestCart/modifier.js

@@ -11,20 +11,37 @@ import { modifyBillingAddressData } from '../setBillingAddress/modifier';
 
 function modifyCartItemsData(cartItems) {
   return cartItems.reduce((accumulator, item) => {
-    const { id, quantity, prices, product } = item;
-    const priceAmount = _get(prices, 'price.value');
+    const { id, quantity, prices, product, product_type: productType } = item;
+    const priceAmount = _get(prices, 'price_incl_tax.value');
     const price = formatPrice(priceAmount);
-    const rowTotalAmount = _get(prices, 'row_total.value');
+    const rowTotalAmount = _get(prices, 'row_total_incl_tax.value');
     const rowTotal = formatPrice(rowTotalAmount);
     const productId = _get(product, 'id');
     const productSku = _get(product, 'sku');
     const productName = _get(product, 'name');
     const productUrl = _get(product, 'url_key');
     const productSmallImgUrl = _get(product, 'small_image.url');
+    const selectedConfigOptions = (
+      _get(item, 'configurable_options') || []
+    ).map((configOption) => {
+      const {
+        id: optionId,
+        value_label: value,
+        option_label: option,
+      } = configOption;
+      return {
+        optionId,
+        value,
+        option,
+        label: `${option}: ${value}`,
+      };
+    });
 
     accumulator[id] = {
       id,
+      productType,
       quantity,
+      isConfigurable: productType === 'configurable',
       priceAmount,
       price,
       rowTotal,
@@ -34,6 +51,7 @@ function modifyCartItemsData(cartItems) {
       productName,
       productUrl,
       productSmallImgUrl,
+      selectedConfigOptions,
     };
 
     return accumulator;

src/reactapp/src/api/cart/utility/query/cartItemsInfo.js

@@ -1,15 +1,14 @@
 const cartItemsInfo = `
 items {
   id
+  product_type
   quantity
   prices {
-    price {
+    row_total_incl_tax {
       value
-      currency
-    },
-    row_total {
+    }
+    price_incl_tax {
       value
-      currency
     }
   }
   product {
@@ -22,6 +21,13 @@ items {
     }
     url_key
   }
+  ...on ConfigurableCartItem {
+    configurable_options {
+      id
+      option_label
+      value_label
+    }
+  }
 }`;
 
 export default cartItemsInfo;

src/reactapp/src/components/items/components/CartItem.jsx

@@ -29,7 +29,17 @@ function CartItem({ item, isLastItem, actions }) {
           />
           <div className="text-xs">
             <div>{item.productName}</div>
-            <div>{item.productSku}</div>
+            {item.isConfigurable ? (
+              <ul className="flex flex-wrap space-x-3 text-gray-400">
+                {item.selectedConfigOptions.map((configOption) => (
+                  <li key={configOption.optionId}>{configOption.label}</li>
+                ))}
+              </ul>
+            ) : (
+              <ul className="space-y-1 text-gray-400">
+                <li>{`SKU: ${item.productSku}`}</li>
+              </ul>
+            )}
           </div>
         </div>
       </td>
@@ -76,7 +86,24 @@ function CartItem({ item, isLastItem, actions }) {
                             alt={item.productSku}
                             src={item.productSmallImgUrl}
                           />
-                          <div className="pl-2">{item.productName}</div>
+                          <div className="pl-2 space-y-2">
+                            <div>{item.productName}</div>
+                            {item.isConfigurable ? (
+                              <ul className="flex flex-wrap space-x-3 text-xs text-gray-400">
+                                {item.selectedConfigOptions.map(
+                                  (configOption) => (
+                                    <li key={configOption.optionId}>
+                                      {configOption.label}
+                                    </li>
+                                  )
+                                )}
+                              </ul>
+                            ) : (
+                              <ul className="space-y-1 text-gray-400">
+                                <li>{`SKU: ${item.productSku}`}</li>
+                              </ul>
+                            )}
+                          </div>
                         </div>
                       </td>
                     </tr>

src/reactapp/src/components/totals/Totals.jsx

@@ -7,14 +7,13 @@ import useTotalsCartContext from './hooks/useTotalsCartContext';
 
 function Totals() {
   const {
-    subTotalIncl,
-    subTotalExcl,
     discounts,
-    appliedTaxes,
     grandTotal,
     hasSubTotal,
-    hasAppliedTaxes,
+    subTotalIncl,
+    appliedTaxes,
     hasDiscounts,
+    hasAppliedTaxes,
     hasShippingRate,
     shippingMethodRate,
   } = useTotalsCartContext();