@magic-spells/cart-panel 0.1.1 → 0.1.2

package/dist/cart-panel.js

@@ -40,6 +40,15 @@
 			CartItem.#processingTemplate = templateFn;
 		}
 
+		/**
+		 * Create a cart item with appearing animation
+		 * @param {Object} itemData - Shopify cart item data
+		 * @returns {CartItem} Cart item instance that will animate in
+		 */
+		static createAnimated(itemData) {
+			return new CartItem(itemData, { animate: true });
+		}
+
 		/**
 		 * Define which attributes should be observed for changes
 		 */
@@ -58,14 +67,16 @@
 			}
 		}
 
-		constructor(itemData = null) {
+		constructor(itemData = null, options = {}) {
 			super();
 
 			// Store item data if provided
 			this.#itemData = itemData;
 
-			// Set initial state - start with 'appearing' if we have item data to render
-			this.#currentState = itemData ? 'appearing' : this.getAttribute('state') || 'ready';
+			// Set initial state - start with 'appearing' only if explicitly requested
+			const shouldAnimate = options.animate || this.hasAttribute('animate-in');
+			this.#currentState =
+				itemData && shouldAnimate ? 'appearing' : this.getAttribute('state') || 'ready';
 
 			// Bind event handlers
 			this.#handlers = {
@@ -101,13 +112,9 @@
 					this.style.height = `${naturalHeight}px`;
 
 					// Transition to ready state after a brief delay
-					setTimeout(() => {
+					requestAnimationFrame(() => {
 						this.setState('ready');
-						// Remove explicit height after animation completes
-						setTimeout(() => {
-							this.style.height = '';
-						}, 400); // Match appearing duration
-					}, 50);
+					});
 				});
 			}
 		}
@@ -173,12 +180,15 @@
 		}
 
 		/**
-		 * Handle transition end events for destroy animation
+		 * Handle transition end events for destroy animation and appearing animation
 		 */
 		#handleTransitionEnd(e) {
 			if (e.propertyName === 'height' && this.#isDestroying) {
 				// Remove from DOM after height animation completes
 				this.remove();
+			} else if (e.propertyName === 'height' && this.#currentState === 'ready') {
+				// Remove explicit height after appearing animation completes
+				this.style.height = '';
 			}
 		}
 
@@ -525,9 +535,15 @@
 		};
 	}
 
-	customElements.define('focus-trap', FocusTrap);
-	customElements.define('focus-trap-start', FocusTrapStart);
-	customElements.define('focus-trap-end', FocusTrapEnd);
+	if (!customElements.get('focus-trap')) {
+		customElements.define('focus-trap', FocusTrap);
+	}
+	if (!customElements.get('focus-trap-start')) {
+		customElements.define('focus-trap-start', FocusTrapStart);
+	}
+	if (!customElements.get('focus-trap-end')) {
+		customElements.define('focus-trap-end', FocusTrapEnd);
+	}
 
 	class EventEmitter {
 	  #events;
@@ -625,6 +641,7 @@
 		#scrollPosition = 0;
 		#currentCart = null;
 		#eventEmitter;
+		#isInitialRender = true;
 
 		/**
 		 * Clean up event listeners when component is removed from DOM
@@ -722,13 +739,18 @@
 				}
 			}
 
+			// Insert focus trap before the cart-panel
 			_.contentPanel.parentNode.insertBefore(_.focusTrap, _.contentPanel);
+			// Move cart-panel inside the focus trap
 			_.focusTrap.appendChild(_.contentPanel);
 
+			// Setup the trap - this will add focus-trap-start/end elements around the content
 			_.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();
 		}
@@ -786,7 +808,7 @@
 
 			// 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();
 			});
 
@@ -841,9 +863,9 @@
 			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.#renderCartItems(updatedCart);
 						this.#updateCartItems(updatedCart);
 
 						// Emit cart updated and data changed events
@@ -876,8 +898,9 @@
 			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.#renderCartItems(updatedCart);
 						this.#updateCartItems(updatedCart);
 						element.setState('ready');
 
@@ -898,13 +921,33 @@
 		}
 
 		/**
-		 * Update cart items
+		 * 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
-			cart || this.#currentCart;
+			const cartData = cart || this.#currentCart;
+			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;
+			}
+
+			// Show/hide sections based on item count
+			if (cartData.item_count > 0) {
+				hasItemsSection.style.display = 'block';
+				emptySection.style.display = 'none';
+			} else {
+				hasItemsSection.style.display = 'none';
+				emptySection.style.display = 'block';
+			}
 		}
 
 		/**
@@ -959,19 +1002,157 @@
 		 * @returns {Promise<Object>} Cart data object
 		 */
 		refreshCart() {
+			console.log('Refreshing cart...');
 			return this.getCart().then((cartData) => {
+				console.log('Cart data received:', cartData);
 				if (cartData && !cartData.error) {
 					this.#currentCart = cartData;
+					this.#renderCartItems(cartData);
 					this.#updateCartItems(cartData);
 
 					// Emit cart refreshed and data changed events
 					this.#emit('cart-dialog:refreshed', { cart: cartData });
 					this.#emit('cart-dialog:data-changed', cartData);
+				} 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')));
+
+			console.log(
+				`Removing ${itemsToRemove.length} items:`,
+				itemsToRemove.map((item) => item.getAttribute('key'))
+			);
+
+			itemsToRemove.forEach((item) => {
+				item.destroyYourself();
+			});
+		}
+
+		/**
+		 * Add new items to DOM with animation delay
+		 * @private
+		 */
+		#addItemsToDOM(itemsContainer, itemsToAdd, newKeys) {
+			console.log(
+				`Adding ${itemsToAdd.length} items:`,
+				itemsToAdd.map((item) => item.key || item.id)
+			);
+
+			// 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);
+		}
+
+		/**
+		 * 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;
+			}
+
+			// Handle initial render - load all items without animation
+			if (this.#isInitialRender) {
+				console.log('Initial cart render:', cartData.items.length, 'items');
+
+				// Clear existing items
+				itemsContainer.innerHTML = '';
+
+				// Create cart-item elements without animation
+				cartData.items.forEach((itemData) => {
+					const cartItem = new CartItem(itemData); // No animation
+					itemsContainer.appendChild(cartItem);
+				});
+
+				this.#isInitialRender = false;
+				console.log('Initial render complete, container children:', itemsContainer.children.length);
+				return;
+			}
+
+			console.log('Smart rendering cart items:', cartData.items.length, 'items');
+
+			// 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
+			const newKeys = cartData.items.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 = cartData.items.filter(
+				(itemData) => !currentKeys.has(itemData.key || itemData.id)
+			);
+
+			this.#addItemsToDOM(itemsContainer, itemsToAdd, newKeys);
+
+			console.log('Smart rendering complete, container children:', itemsContainer.children.length);
+		}
+
+		/**
+		 * Set the template function for cart items
+		 * @param {Function} templateFn - Function that takes item data and returns HTML string
+		 */
+		setCartItemTemplate(templateFn) {
+			CartItem.setTemplate(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
@@ -1082,7 +1263,13 @@
 		customElements.define('cart-panel', CartPanel);
 	}
 
+	// Make CartItem available globally for Shopify themes
+	if (typeof window !== 'undefined') {
+		window.CartItem = CartItem;
+	}
+
 	exports.CartDialog = CartDialog;
+	exports.CartItem = CartItem;
 	exports.CartOverlay = CartOverlay;
 	exports.CartPanel = CartPanel;
 	exports.default = CartDialog;