@magic-spells/cart-panel 0.1.1 → 0.2.0

package/src/cart-panel.js

@@ -1,5 +1,5 @@
 import './cart-panel.scss';
-import '@magic-spells/cart-item';
+import { CartItem } from '@magic-spells/cart-item';
 import '@magic-spells/focus-trap';
 import EventEmitter from '@magic-spells/event-emitter';
 
@@ -9,9 +9,9 @@ import EventEmitter from '@magic-spells/event-emitter';
  */
 class CartDialog extends HTMLElement {
 	#handleTransitionEnd;
-	#scrollPosition = 0;
 	#currentCart = null;
 	#eventEmitter;
+	#isInitialRender = true;
 
 	/**
 	 * Clean up event listeners when component is removed from DOM
@@ -31,31 +31,21 @@ class CartDialog extends HTMLElement {
 	}
 
 	/**
-	 * Saves current scroll position and locks body scrolling
+	 * Locks body scrolling
 	 * @private
 	 */
 	#lockScroll() {
-		const _ = this;
-		// Save current scroll position
-		_.#scrollPosition = window.pageYOffset;
-
-		// Apply fixed position to body
+		// Apply overflow hidden to body
 		document.body.classList.add('overflow-hidden');
-		document.body.style.top = `-${_.#scrollPosition}px`;
 	}
 
 	/**
-	 * Restores scroll position when cart dialog is closed
+	 * Restores body scrolling when cart dialog is closed
 	 * @private
 	 */
 	#restoreScroll() {
-		const _ = this;
-		// Remove fixed positioning
+		// Remove overflow hidden from body
 		document.body.classList.remove('overflow-hidden');
-		document.body.style.removeProperty('top');
-
-		// Restore scroll position
-		window.scrollTo(0, _.#scrollPosition);
 	}
 
 	/**
@@ -96,7 +86,18 @@ class CartDialog extends HTMLElement {
 			return;
 		}
 
-		_.focusTrap = document.createElement('focus-trap');
+		// Check if focus-trap already exists, if not create one
+		_.focusTrap = _.contentPanel.querySelector('focus-trap');
+		if (!_.focusTrap) {
+			_.focusTrap = document.createElement('focus-trap');
+
+			// Move all existing cart-panel content into the focus trap
+			const existingContent = Array.from(_.contentPanel.childNodes);
+			existingContent.forEach((child) => _.focusTrap.appendChild(child));
+
+			// Insert focus trap inside the cart-panel
+			_.contentPanel.appendChild(_.focusTrap);
+		}
 
 		// Ensure we have labelledby and describedby references
 		if (!_.getAttribute('aria-labelledby')) {
@@ -109,15 +110,15 @@ class CartDialog extends HTMLElement {
 			}
 		}
 
-		_.contentPanel.parentNode.insertBefore(_.focusTrap, _.contentPanel);
-		_.focusTrap.appendChild(_.contentPanel);
-
-		_.focusTrap.setupTrap();
-
-		// Add modal overlay
-		_.prepend(document.createElement('cart-overlay'));
+		// Add modal overlay if it doesn't already exist
+		if (!_.querySelector('cart-overlay')) {
+			_.prepend(document.createElement('cart-overlay'));
+		}
 		_.#attachListeners();
 		_.#bindKeyboard();
+
+		// Load cart data immediately after component initialization
+		_.refreshCart();
 	}
 
 	/**
@@ -150,6 +151,14 @@ class CartDialog extends HTMLElement {
 	 */
 	#emit(eventName, data = null) {
 		this.#eventEmitter.emit(eventName, data);
+
+		// Also emit as native DOM events for better compatibility
+		this.dispatchEvent(
+			new CustomEvent(eventName, {
+				detail: data,
+				bubbles: true,
+			})
+		);
 	}
 
 	/**
@@ -173,7 +182,7 @@ class CartDialog extends HTMLElement {
 
 		// Handle close buttons
 		_.addEventListener('click', (e) => {
-			if (!e.target.closest('[data-action="hide-cart"]')) return;
+			if (!e.target.closest('[data-action-hide-cart]')) return;
 			_.hide();
 		});
 
@@ -228,14 +237,15 @@ class CartDialog extends HTMLElement {
 		this.updateCartItem(cartKey, 0)
 			.then((updatedCart) => {
 				if (updatedCart && !updatedCart.error) {
-					// Success - remove with animation
-					element.destroyYourself();
+					// Success - let smart comparison handle the removal animation
 					this.#currentCart = updatedCart;
-					this.#updateCartItems(updatedCart);
+					this.#renderCartItems(updatedCart);
+					this.#renderCartPanel(updatedCart);
 
 					// Emit cart updated and data changed events
-					this.#emit('cart-dialog:updated', { cart: updatedCart });
-					this.#emit('cart-dialog:data-changed', updatedCart);
+					const cartWithCalculatedFields = this.#addCalculatedFields(updatedCart);
+					this.#emit('cart-dialog:updated', { cart: cartWithCalculatedFields });
+					this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
 				} else {
 					// Error - reset to ready state
 					element.setState('ready');
@@ -263,14 +273,16 @@ class CartDialog extends HTMLElement {
 		this.updateCartItem(cartKey, quantity)
 			.then((updatedCart) => {
 				if (updatedCart && !updatedCart.error) {
-					// Success - update cart data
+					// Success - update cart data and refresh items
 					this.#currentCart = updatedCart;
-					this.#updateCartItems(updatedCart);
+					this.#renderCartItems(updatedCart);
+					this.#renderCartPanel(updatedCart);
 					element.setState('ready');
 
 					// Emit cart updated and data changed events
-					this.#emit('cart-dialog:updated', { cart: updatedCart });
-					this.#emit('cart-dialog:data-changed', updatedCart);
+					const cartWithCalculatedFields = this.#addCalculatedFields(updatedCart);
+					this.#emit('cart-dialog:updated', { cart: cartWithCalculatedFields });
+					this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
 				} else {
 					// Error - reset to ready state
 					element.setState('ready');
@@ -285,16 +297,82 @@ class CartDialog extends HTMLElement {
 	}
 
 	/**
-	 * Update cart items
+	 * Update cart count elements across the site
+	 * @private
+	 */
+	#renderCartCount(cartData) {
+		if (!cartData) return;
+
+		// Calculate visible item count (excluding _hide_in_cart items)
+		const visibleItems = this.#getVisibleCartItems(cartData);
+		const visibleItemCount = visibleItems.reduce((total, item) => total + item.quantity, 0);
+
+		// Update all cart count elements across the site
+		const cartCountElements = document.querySelectorAll('[data-content-cart-count]');
+		cartCountElements.forEach((element) => {
+			element.textContent = visibleItemCount;
+		});
+	}
+
+	/**
+	 * Update cart subtotal elements across the site
+	 * @private
+	 */
+	#renderCartSubtotal(cartData) {
+		if (!cartData) return;
+
+		// Calculate subtotal from all items except those marked to ignore pricing
+		const pricedItems = cartData.items.filter(item => {
+			const ignorePrice = item.properties?._ignore_price_in_subtotal;
+			return !ignorePrice;
+		});
+		const subtotal = pricedItems.reduce((total, item) => total + (item.line_price || 0), 0);
+
+		// Update all cart subtotal elements across the site
+		const cartSubtotalElements = document.querySelectorAll('[data-content-cart-subtotal]');
+		cartSubtotalElements.forEach((element) => {
+			// Format as currency (assuming cents, convert to dollars)
+			const formatted = (subtotal / 100).toFixed(2);
+			element.textContent = `$${formatted}`;
+		});
+	}
+
+	/**
+	 * Update cart items display based on cart data
 	 * @private
 	 */
-	#updateCartItems(cart = null) {
-		// Placeholder for cart item updates
-		// Could be used to sync cart items with server data
+	#renderCartPanel(cart = null) {
 		const cartData = cart || this.#currentCart;
-		if (cartData) {
-			// Future implementation: update cart item components
+		if (!cartData) return;
+
+		// Get cart sections
+		const hasItemsSection = this.querySelector('[data-cart-has-items]');
+		const emptySection = this.querySelector('[data-cart-is-empty]');
+		const itemsContainer = this.querySelector('[data-content-cart-items]');
+
+		if (!hasItemsSection || !emptySection || !itemsContainer) {
+			console.warn(
+				'Cart sections not found. Expected [data-cart-has-items], [data-cart-is-empty], and [data-content-cart-items]'
+			);
+			return;
+		}
+
+		// Check visible item count for showing/hiding sections
+		const visibleItems = this.#getVisibleCartItems(cartData);
+		const hasVisibleItems = visibleItems.length > 0;
+
+		// Show/hide sections based on visible item count
+		if (hasVisibleItems) {
+			hasItemsSection.style.display = '';
+			emptySection.style.display = 'none';
+		} else {
+			hasItemsSection.style.display = 'none';
+			emptySection.style.display = '';
 		}
+
+		// Update cart count and subtotal across the site
+		this.#renderCartCount(cartData);
+		this.#renderCartSubtotal(cartData);
 	}
 
 	/**
@@ -346,31 +424,216 @@ class CartDialog extends HTMLElement {
 
 	/**
 	 * Refresh cart data from server and update components
+	 * @param {Object} [cartObj=null] - Optional cart object to use instead of fetching
 	 * @returns {Promise<Object>} Cart data object
 	 */
-	refreshCart() {
+	refreshCart(cartObj = null) {
+		// If cart object is provided, use it directly
+		if (cartObj && !cartObj.error) {
+			// console.log('Using provided cart data:', cartObj);
+			this.#currentCart = cartObj;
+			this.#renderCartItems(cartObj);
+			this.#renderCartPanel(cartObj);
+
+			// Emit cart refreshed and data changed events
+			const cartWithCalculatedFields = this.#addCalculatedFields(cartObj);
+			this.#emit('cart-dialog:refreshed', { cart: cartWithCalculatedFields });
+			this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
+
+			return Promise.resolve(cartObj);
+		}
+
+		// Otherwise fetch from server
 		return this.getCart().then((cartData) => {
+			// console.log('Cart data received:', cartData);
 			if (cartData && !cartData.error) {
 				this.#currentCart = cartData;
-				this.#updateCartItems(cartData);
+				this.#renderCartItems(cartData);
+				this.#renderCartPanel(cartData);
 
 				// Emit cart refreshed and data changed events
-				this.#emit('cart-dialog:refreshed', { cart: cartData });
-				this.#emit('cart-dialog:data-changed', cartData);
+				const cartWithCalculatedFields = this.#addCalculatedFields(cartData);
+				this.#emit('cart-dialog:refreshed', { cart: cartWithCalculatedFields });
+				this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
+			} else {
+				console.warn('Cart data has error or is null:', cartData);
 			}
 			return cartData;
 		});
 	}
 
+	/**
+	 * Remove items from DOM that are no longer in cart data
+	 * @private
+	 */
+	#removeItemsFromDOM(itemsContainer, newKeysSet) {
+		const currentItems = Array.from(itemsContainer.querySelectorAll('cart-item'));
+
+		const itemsToRemove = currentItems.filter((item) => !newKeysSet.has(item.getAttribute('key')));
+
+		itemsToRemove.forEach((item) => {
+			console.log('destroy yourself', item);
+			item.destroyYourself();
+		});
+	}
+
+	/**
+	 * Add new items to DOM with animation delay
+	 * @private
+	 */
+	#addItemsToDOM(itemsContainer, itemsToAdd, newKeys) {
+		// Delay adding new items by 300ms to let cart slide open first
+		setTimeout(() => {
+			itemsToAdd.forEach((itemData) => {
+				const cartItem = CartItem.createAnimated(itemData);
+				const targetIndex = newKeys.indexOf(itemData.key || itemData.id);
+
+				// Find the correct position to insert the new item
+				if (targetIndex === 0) {
+					// Insert at the beginning
+					itemsContainer.insertBefore(cartItem, itemsContainer.firstChild);
+				} else {
+					// Find the item that should come before this one
+					let insertAfter = null;
+					for (let i = targetIndex - 1; i >= 0; i--) {
+						const prevKey = newKeys[i];
+						const prevItem = itemsContainer.querySelector(`cart-item[key="${prevKey}"]`);
+						if (prevItem) {
+							insertAfter = prevItem;
+							break;
+						}
+					}
+
+					if (insertAfter) {
+						insertAfter.insertAdjacentElement('afterend', cartItem);
+					} else {
+						itemsContainer.appendChild(cartItem);
+					}
+				}
+			});
+		}, 100);
+	}
+
+	/**
+	 * Filter cart items to exclude those with _hide_in_cart property
+	 * @private
+	 */
+	#getVisibleCartItems(cartData) {
+		if (!cartData || !cartData.items) return [];
+		return cartData.items.filter((item) => {
+			// Check for _hide_in_cart in various possible locations
+			const hidden = item.properties?._hide_in_cart;
+
+			return !hidden;
+		});
+	}
+
+	/**
+	 * Add calculated fields to cart object for events
+	 * @private
+	 */
+	#addCalculatedFields(cartData) {
+		if (!cartData) return cartData;
+
+		const visibleItems = this.#getVisibleCartItems(cartData);
+		const calculated_count = visibleItems.reduce((total, item) => total + item.quantity, 0);
+		const calculated_subtotal = visibleItems.reduce(
+			(total, item) => total + (item.line_price || 0),
+			0
+		);
+
+		return {
+			...cartData,
+			calculated_count,
+			calculated_subtotal,
+		};
+	}
+
+	/**
+	 * Render cart items from Shopify cart data with smart comparison
+	 * @private
+	 */
+	#renderCartItems(cartData) {
+		const itemsContainer = this.querySelector('[data-content-cart-items]');
+
+		if (!itemsContainer || !cartData || !cartData.items) {
+			console.warn('Cannot render cart items:', {
+				itemsContainer: !!itemsContainer,
+				cartData: !!cartData,
+				items: cartData?.items?.length,
+			});
+			return;
+		}
+
+		// Filter out items with _hide_in_cart property
+		const visibleItems = this.#getVisibleCartItems(cartData);
+
+		// Handle initial render - load all items without animation
+		if (this.#isInitialRender) {
+			// console.log('Initial cart render:', visibleItems.length, 'visible items');
+
+			// Clear existing items
+			itemsContainer.innerHTML = '';
+
+			// Create cart-item elements without animation
+			visibleItems.forEach((itemData) => {
+				const cartItem = new CartItem(itemData); // No animation
+				// const cartItem = document.createElement('cart-item');
+				// cartItem.setData(itemData);
+				itemsContainer.appendChild(cartItem);
+			});
+
+			this.#isInitialRender = false;
+
+			return;
+		}
+
+		// Get current DOM items and their keys
+		const currentItems = Array.from(itemsContainer.querySelectorAll('cart-item'));
+		const currentKeys = new Set(currentItems.map((item) => item.getAttribute('key')));
+
+		// Get new cart data keys in order (only visible items)
+		const newKeys = visibleItems.map((item) => item.key || item.id);
+		const newKeysSet = new Set(newKeys);
+
+		// Step 1: Remove items that are no longer in cart data
+		this.#removeItemsFromDOM(itemsContainer, newKeysSet);
+
+		// Step 2: Add new items that weren't in DOM (with animation delay)
+		const itemsToAdd = visibleItems.filter(
+			(itemData) => !currentKeys.has(itemData.key || itemData.id)
+		);
+		this.#addItemsToDOM(itemsContainer, itemsToAdd, newKeys);
+	}
+
+	/**
+	 * Set the template function for cart items
+	 * @param {Function} templateFn - Function that takes item data and returns HTML string
+	 */
+	setCartItemTemplate(templateName, templateFn) {
+		CartItem.setTemplate(templateName, templateFn);
+	}
+
+	/**
+	 * Set the processing template function for cart items
+	 * @param {Function} templateFn - Function that returns HTML string for processing state
+	 */
+	setCartItemProcessingTemplate(templateFn) {
+		CartItem.setProcessingTemplate(templateFn);
+	}
+
 	/**
 	 * Shows the cart dialog and traps focus within it
 	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the cart dialog
 	 * @fires CartDialog#show - Fired when the cart dialog has been shown
 	 */
-	show(triggerEl = null) {
+	show(triggerEl = null, cartObj) {
 		const _ = this;
 		_.triggerEl = triggerEl || false;
 
+		// Lock body scrolling
+		_.#lockScroll();
+
 		// Remove the hidden class first to ensure content is rendered
 		_.contentPanel.classList.remove('hidden');
 
@@ -378,17 +641,16 @@ class CartDialog extends HTMLElement {
 		requestAnimationFrame(() => {
 			// Update ARIA states
 			_.setAttribute('aria-hidden', 'false');
+
 			if (_.triggerEl) {
 				_.triggerEl.setAttribute('aria-expanded', 'true');
 			}
 
-			// Lock body scrolling and save scroll position
-			_.#lockScroll();
-
 			// Focus management
 			const firstFocusable = _.querySelector(
 				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
 			);
+
 			if (firstFocusable) {
 				requestAnimationFrame(() => {
 					firstFocusable.focus();
@@ -396,7 +658,7 @@ class CartDialog extends HTMLElement {
 			}
 
 			// Refresh cart data when showing
-			_.refreshCart();
+			_.refreshCart(cartObj);
 
 			// Emit show event - cart dialog is now visible
 			_.#emit('cart-dialog:show', { triggerElement: _.triggerEl });
@@ -411,23 +673,31 @@ class CartDialog extends HTMLElement {
 	hide() {
 		const _ = this;
 
-		// Restore body scroll and scroll position
-		_.#restoreScroll();
-
 		// Update ARIA states
 		if (_.triggerEl) {
 			// remove focus from modal panel first
 			_.triggerEl.focus();
 			// mark trigger as no longer expanded
 			_.triggerEl.setAttribute('aria-expanded', 'false');
+		} else {
+			// If no trigger element, blur any focused element inside the panel
+			const activeElement = document.activeElement;
+			if (activeElement && _.contains(activeElement)) {
+				activeElement.blur();
+			}
 		}
 
-		// Set aria-hidden to start transition
-		// The transitionend event handler will add display:none when complete
-		_.setAttribute('aria-hidden', 'true');
+		requestAnimationFrame(() => {
+			// Set aria-hidden to start transition
+			// The transitionend event handler will add display:none when complete
+			_.setAttribute('aria-hidden', 'true');
+
+			// Emit hide event - cart dialog is now starting to hide
+			_.#emit('cart-dialog:hide', { triggerElement: _.triggerEl });
 
-		// Emit hide event - cart dialog is now starting to hide
-		_.#emit('cart-dialog:hide', { triggerElement: _.triggerEl });
+			// Restore body scroll
+			_.#restoreScroll();
+		});
 	}
 }
 
@@ -472,5 +742,10 @@ if (!customElements.get('cart-panel')) {
 	customElements.define('cart-panel', CartPanel);
 }
 
-export { CartDialog, CartOverlay, CartPanel };
+export { CartDialog, CartOverlay, CartPanel, CartItem };
 export default CartDialog;
+
+// Make CartItem available globally for Shopify themes
+if (typeof window !== 'undefined') {
+	window.CartItem = CartItem;
+}

package/src/cart-panel.scss

@@ -85,8 +85,7 @@ cart-panel {
 	top: 0;
 	right: 0;
 	width: var(--cart-panel-width);
-	height: 100vh;
-	opacity: 0;
+	height: 100dvh;
 	transform: translateX(100%);
 	pointer-events: none;
 	z-index: var(--cart-panel-z-index);
@@ -94,9 +93,7 @@ cart-panel {
 	box-shadow: var(--cart-panel-shadow);
 	border-radius: var(--cart-panel-border-radius);
 	overflow: hidden;
-	transition:
-		opacity var(--cart-transition-duration) var(--cart-transition-timing),
-		transform var(--cart-transition-duration) var(--cart-transition-timing);
+	transition: transform var(--cart-transition-duration) var(--cart-transition-timing);
 
 	// When explicitly hidden, remove from layout
 	&.hidden {
@@ -107,11 +104,4 @@ cart-panel {
 // Body scroll lock when cart is open
 body.overflow-hidden {
 	overflow: hidden;
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	right: 0;
-	margin: 0;
-	// The top property will be set dynamically by the component
 }