Cart USF 1535 - Cart Summary has a Product Attributes Slot

blocks/commerce-cart-summary/commerce-cart-summary.js

@@ -19,8 +19,38 @@ export default async function decorate(block) {
     routeProduct: (product) => `/products/${product.url.urlKey}/${product.sku}`,
     routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
     maxItems: parseInt(maxItems, 10) || undefined,
-    attributesToHide: hideAttributes.split(',').map((attr) => attr.trim().toLowerCase()),
+    attributesToHide: hideAttributes
+      .split(',')
+      .map((attr) => attr.trim().toLowerCase()),
     enableUpdateItemQuantity: enableUpdateItemQuantity === 'true',
     enableRemoveItem: enableRemoveItem === 'true',
+    slots: {
+      ProductAttributes: (ctx) => {
+        // Prepend Product Attributes
+        const productAttributes = ctx.item?.productAttributes;
+
+        productAttributes?.forEach((attr) => {
+          if ((attr.code === 'Activity') || (attr.code === 'Style Bags')) {
+            if (attr.selected_options) {
+              const selectedOptions = attr.selected_options
+                .filter((option) => option.label.trim() !== '')
+                .map((option) => option.label)
+                .join(', ');
+
+              if (selectedOptions) {
+                const productAttribute = document.createElement('div');
+                productAttribute.innerText = `${attr.code}: ${selectedOptions}`;
+                return ctx.appendChild(productAttribute);
+              }
+            } else if (attr.value) {
+              const productAttribute = document.createElement('div');
+              productAttribute.innerText = `${attr.code}: ${attr.value}`;
+              return ctx.appendChild(productAttribute);
+            }
+          }
+          return null;
+        });
+      },
+    },
   })(block);
 }

package.json

@@ -34,11 +34,11 @@
   "dependencies": {
     "@adobe/magento-storefront-event-collector": "^1.8.0",
     "@adobe/magento-storefront-events-sdk": "^1.8.0",
-    "@dropins/storefront-cart": "0.6.0",
+    "@dropins/storefront-cart": "0.7.0-alpha015",
     "@dropins/storefront-checkout": "0.1.0-alpha49",
     "@dropins/storefront-auth": "0.0.1-alpha20",
     "@dropins/storefront-order-confirmation": "0.1.0-alpha33",
     "@dropins/storefront-pdp": "0.4.0-alpha3",
-    "@dropins/tools": "0.30.0"
+    "@dropins/tools": "0.33.0-alpha6"
   }
 }

scripts/__dropins__/storefront-cart/containers/CartSummaryList/CartSummaryList.d.ts

@@ -17,6 +17,7 @@ export interface CartSummaryListProps extends HTMLAttributes<HTMLDivElement> {
     slots?: {
         Heading?: SlotProps;
         EmptyCart?: SlotProps;
+        ProductAttributes?: SlotProps;
     };
     enableRemoveItem?: boolean;
     enableUpdateItemQuantity?: boolean;

scripts/__dropins__/storefront-cart/data/models/cart-model.d.ts

@@ -88,6 +88,7 @@ export interface Item {
     outOfStock?: boolean;
     notAvailableMessage?: string;
     stockLevel?: String;
+    productAttributes?: Attribute[];
 }
 interface ItemError {
     id: string;
@@ -109,5 +110,14 @@ interface ItemLinks {
     count: number;
     result: string;
 }
+interface AttributeOption {
+    value: string;
+    label: string;
+}
+interface Attribute {
+    code: string;
+    value?: string;
+    selected_options?: AttributeOption[];
+}
 export {};
 //# sourceMappingURL=cart-model.d.ts.map

scripts/__dropins__/storefront-cart/data/transforms/__fixtures__/productTypesData.d.ts

@@ -940,5 +940,84 @@ declare const complexInsufficientQuantityGeneralMessage: {
         };
     };
 };
-export { bundleOptions, bundleOptionsEmpty, giftCardPhysical, giftCardVirtual, simple, simpleCustomizable, configurable, configurableCustomizable, giftCard, downloadbleWithMultipleLinks, simpleLowInventory, complexInsufficientQuantity, complexInsufficientQuantityGeneralMessage, };
+declare const complexWithProductAttributes: {
+    product: {
+        custom_attributesV2: {
+            items: ({
+                code: string;
+                value: string;
+                selected_options?: undefined;
+            } | {
+                code: string;
+                selected_options: {
+                    value: string;
+                    label: string;
+                }[];
+                value?: undefined;
+            })[];
+        };
+        name: string;
+        sku: string;
+        thumbnail: {
+            url: string;
+            label: string;
+        };
+        url_key: string;
+        url_suffix: string;
+        categories: {
+            url_path: string;
+            url_key: string;
+        }[];
+        price_range: {
+            maximum_price: {
+                regular_price: {
+                    value: number;
+                    currency: string;
+                };
+                final_price: {
+                    value: number;
+                    currency: string;
+                };
+                discount: {
+                    amount_off: number;
+                    percent_off: number;
+                };
+            };
+        };
+    };
+    __typename: string;
+    links: {
+        title: string;
+        url: string;
+    }[];
+    uid: string;
+    quantity: number;
+    errors: null;
+    prices: {
+        price: {
+            value: number;
+            currency: string;
+        };
+        total_item_discount: {
+            value: number;
+            currency: string;
+        };
+        row_total: {
+            value: number;
+            currency: string;
+        };
+        price_including_tax: {
+            value: number;
+            currency: string;
+        };
+        row_total_including_tax: {
+            value: number;
+        };
+        original_row_total: {
+            value: number;
+            currency: string;
+        };
+    };
+};
+export { bundleOptions, bundleOptionsEmpty, giftCardPhysical, giftCardVirtual, simple, simpleCustomizable, configurable, configurableCustomizable, giftCard, downloadbleWithMultipleLinks, simpleLowInventory, complexInsufficientQuantity, complexInsufficientQuantityGeneralMessage, complexWithProductAttributes, };
 //# sourceMappingURL=productTypesData.d.ts.map