fix: add sessionId to shopLayoutData for cart functionality

Issue:
- Cart was empty after adding products
- Product and cart pages reference this.sessionId but it wasn't defined
- Session ID was being created separately in each page component

Solution:
- Add sessionId property to shopLayoutData base component
- Add getOrCreateSessionId() method to manage session across all pages
- Initialize sessionId in init() so it's available to all child components
- Session ID stored in localStorage as 'cart_session_id'

Now the cart session is shared across all shop pages and cart items
persist correctly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/shop/js/shop-layout.js

@@ -29,11 +29,16 @@ function shopLayoutData() {
 
         // Cart state
         cart: [],
+        sessionId: null,
 
         // Initialize
         init() {
             shopLog.info('Shop layout initializing...');
 
+            // Get or create session ID
+            this.sessionId = this.getOrCreateSessionId();
+            shopLog.debug('Session ID:', this.sessionId);
+
             // Load cart from localStorage
             this.loadCart();
 
@@ -45,6 +50,17 @@ function shopLayoutData() {
             shopLog.info('Shop layout initialized');
         },
 
+        // Get or create session ID
+        getOrCreateSessionId() {
+            let sessionId = localStorage.getItem('cart_session_id');
+            if (!sessionId) {
+                sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+                localStorage.setItem('cart_session_id', sessionId);
+                shopLog.info('Created new session ID:', sessionId);
+            }
+            return sessionId;
+        },
+
         // Theme management
         toggleTheme() {
             this.dark = !this.dark;