feat(cart-notifications): ✨ Add support for multiple cart lines in a cart notification.

Author: patrickDouglas

assets/cart-notification.js

@@ -35,12 +35,18 @@ class CartNotification extends HTMLElement {
   }
 
   renderContents(parsedState) {
-    this.cartItemKey = parsedState.key;
+    const keys = parsedState.items ? parsedState.items.map(({ key }) => key) : [parsedState.key];
     this.getSectionsToRender().forEach((section) => {
-      document.getElementById(section.id).innerHTML = this.getSectionInnerHTML(
-        parsedState.sections[section.id],
-        section.selector
-      );
+      if (typeof section.selector === 'function') {
+        document.getElementById(section.id).innerHTML = keys
+          .map((key) => this.getSectionOuterHTML(parsedState.sections[section.id], section?.selector(key)))
+          .join('');
+      } else {
+        document.getElementById(section.id).innerHTML = this.getSectionInnerHTML(
+          parsedState.sections[section.id],
+          section.selector?.(keys[0])
+        );
+      }
     });
 
     if (this.header) this.header.reveal();
@@ -51,7 +57,7 @@ class CartNotification extends HTMLElement {
     return [
       {
         id: 'cart-notification-product',
-        selector: `[id="cart-notification-product-${this.cartItemKey}"]`,
+        selector: (key) => `[id="cart-notification-product-${key}"]`,
       },
       {
         id: 'cart-notification-button',

assets/component-cart-notification.css

@@ -98,10 +98,15 @@
 .cart-notification-product {
   align-items: flex-start;
   display: flex;
+  flex-wrap: wrap;
   padding-bottom: 3rem;
   padding-top: 2rem;
 }
 
+.cart-notification-product .cart-item {
+  display: flex;
+}
+
 .cart-notification-product dl {
   margin-bottom: 0;
   margin-top: 0;

assets/product-form.js

@@ -48,7 +48,7 @@ if (!customElements.get('product-form')) {
             if (response.status) {
               publish(PUB_SUB_EVENTS.cartError, {
                 source: 'product-form',
-                productVariantId: formData.get('id'),
+                productVariantId: formData.get('id') ?? formData.get('items[0][id]'),
                 errors: response.errors || response.description,
                 message: response.message,
               });
@@ -70,7 +70,7 @@ if (!customElements.get('product-form')) {
             if (!this.error)
               publish(PUB_SUB_EVENTS.cartUpdate, {
                 source: 'product-form',
-                productVariantId: formData.get('id'),
+                productVariantId: formData.get('id') ?? formData.get('items[0][id]'),
                 cartData: response,
               }).then(() => {
                 CartPerformance.measureFromMarker('add:wait-for-subscribers', startMarker);
@@ -82,7 +82,7 @@ if (!customElements.get('product-form')) {
                 'modalClosed',
                 () => {
                   setTimeout(() => {
-                    CartPerformance.measure("add:paint-updated-sections", () => {
+                    CartPerformance.measure('add:paint-updated-sections', () => {
                       this.cart.renderContents(response);
                     });
                   });
@@ -91,7 +91,7 @@ if (!customElements.get('product-form')) {
               );
               quickAddModal.hide(true);
             } else {
-              CartPerformance.measure("add:paint-updated-sections", () => {
+              CartPerformance.measure('add:paint-updated-sections', () => {
                 this.cart.renderContents(response);
               });
             }
@@ -105,7 +105,7 @@ if (!customElements.get('product-form')) {
             if (!this.error) this.submitButton.removeAttribute('aria-disabled');
             this.querySelector('.loading__spinner').classList.add('hidden');
 
-            CartPerformance.measureFromEvent("add:user-action", evt);
+            CartPerformance.measureFromEvent('add:user-action', evt);
           });
       }