eds-534 initial config

hlxsites · Feb 14, 2025 · 11c4a15 · 11c4a15
1 parent 37d4167
commit 11c4a15
Show file tree

Hide file tree

Showing 60 changed files with 1,010 additions and 617 deletions.
diff --git a/blocks/commerce-cart/commerce-cart.css b/blocks/commerce-cart/commerce-cart.css
@@ -15,6 +15,10 @@
   display: none;
 }
 
+.cart__gift-options{
+  margin-top: var(--spacing-medium);
+}
+
 @media (width >= 900px) {
   .cart__wrapper {
     flex-direction: row;
@@ -29,4 +33,4 @@
     flex: 1;
     flex-basis: auto;
   }
-}
+}
diff --git a/blocks/commerce-cart/commerce-cart.js b/blocks/commerce-cart/commerce-cart.js
@@ -1,33 +1,34 @@
-import { events } from '@dropins/tools/event-bus.js';
-import { render as provider } from '@dropins/storefront-cart/render.js';
-import * as Cart from '@dropins/storefront-cart/api.js';
+import { events } from "@dropins/tools/event-bus.js";
+import { render as provider } from "@dropins/storefront-cart/render.js";
+import * as Cart from "@dropins/storefront-cart/api.js";
 
 // Dropin Containers
-import CartSummaryList from '@dropins/storefront-cart/containers/CartSummaryList.js';
-import OrderSummary from '@dropins/storefront-cart/containers/OrderSummary.js';
-import EstimateShipping from '@dropins/storefront-cart/containers/EstimateShipping.js';
-import EmptyCart from '@dropins/storefront-cart/containers/EmptyCart.js';
-import Coupons from '@dropins/storefront-cart/containers/Coupons.js';
+import CartSummaryList from "@dropins/storefront-cart/containers/CartSummaryList.js";
+import OrderSummary from "@dropins/storefront-cart/containers/OrderSummary.js";
+import EstimateShipping from "@dropins/storefront-cart/containers/EstimateShipping.js";
+import EmptyCart from "@dropins/storefront-cart/containers/EmptyCart.js";
+import Coupons from "@dropins/storefront-cart/containers/Coupons.js";
+import GiftOptions from "@dropins/storefront-cart/containers/GiftOptions.js";
 
 // API
-import { publishShoppingCartViewEvent } from '@dropins/storefront-cart/api.js';
+import { publishShoppingCartViewEvent } from "@dropins/storefront-cart/api.js";
 
 // Initializers
-import '../../scripts/initializers/cart.js';
+import "../../scripts/initializers/cart.js";
 
-import { readBlockConfig } from '../../scripts/aem.js';
+import { readBlockConfig } from "../../scripts/aem.js";
 
 export default async function decorate(block) {
   // Configuration
   const {
-    'hide-heading': hideHeading = 'false',
-    'max-items': maxItems,
-    'hide-attributes': hideAttributes = '',
-    'enable-item-quantity-update': enableUpdateItemQuantity = 'false',
-    'enable-item-remove': enableRemoveItem = 'true',
-    'enable-estimate-shipping': enableEstimateShipping = 'false',
-    'start-shopping-url': startShoppingURL = '',
-    'checkout-url': checkoutURL = '',
+    "hide-heading": hideHeading = "false",
+    "max-items": maxItems,
+    "hide-attributes": hideAttributes = "",
+    "enable-item-quantity-update": enableUpdateItemQuantity = "false",
+    "enable-item-remove": enableRemoveItem = "true",
+    "enable-estimate-shipping": enableEstimateShipping = "false",
+    "start-shopping-url": startShoppingURL = "",
+    "checkout-url": checkoutURL = "",
   } = readBlockConfig(block);
 
   const cart = Cart.getCartDataFromCache();
@@ -42,28 +43,30 @@ export default async function decorate(block) {
       </div>
       <div class="cart__right-column">
         <div class="cart__order-summary"></div>
+        <div class="cart__gift-options"></div>
       </div>
     </div>
 
     <div class="cart__empty-cart"></div>
   `);
 
-  const $wrapper = fragment.querySelector('.cart__wrapper');
-  const $list = fragment.querySelector('.cart__list');
-  const $summary = fragment.querySelector('.cart__order-summary');
-  const $emptyCart = fragment.querySelector('.cart__empty-cart');
+  const $wrapper = fragment.querySelector(".cart__wrapper");
+  const $list = fragment.querySelector(".cart__list");
+  const $summary = fragment.querySelector(".cart__order-summary");
+  const $emptyCart = fragment.querySelector(".cart__empty-cart");
+  const $giftOptions = fragment.querySelector(".cart__gift-options");
 
-  block.innerHTML = '';
+  block.innerHTML = "";
   block.appendChild(fragment);
 
   // Toggle Empty Cart
   function toggleEmptyCart(state) {
     if (state) {
-      $wrapper.setAttribute('hidden', '');
-      $emptyCart.removeAttribute('hidden');
+      $wrapper.setAttribute("hidden", "");
+      $emptyCart.removeAttribute("hidden");
     } else {
-      $wrapper.removeAttribute('hidden');
-      $emptyCart.setAttribute('hidden', '');
+      $wrapper.removeAttribute("hidden");
+      $emptyCart.setAttribute("hidden", "");
     }
   }
 
@@ -73,29 +76,49 @@ export default async function decorate(block) {
   await Promise.all([
     // Cart List
     provider.render(CartSummaryList, {
-      hideHeading: hideHeading === 'true',
-      routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
+      hideHeading: hideHeading === "true",
+      routeProduct: (product) =>
+        `/products/${product.url.urlKey}/${product.topLevelSku}`,
       routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
       maxItems: parseInt(maxItems, 10) || undefined,
-      attributesToHide: hideAttributes.split(',').map((attr) => attr.trim().toLowerCase()),
-      enableUpdateItemQuantity: enableUpdateItemQuantity === 'true',
-      enableRemoveItem: enableRemoveItem === 'true',
+      attributesToHide: hideAttributes
+        .split(",")
+        .map((attr) => attr.trim().toLowerCase()),
+      enableUpdateItemQuantity: enableUpdateItemQuantity === "true",
+      enableRemoveItem: enableRemoveItem === "true",
+      slots: {
+        Footer: (ctx) => {
+          const giftOptions = document.createElement("div");
+
+          provider.render(GiftOptions, {
+            item: ctx.item,
+            view: "product",
+            dataSource: "cart",
+            handleItemsLoading: ctx.handleItemsLoading,
+            handleItemsError: ctx.handleItemsError,
+            onItemUpdate: ctx.onItemUpdate,
+          })(giftOptions);
+
+          ctx.appendChild(giftOptions);
+        },
+      },
     })($list),
 
     // Order Summary
     provider.render(OrderSummary, {
-      routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
+      routeProduct: (product) =>
+        `/products/${product.url.urlKey}/${product.topLevelSku}`,
       routeCheckout: checkoutURL ? () => checkoutURL : undefined,
       slots: {
         EstimateShipping: async (ctx) => {
-          if (enableEstimateShipping === 'true') {
-            const wrapper = document.createElement('div');
+          if (enableEstimateShipping === "true") {
+            const wrapper = document.createElement("div");
             await provider.render(EstimateShipping, {})(wrapper);
             ctx.replaceWith(wrapper);
           }
         },
         Coupons: (ctx) => {
-          const coupons = document.createElement('div');
+          const coupons = document.createElement("div");
 
           provider.render(Coupons)(coupons);
 
@@ -108,18 +131,28 @@ export default async function decorate(block) {
     provider.render(EmptyCart, {
       routeCTA: startShoppingURL ? () => startShoppingURL : undefined,
     })($emptyCart),
+
+    provider.render(GiftOptions, {
+      view: "order",
+      dataSource: "cart",
+      isEditable: false,
+    })($giftOptions),
   ]);
 
   let cartViewEventPublished = false;
   // Events
-  events.on('cart/data', (payload) => {
-    toggleEmptyCart(isCartEmpty(payload));
-
-    if (!cartViewEventPublished) {
-      cartViewEventPublished = true;
-      publishShoppingCartViewEvent();
-    }
-  }, { eager: true });
+  events.on(
+    "cart/data",
+    (payload) => {
+      toggleEmptyCart(isCartEmpty(payload));
+
+      if (!cartViewEventPublished) {
+        cartViewEventPublished = true;
+        publishShoppingCartViewEvent();
+      }
+    },
+    { eager: true }
+  );
 
   return Promise.resolve();
 }