@magic-spells/cart-panel 0.1.0 → 0.1.2

package/package.json

@@ -1,82 +1,82 @@
 {
-  "name": "@magic-spells/cart-panel",
-  "version": "0.1.0",
-  "description": "Accessible modal shopping cart dialog web component with Shopify integration, focus management, and smooth animations.",
-  "author": "Cory Schulz",
-  "license": "MIT",
-  "type": "module",
-  "main": "dist/cart-panel.cjs.js",
-  "module": "dist/cart-panel.esm.js",
-  "unpkg": "dist/cart-panel.min.js",
-  "style": "dist/cart-panel.css",
-  "sass": "dist/cart-panel.scss",
-  "exports": {
-    ".": {
-      "import": "./dist/cart-panel.esm.js",
-      "require": "./dist/cart-panel.cjs.js",
-      "default": "./dist/cart-panel.esm.js"
-    },
-    "./css": "./dist/cart-panel.css",
-    "./scss": "./dist/cart-panel.scss"
-  },
-  "sideEffects": true,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/magic-spells/cart-panel"
-  },
-  "homepage": "https://github.com/magic-spells/cart-panel#readme",
-  "bugs": {
-    "url": "https://github.com/magic-spells/cart-panel/issues"
-  },
-  "keywords": [
-    "cart-panel",
-    "web-components",
-    "e-commerce",
-    "shopping-cart",
-    "custom-elements",
-    "shopify",
-    "modal",
-    "dialog",
-    "accessibility",
-    "a11y"
-  ],
-  "files": [
-    "dist/",
-    "src/"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint src/ rollup.config.mjs",
-    "format": "prettier --write .",
-    "prepublishOnly": "npm run build",
-    "serve": "rollup -c --watch",
-    "dev": "rollup -c --watch"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "browserslist": [
-    "last 2 versions",
-    "not dead",
-    "not ie <= 11"
-  ],
-  "devDependencies": {
-    "@eslint/js": "^8.57.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "eslint": "^8.0.0",
-    "globals": "^13.24.0",
-    "prettier": "^3.3.3",
-    "rollup": "^3.0.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.89.2"
-  },
-  "dependencies": {
-    "@magic-spells/cart-item": "^0.1.0",
-    "@magic-spells/event-emitter": "^0.1.0",
-    "@magic-spells/focus-trap": "^1.0.6"
-  }
+	"name": "@magic-spells/cart-panel",
+	"version": "0.1.2",
+	"description": "Accessible modal shopping cart dialog web component with Shopify integration, focus management, and smooth animations.",
+	"author": "Cory Schulz",
+	"license": "MIT",
+	"type": "module",
+	"main": "dist/cart-panel.cjs.js",
+	"module": "dist/cart-panel.esm.js",
+	"unpkg": "dist/cart-panel.min.js",
+	"style": "dist/cart-panel.css",
+	"sass": "dist/cart-panel.scss",
+	"exports": {
+		".": {
+			"import": "./dist/cart-panel.esm.js",
+			"require": "./dist/cart-panel.cjs.js",
+			"default": "./dist/cart-panel.esm.js"
+		},
+		"./css": "./dist/cart-panel.css",
+		"./scss": "./dist/cart-panel.scss"
+	},
+	"sideEffects": true,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/magic-spells/cart-panel"
+	},
+	"homepage": "https://github.com/magic-spells/cart-panel#readme",
+	"bugs": {
+		"url": "https://github.com/magic-spells/cart-panel/issues"
+	},
+	"keywords": [
+		"cart-panel",
+		"web-components",
+		"e-commerce",
+		"shopping-cart",
+		"custom-elements",
+		"shopify",
+		"modal",
+		"dialog",
+		"accessibility",
+		"a11y"
+	],
+	"files": [
+		"dist/",
+		"src/"
+	],
+	"scripts": {
+		"build": "rollup -c",
+		"lint": "eslint src/ rollup.config.mjs",
+		"format": "prettier --write .",
+		"prepublishOnly": "npm run build",
+		"serve": "rollup -c --watch",
+		"dev": "rollup -c --watch"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"browserslist": [
+		"last 2 versions",
+		"not dead",
+		"not ie <= 11"
+	],
+	"devDependencies": {
+		"@eslint/js": "^8.57.0",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"eslint": "^8.0.0",
+		"globals": "^13.24.0",
+		"prettier": "^3.3.3",
+		"rollup": "^3.0.0",
+		"rollup-plugin-copy": "^3.5.0",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-serve": "^1.1.1",
+		"sass": "^1.89.2"
+	},
+	"dependencies": {
+		"@magic-spells/cart-item": "^0.3.0",
+		"@magic-spells/event-emitter": "^0.1.0",
+		"@magic-spells/focus-trap": "^1.0.7"
+	}
 }

package/src/cart-panel.js

@@ -1,5 +1,6 @@
 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';
 
@@ -12,6 +13,7 @@ class CartDialog extends HTMLElement {
 	#scrollPosition = 0;
 	#currentCart = null;
 	#eventEmitter;
+	#isInitialRender = true;
 
 	/**
 	 * Clean up event listeners when component is removed from DOM
@@ -109,13 +111,18 @@ class CartDialog extends HTMLElement {
 			}
 		}
 
+		// 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();
 	}
@@ -173,7 +180,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,9 +235,9 @@ 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.#renderCartItems(updatedCart);
 					this.#updateCartItems(updatedCart);
 
 					// Emit cart updated and data changed events
@@ -263,8 +270,9 @@ 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.#renderCartItems(updatedCart);
 					this.#updateCartItems(updatedCart);
 					element.setState('ready');
 
@@ -285,15 +293,32 @@ class CartDialog extends HTMLElement {
 	}
 
 	/**
-	 * 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
 		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;
+		}
+
+		// 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';
 		}
 	}
 
@@ -349,19 +374,157 @@ class CartDialog extends HTMLElement {
 	 * @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
@@ -462,9 +625,20 @@ class CartPanel extends HTMLElement {
 	}
 }
 
-customElements.define('cart-dialog', CartDialog);
-customElements.define('cart-overlay', CartOverlay);
-customElements.define('cart-panel', CartPanel);
+if (!customElements.get('cart-dialog')) {
+	customElements.define('cart-dialog', CartDialog);
+}
+if (!customElements.get('cart-overlay')) {
+	customElements.define('cart-overlay', CartOverlay);
+}
+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

@@ -25,93 +25,93 @@ $cart-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 // Define CSS Custom Properties using SCSS values
 :root {
-  // Layout
-  --cart-dialog-z-index: #{$cart-dialog-z-index};
-  --cart-overlay-z-index: #{$cart-overlay-z-index};
-  --cart-panel-z-index: #{$cart-panel-z-index};
-  --cart-panel-width: #{$cart-panel-width};
-
-  // Overlay
-  --cart-overlay-background: #{$cart-overlay-background};
-  --cart-overlay-backdrop-filter: #{$cart-overlay-backdrop-filter};
-
-  // Panel
-  --cart-panel-background: #{$cart-panel-background};
-  --cart-panel-shadow: #{$cart-panel-shadow};
-  --cart-panel-border-radius: #{$cart-panel-border-radius};
-
-  // Animation
-  --cart-transition-duration: #{$cart-transition-duration};
-  --cart-transition-timing: #{$cart-transition-timing};
+	// Layout
+	--cart-dialog-z-index: #{$cart-dialog-z-index};
+	--cart-overlay-z-index: #{$cart-overlay-z-index};
+	--cart-panel-z-index: #{$cart-panel-z-index};
+	--cart-panel-width: #{$cart-panel-width};
+
+	// Overlay
+	--cart-overlay-background: #{$cart-overlay-background};
+	--cart-overlay-backdrop-filter: #{$cart-overlay-backdrop-filter};
+
+	// Panel
+	--cart-panel-background: #{$cart-panel-background};
+	--cart-panel-shadow: #{$cart-panel-shadow};
+	--cart-panel-border-radius: #{$cart-panel-border-radius};
+
+	// Animation
+	--cart-transition-duration: #{$cart-transition-duration};
+	--cart-transition-timing: #{$cart-transition-timing};
 }
 
 // Cart Dialog - Main container
 cart-dialog {
-  display: contents;
-
-  &[aria-hidden='false'] {
-    cart-overlay,
-    cart-panel {
-      pointer-events: auto;
-      opacity: 1;
-    }
-
-    cart-panel {
-      transform: translateX(0);
-    }
-  }
+	display: contents;
+
+	&[aria-hidden='false'] {
+		cart-overlay,
+		cart-panel {
+			pointer-events: auto;
+			opacity: 1;
+		}
+
+		cart-panel {
+			transform: translateX(0);
+		}
+	}
 }
 
 // Cart Overlay - Backdrop
 cart-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  opacity: 0;
-  pointer-events: none;
-  z-index: var(--cart-overlay-z-index);
-  background-color: var(--cart-overlay-background);
-  backdrop-filter: var(--cart-overlay-backdrop-filter);
-  transition:
-    opacity var(--cart-transition-duration) var(--cart-transition-timing),
-    backdrop-filter var(--cart-transition-duration) var(--cart-transition-timing);
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	opacity: 0;
+	pointer-events: none;
+	z-index: var(--cart-overlay-z-index);
+	background-color: var(--cart-overlay-background);
+	backdrop-filter: var(--cart-overlay-backdrop-filter);
+	transition:
+		opacity var(--cart-transition-duration) var(--cart-transition-timing),
+		backdrop-filter var(--cart-transition-duration) var(--cart-transition-timing);
 }
 
 // Cart Panel - Sliding content area
 cart-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: var(--cart-panel-width);
-  height: 100vh;
-  opacity: 0;
-  transform: translateX(100%);
-  pointer-events: none;
-  z-index: var(--cart-panel-z-index);
-  background: var(--cart-panel-background);
-  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);
-
-  // When explicitly hidden, remove from layout
-  &.hidden {
-    display: none;
-  }
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: var(--cart-panel-width);
+	height: 100vh;
+	opacity: 0;
+	transform: translateX(100%);
+	pointer-events: none;
+	z-index: var(--cart-panel-z-index);
+	background: var(--cart-panel-background);
+	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);
+
+	// When explicitly hidden, remove from layout
+	&.hidden {
+		display: none;
+	}
 }
 
 // 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
+	overflow: hidden;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	right: 0;
+	margin: 0;
+	// The top property will be set dynamically by the component
 }