From 3ccd262d8e0c138349b455428ea3ed26ed76016b Mon Sep 17 00:00:00 2001 From: yutingjiangYTJ Date: Fri, 4 Apr 2025 15:40:25 -0500 Subject: [PATCH 01/13] Create: Mini cart can be enabled in the slide-out panel --- ...cart can be enabled in the slide-out panel | 222 ++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel new file mode 100644 index 000000000..c48709694 --- /dev/null +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -0,0 +1,222 @@ +### Tutorial: Implementing Mini Cart Functionality + +#### Introduction +In this tutorial, we will walk through implementing mini-cart functionality using CSS and JavaScript. This will allow users to view and manage their cart items directly from a mini-cart panel. + +#### Step 1: CSS Styling for Mini Cart + +Create or update `commerce-mini-cart.css` with the following styles: + +```css +/* commerce-mini-cart.css */ + +.cart-mini-cart { + display: flex; + flex-direction: column; + height: 100%; + padding: var(--spacing-small) var(--spacing-small) var(--spacing-medium); + box-sizing: border-box; +} + +.cart-mini-cart__empty-cart { + width: 100%; + max-width: 800px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-self: center; +} + +.cart-mini-cart__heading { + display: grid; + row-gap: var(--spacing-xsmall); + font: var(--type-headline-2-default-font); + letter-spacing: var(--type-headline-2-default-letter-spacing); +} + +.cart-mini-cart__heading-divider { + width: 100%; + margin: var(--spacing-xxsmall) 0 0 0; +} + +.cart-mini-cart__products { + flex: 1; + overflow-y: auto; + max-height: 100%; + padding-bottom: var(--spacing-medium); +} + +.cart-mini-cart__products .cart-cart-summary-list__heading { + padding: 0; +} + +.cart-mini-cart__products .dropin-cart-item__configurations li { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.cart-mini-cart__footer { + display: grid; + grid-auto-flow: row; + gap: var(--spacing-small); + padding-top: var(--spacing-small); + row-gap: var(--spacing-xsmall); +} + +.cart-mini-cart__footer__estimated-total { + font: var(--type-body-1-emphasized-font); + letter-spacing: var(--type-body-1-emphasized-letter-spacing); + display: grid; + grid-template: max-content / 1fr auto; + gap: var(--spacing-xsmall); +} + +.cart-mini-cart__footer__estimated-total-excluding-taxes { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + display: grid; + grid-template: max-content / 1fr auto; + gap: var(--spacing-xsmall); + color: var(--color-neutral-700); +} + +.cart-mini-cart__productListFooter, +.cart-mini-cart__preCheckoutSection { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + color: var(--color-neutral-800); +} + +.cart-mini-cart__footer__ctas { + display: grid; + grid-auto-flow: row; + gap: var(--spacing-xsmall); + padding-top: var(--spacing-small); +} +``` + +#### Step 2: JavaScript Logic for Mini Cart + +Create or update `commerce-mini-cart.js` with logic to initialize and manage mini cart functionality: + +```javascript +/* commerce-mini-cart.js */ + +try { + const config = readBlockConfig(block); + + const startShoppingURL = config['start-shopping-url'] || '/'; + const cartURL = config['cart-url'] || '/cart'; + const checkoutURL = config['checkout-url'] || '/checkout'; + + const routes = { + routeEmptyCartCTA: () => rootLink(startShoppingURL), + routeCart: () => rootLink(cartURL), + routeCheckout: () => rootLink(checkoutURL), + routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`), + isOpen: false, + }; + + const cart = await initializeCart(); + await provider.render(MiniCart, routes)(block); + + if (cart) { + events.emit('cart/data', cart); + events.emit('cart/initialized', cart); + } + + events.on('cart/updated', (cartData) => cartData && events.emit('cart/data', cartData), { eager: true }); + +} catch (error) { + console.error('Error initializing cart:', error); + events.emit('cart/data', null); +} +``` + +#### Step 3: Integrating Mini Cart with Header + +Update `header.css` to integrate the mini cart panel with the header navigation: + +```css +/* header.css */ + +header nav .nav-tools-wrapper { + position: relative; + display: flex; + align-items: center; +} + +/* Mini Cart Panel */ +header nav .nav-tools .minicart-panel { + position: fixed; + top: 0; + right: -400px; + width: 100%; + max-width: 400px; + height: 100vh; + background-color: var(--background-color); + z-index: 999; + box-sizing: border-box; + transition: right 0.3s ease-in-out; + overflow-y: auto; + box-shadow: var(--shape-shadow-2); +} + +header nav .nav-tools .nav-tools-panel--show { + right: 0; +} + +/* Hide navigation sections when mini cart is open */ +header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .nav-sections [aria-expanded="true"] { + display: none; +} + +/* Hide overlay when mini cart is open */ +header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { + display: none; +} + +/* Responsive adjustments */ +@media (width < 900px) { + header nav .nav-tools .minicart-panel { + width: 100%; + max-width: none; + } +} +``` + +#### Step 4: JavaScript Logic for Header Integration + +Update `header.js` to handle mini cart interactions: + +```javascript +/* header.js */ + +if (stateChanged && show) { + publishShoppingCartViewEvent(); + toggleAllNavSections(navSections); + overlay.classList.remove('show'); +} + +cartButton.addEventListener('click', (e) => { + e.stopPropagation(); + toggleMiniCart(); +}); + +function updateCartCounter(data) { + if (data?.totalQuantity) { + cartButton.setAttribute('data-count', data.totalQuantity); + cartButton.setAttribute('aria-label', `Cart with ${data.totalQuantity} items`); + } else { + cartButton.removeAttribute('data-count'); + cartButton.setAttribute('aria-label', 'Cart'); + } +} + +events.on('cart/data', updateCartCounter, { eager: true }); +events.on('cart/updated', updateCartCounter, { eager: true }); +events.on('cart/initialized', updateCartCounter, { eager: true }); +``` From 64fe6b32e002955b6850b4cdc4637cbd44ade4e9 Mon Sep 17 00:00:00 2001 From: yutingjiangYTJ Date: Mon, 7 Apr 2025 09:52:55 -0500 Subject: [PATCH 02/13] Update --- ...i cart can be enabled in the slide-out panel | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index c48709694..cb46244f6 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -1,11 +1,12 @@ ### Tutorial: Implementing Mini Cart Functionality #### Introduction -In this tutorial, we will walk through implementing mini-cart functionality using CSS and JavaScript. This will allow users to view and manage their cart items directly from a mini-cart panel. +This tutroial describes how to implement a slide-out panel Mini Cart on Boilerplate. The Cart dropin provides the template and +necessary functionality to display cart items, manage quantities, and proceed to checkout. #### Step 1: CSS Styling for Mini Cart -Create or update `commerce-mini-cart.css` with the following styles: +Update `commerce-mini-cart.css` with the following styles: ```css /* commerce-mini-cart.css */ @@ -100,7 +101,7 @@ Create or update `commerce-mini-cart.css` with the following styles: #### Step 2: JavaScript Logic for Mini Cart -Create or update `commerce-mini-cart.js` with logic to initialize and manage mini cart functionality: +Update `commerce-mini-cart.js` with logic to initialize and manage mini cart functionality: ```javascript /* commerce-mini-cart.js */ @@ -179,13 +180,6 @@ header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { display: none; } -/* Responsive adjustments */ -@media (width < 900px) { - header nav .nav-tools .minicart-panel { - width: 100%; - max-width: none; - } -} ``` #### Step 4: JavaScript Logic for Header Integration @@ -220,3 +214,6 @@ events.on('cart/data', updateCartCounter, { eager: true }); events.on('cart/updated', updateCartCounter, { eager: true }); events.on('cart/initialized', updateCartCounter, { eager: true }); ``` + +As a result of these customizations, the Mini Cart is implemented as follows: + From b7a8b0f97f7012ff2bed8a1b5da2df8488b85131 Mon Sep 17 00:00:00 2001 From: yutingjiangYTJ Date: Mon, 7 Apr 2025 09:55:11 -0500 Subject: [PATCH 03/13] update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index cb46244f6..43019685f 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -217,3 +217,5 @@ events.on('cart/initialized', updateCartCounter, { eager: true }); As a result of these customizations, the Mini Cart is implemented as follows: +https://github.com/user-attachments/assets/67850d6f-a13d-40e2-8dd5-1716cfcd1502 + From 0607e83591c96e3d4b1683c439e15afee41420b1 Mon Sep 17 00:00:00 2001 From: yutingjiangYTJ Date: Mon, 7 Apr 2025 10:08:14 -0500 Subject: [PATCH 04/13] Update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 43019685f..60dc5f16f 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -217,5 +217,5 @@ events.on('cart/initialized', updateCartCounter, { eager: true }); As a result of these customizations, the Mini Cart is implemented as follows: -https://github.com/user-attachments/assets/67850d6f-a13d-40e2-8dd5-1716cfcd1502 +![Mini Cart Slide-out Screenshot](https://github-production-user-asset-6210df.s3.amazonaws.com/198623051/430996574-4dc11bda-ac44-4c71-afdb-a814c06c0390.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250407%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250407T150425Z&X-Amz-Expires=300&X-Amz-Signature=89c1060c9846c36ef2efce82e3deabda4def9571839cb1ff8b20f2788ac375c2&X-Amz-SignedHeaders=host) From 372f1646f14284d798efe900fe61d988959316d8 Mon Sep 17 00:00:00 2001 From: yutingjiangYTJ Date: Mon, 7 Apr 2025 10:10:17 -0500 Subject: [PATCH 05/13] update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 60dc5f16f..36926e271 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -217,5 +217,4 @@ events.on('cart/initialized', updateCartCounter, { eager: true }); As a result of these customizations, the Mini Cart is implemented as follows: -![Mini Cart Slide-out Screenshot](https://github-production-user-asset-6210df.s3.amazonaws.com/198623051/430996574-4dc11bda-ac44-4c71-afdb-a814c06c0390.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250407%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250407T150425Z&X-Amz-Expires=300&X-Amz-Signature=89c1060c9846c36ef2efce82e3deabda4def9571839cb1ff8b20f2788ac375c2&X-Amz-SignedHeaders=host) - +![Mini Cart Slide-out Screenshot](https://private-user-images.githubusercontent.com/198623051/430996574-4dc11bda-ac44-4c71-afdb-a814c06c0390.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDQwMzg4NzIsIm5iZiI6MTc0NDAzODU3MiwicGF0aCI6Ii8xOTg2MjMwNTEvNDMwOTk2NTc0LTRkYzExYmRhLWFjNDQtNGM3MS1hZmRiLWE4MTRjMDZjMDM5MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNDA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDQwN1QxNTA5MzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MzVmMWRlNjFlYmUzNzc2MWQ5NDU2YjBkMGZkOTc2OTBiYzE3NmVkMjFlODM1MzU5ZGU1NDU0YmZjMTNiY2I4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.QpcFSisOo1Ou4emQ2KSQ-Kkq6FdzeA3BNjpLYhL_wmQ) From 6fe4765f046f2eef4aac85997070c5f767999309 Mon Sep 17 00:00:00 2001 From: yutingjiangYTJ Date: Mon, 7 Apr 2025 10:14:49 -0500 Subject: [PATCH 06/13] Update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 36926e271..b7fcaf07f 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -217,4 +217,4 @@ events.on('cart/initialized', updateCartCounter, { eager: true }); As a result of these customizations, the Mini Cart is implemented as follows: -![Mini Cart Slide-out Screenshot](https://private-user-images.githubusercontent.com/198623051/430996574-4dc11bda-ac44-4c71-afdb-a814c06c0390.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDQwMzg4NzIsIm5iZiI6MTc0NDAzODU3MiwicGF0aCI6Ii8xOTg2MjMwNTEvNDMwOTk2NTc0LTRkYzExYmRhLWFjNDQtNGM3MS1hZmRiLWE4MTRjMDZjMDM5MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNDA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDQwN1QxNTA5MzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MzVmMWRlNjFlYmUzNzc2MWQ5NDU2YjBkMGZkOTc2OTBiYzE3NmVkMjFlODM1MzU5ZGU1NDU0YmZjMTNiY2I4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.QpcFSisOo1Ou4emQ2KSQ-Kkq6FdzeA3BNjpLYhL_wmQ) +![Mini Cart Slide-out Screenshot](https://github.com/user-attachments/assets/4dc11bda-ac44-4c71-afdb-a814c06c0390) From 3fb5ecd4aa6285b0bc8b32efa461672d45086020 Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 13:45:05 -0500 Subject: [PATCH 07/13] Update Mini cart can be enabled in the slide-out panel --- ...ini cart can be enabled in the slide-out panel | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index b7fcaf07f..79977c240 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -1,10 +1,9 @@ ### Tutorial: Implementing Mini Cart Functionality #### Introduction -This tutroial describes how to implement a slide-out panel Mini Cart on Boilerplate. The Cart dropin provides the template and -necessary functionality to display cart items, manage quantities, and proceed to checkout. +The following tutorial describes how to enable the `MiniCart` in a slide-out panel on boilerplate. This `cart drop-in` component enables functionality to display cart items, manage quantities, and proceed to checkout. -#### Step 1: CSS Styling for Mini Cart +#### Step 1: CSS Styling for MiniCart Update `commerce-mini-cart.css` with the following styles: @@ -101,7 +100,7 @@ Update `commerce-mini-cart.css` with the following styles: #### Step 2: JavaScript Logic for Mini Cart -Update `commerce-mini-cart.js` with logic to initialize and manage mini cart functionality: +Update `commerce-mini-cart.js` with the following logic to initialize and manage `MiniCart` functionality: ```javascript /* commerce-mini-cart.js */ @@ -137,9 +136,9 @@ try { } ``` -#### Step 3: Integrating Mini Cart with Header +#### Step 3: Integrating MiniCart with Header -Update `header.css` to integrate the mini cart panel with the header navigation: +Update `header.css` to integrate the `MiniCart` panel with the header navigation: ```css /* header.css */ @@ -184,7 +183,7 @@ header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { #### Step 4: JavaScript Logic for Header Integration -Update `header.js` to handle mini cart interactions: +Update `header.js` to handle `MiniCart` interactions: ```javascript /* header.js */ @@ -215,6 +214,6 @@ events.on('cart/updated', updateCartCounter, { eager: true }); events.on('cart/initialized', updateCartCounter, { eager: true }); ``` -As a result of these customizations, the Mini Cart is implemented as follows: +As a result of these customizations, the `MiniCart` is implemented as follows: ![Mini Cart Slide-out Screenshot](https://github.com/user-attachments/assets/4dc11bda-ac44-4c71-afdb-a814c06c0390) From 9359985c4cb3e2b94be4de02778d4e49c0b03c2f Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 13:46:52 -0500 Subject: [PATCH 08/13] Update --- .../Mini cart can be enabled in the slide-out panel | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 79977c240..19ff0dca8 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -7,9 +7,6 @@ The following tutorial describes how to enable the `MiniCart` in a slide-out pan Update `commerce-mini-cart.css` with the following styles: -```css -/* commerce-mini-cart.css */ - .cart-mini-cart { display: flex; flex-direction: column; @@ -102,9 +99,6 @@ Update `commerce-mini-cart.css` with the following styles: Update `commerce-mini-cart.js` with the following logic to initialize and manage `MiniCart` functionality: -```javascript -/* commerce-mini-cart.js */ - try { const config = readBlockConfig(block); @@ -140,9 +134,6 @@ try { Update `header.css` to integrate the `MiniCart` panel with the header navigation: -```css -/* header.css */ - header nav .nav-tools-wrapper { position: relative; display: flex; @@ -185,9 +176,6 @@ header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { Update `header.js` to handle `MiniCart` interactions: -```javascript -/* header.js */ - if (stateChanged && show) { publishShoppingCartViewEvent(); toggleAllNavSections(navSections); From e778906929bcb0d1df14c657aeae6ef6aecd3243 Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 14:05:19 -0500 Subject: [PATCH 09/13] Update --- ...i cart can be enabled in the slide-out panel | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 19ff0dca8..2e16eee95 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -7,6 +7,7 @@ The following tutorial describes how to enable the `MiniCart` in a slide-out pan Update `commerce-mini-cart.css` with the following styles: +``` .cart-mini-cart { display: flex; flex-direction: column; @@ -95,6 +96,9 @@ Update `commerce-mini-cart.css` with the following styles: } ``` +These styles ensure the `MiniCart` adjusts to different screen sizes while maintaining a clean layout for displaying products and totals. + + #### Step 2: JavaScript Logic for Mini Cart Update `commerce-mini-cart.js` with the following logic to initialize and manage `MiniCart` functionality: @@ -128,7 +132,9 @@ try { console.error('Error initializing cart:', error); events.emit('cart/data', null); } -``` + +This sets up the `MiniCart` by reading configuration settings and initializing the cart. It also handles events like cart updates and initialization, ensuring the cart data is always current. + #### Step 3: Integrating MiniCart with Header @@ -170,7 +176,8 @@ header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { display: none; } -``` +These styles position the MiniCart panel off-screen and slide it into view when activated. + #### Step 4: JavaScript Logic for Header Integration @@ -200,8 +207,10 @@ function updateCartCounter(data) { events.on('cart/data', updateCartCounter, { eager: true }); events.on('cart/updated', updateCartCounter, { eager: true }); events.on('cart/initialized', updateCartCounter, { eager: true }); -``` -As a result of these customizations, the `MiniCart` is implemented as follows: +This ensures the `MiniCart` can be toggled by clicking the cart button and updates the cart counter based on the cart data. + + +With these changes, the MiniCart will appear in a slide-out panel when you click the cart button. ![Mini Cart Slide-out Screenshot](https://github.com/user-attachments/assets/4dc11bda-ac44-4c71-afdb-a814c06c0390) From 981863b2d91b5cabd35470d5c1005d5c4a2854dc Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 14:10:06 -0500 Subject: [PATCH 10/13] Update --- .../Mini cart can be enabled in the slide-out panel | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 2e16eee95..2795da725 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -7,7 +7,7 @@ The following tutorial describes how to enable the `MiniCart` in a slide-out pan Update `commerce-mini-cart.css` with the following styles: -``` +```css .cart-mini-cart { display: flex; flex-direction: column; @@ -98,11 +98,11 @@ Update `commerce-mini-cart.css` with the following styles: These styles ensure the `MiniCart` adjusts to different screen sizes while maintaining a clean layout for displaying products and totals. - #### Step 2: JavaScript Logic for Mini Cart Update `commerce-mini-cart.js` with the following logic to initialize and manage `MiniCart` functionality: +```javascript try { const config = readBlockConfig(block); @@ -132,14 +132,15 @@ try { console.error('Error initializing cart:', error); events.emit('cart/data', null); } +``` This sets up the `MiniCart` by reading configuration settings and initializing the cart. It also handles events like cart updates and initialization, ensuring the cart data is always current. - #### Step 3: Integrating MiniCart with Header Update `header.css` to integrate the `MiniCart` panel with the header navigation: +```css header nav .nav-tools-wrapper { position: relative; display: flex; @@ -175,14 +176,15 @@ header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .nav-sections [ari header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { display: none; } +``` These styles position the MiniCart panel off-screen and slide it into view when activated. - #### Step 4: JavaScript Logic for Header Integration Update `header.js` to handle `MiniCart` interactions: +```javascript if (stateChanged && show) { publishShoppingCartViewEvent(); toggleAllNavSections(navSections); @@ -207,10 +209,10 @@ function updateCartCounter(data) { events.on('cart/data', updateCartCounter, { eager: true }); events.on('cart/updated', updateCartCounter, { eager: true }); events.on('cart/initialized', updateCartCounter, { eager: true }); +``` This ensures the `MiniCart` can be toggled by clicking the cart button and updates the cart counter based on the cart data. - With these changes, the MiniCart will appear in a slide-out panel when you click the cart button. ![Mini Cart Slide-out Screenshot](https://github.com/user-attachments/assets/4dc11bda-ac44-4c71-afdb-a814c06c0390) From 4a2166a91161eb632bf2d02e471464dd95a2541f Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 14:13:14 -0500 Subject: [PATCH 11/13] Update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 2795da725..6841e2574 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -178,7 +178,7 @@ header nav .nav-tools .minicart-panel.nav-tools-panel--show ~ .overlay.show { } ``` -These styles position the MiniCart panel off-screen and slide it into view when activated. +These styles position the `MiniCart` panel off-screen and slide it into view when activated. #### Step 4: JavaScript Logic for Header Integration From 747ce59f8ad8bf523aa144991d7b2d960de582e4 Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 14:14:38 -0500 Subject: [PATCH 12/13] Update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index 6841e2574..c0523b221 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -213,6 +213,6 @@ events.on('cart/initialized', updateCartCounter, { eager: true }); This ensures the `MiniCart` can be toggled by clicking the cart button and updates the cart counter based on the cart data. -With these changes, the MiniCart will appear in a slide-out panel when you click the cart button. +With these changes, the `MiniCart` will appear in a slide-out panel when you click the cart button. ![Mini Cart Slide-out Screenshot](https://github.com/user-attachments/assets/4dc11bda-ac44-4c71-afdb-a814c06c0390) From 419a52d28ba4fba71f03cabbdbfcd11e74b0e46b Mon Sep 17 00:00:00 2001 From: Yuting Jiang Date: Thu, 1 May 2025 14:15:19 -0500 Subject: [PATCH 13/13] Update --- .../tutorials/Mini cart can be enabled in the slide-out panel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel index c0523b221..b887b63a2 100644 --- a/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel +++ b/src/content/docs/dropins/checkout/tutorials/Mini cart can be enabled in the slide-out panel @@ -1,7 +1,7 @@ ### Tutorial: Implementing Mini Cart Functionality #### Introduction -The following tutorial describes how to enable the `MiniCart` in a slide-out panel on boilerplate. This `cart drop-in` component enables functionality to display cart items, manage quantities, and proceed to checkout. +The following tutorial describes how to enable the `MiniCart` in a slide-out panel on boilerplate. This cart drop-in component enables functionality to display cart items, manage quantities, and proceed to checkout. #### Step 1: CSS Styling for MiniCart