From 4a61807ae7592b6d74c455ca5c88d52412409a77 Mon Sep 17 00:00:00 2001
From: jcalcaben <calcaben@adobe.com>
Date: Mon, 23 Sep 2024 15:16:13 -0500
Subject: [PATCH] Add custom Thumbnail slot content example

---
 .../commerce-cart-summary.js                  | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/blocks/commerce-cart-summary/commerce-cart-summary.js b/blocks/commerce-cart-summary/commerce-cart-summary.js
index 7df039c185..42b602b614 100644
--- a/blocks/commerce-cart-summary/commerce-cart-summary.js
+++ b/blocks/commerce-cart-summary/commerce-cart-summary.js
@@ -22,5 +22,51 @@ export default async function decorate(block) {
     attributesToHide: hideAttributes.split(',').map((attr) => attr.trim().toLowerCase()),
     enableUpdateItemQuantity: enableUpdateItemQuantity === 'true',
     enableRemoveItem: enableRemoveItem === 'true',
+    slots: {
+      Thumbnail: (ctx) => {
+        const { item } = ctx;
+
+        // Create a link to save the item for later
+        const saveForLaterLink  = document.createElement('a');
+        saveForLaterLink.href = '#';
+        saveForLaterLink.addEventListener('click', (e) => {
+          e.preventDefault();
+          console.log(`Saving ${item.name}(${item.sku}) for later`);
+          // TODO: Implement save for later functionality
+        });
+        saveForLaterLink.innerText = 'Save for later';
+
+        // Create a separator
+        const separator = document.createElement('span');
+        separator.innerText = ' | ';
+
+        // Create a link to remove the item from the cart
+        const removeLink = document.createElement('a');
+        removeLink.href = '#';
+        removeLink.addEventListener('click', (e) => {
+          e.preventDefault();
+          console.log(`Removing ${item.name}(${item.sku}) from cart`);
+          // TODO: Implement remove item functionality
+        });
+        removeLink.innerText = 'Remove';
+
+        // Create a container to hold the links
+        const container = document.createElement('div');
+        container.innerHTML = '<div class="cart-summary__thumbnail"/>';
+
+        // Style the container
+        container.style.font = 'var(--type-details-caption-2-font)'
+        container.style.display = 'flex';
+        container.style.justifyContent = 'space-between';
+
+        // Append the links to the container
+        container.appendChild(saveForLaterLink);
+        container.appendChild(separator);
+        container.appendChild(removeLink);
+
+        // Append the container as a child to the existing thumbnail content
+        ctx.appendChild(container)
+      }
+    }
   })(block);
 }