admin and vendor backends features

static/js/shop/shop-layout-templates.js

@@ -0,0 +1,103 @@
+/**
+ * Shop Layout Templates
+ * Header and Navigation specific to Customer-Facing Shop
+ */
+
+window.shopLayoutTemplates = {
+
+    /**
+     * Shop Header
+     */
+    header: () => `
+        <header class="shop-header">
+            <div class="shop-header-top">
+                <a href="/shop/home.html" class="shop-logo" x-text="vendor?.name || 'Shop'"></a>
+
+                <!-- Search Bar -->
+                <div class="shop-search">
+                    <form @submit.prevent="handleSearch()" class="search-form">
+                        <input type="text"
+                               x-model="searchQuery"
+                               class="search-input"
+                               placeholder="Search products...">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </form>
+                </div>
+
+                <!-- Actions -->
+                <div class="shop-actions">
+                    <button @click="goToCart()" class="cart-button">
+                        <i class="fas fa-shopping-cart"></i>
+                        <span x-show="cartCount > 0"
+                              x-text="cartCount"
+                              class="cart-count">
+                        </span>
+                    </button>
+                    <a href="/shop/account/login.html" class="btn btn-outline">
+                        <i class="fas fa-user"></i> Account
+                    </a>
+                </div>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="shop-nav">
+                <a href="/shop/home.html"
+                   class="shop-nav-item"
+                   :class="{ 'active': isActive('home') }">
+                    Home
+                </a>
+                <a href="/shop/products.html"
+                   class="shop-nav-item"
+                   :class="{ 'active': isActive('products') }">
+                    Products
+                </a>
+                <a href="/shop/categories.html"
+                   class="shop-nav-item"
+                   :class="{ 'active': isActive('categories') }">
+                    Categories
+                </a>
+                <a href="/shop/about.html"
+                   class="shop-nav-item"
+                   :class="{ 'active': isActive('about') }">
+                    About
+                </a>
+            </nav>
+        </header>
+    `,
+
+    /**
+     * Shop Account Sidebar
+     */
+    accountSidebar: () => `
+        <aside class="account-sidebar">
+            <nav>
+                <a href="/shop/account/orders.html"
+                   class="account-nav-item"
+                   :class="{ 'active': isActive('orders') }">
+                    <i class="fas fa-shopping-bag"></i>
+                    <span>My Orders</span>
+                </a>
+                <a href="/shop/account/profile.html"
+                   class="account-nav-item"
+                   :class="{ 'active': isActive('profile') }">
+                    <i class="fas fa-user"></i>
+                    <span>Profile</span>
+                </a>
+                <a href="/shop/account/addresses.html"
+                   class="account-nav-item"
+                   :class="{ 'active': isActive('addresses') }">
+                    <i class="fas fa-map-marker-alt"></i>
+                    <span>Addresses</span>
+                </a>
+                <button @click="confirmLogout()"
+                        class="account-nav-item"
+                        style="width: 100%; text-align: left; background: none; border: none; cursor: pointer;">
+                    <i class="fas fa-sign-out-alt"></i>
+                    <span>Logout</span>
+                </button>
+            </nav>
+        </aside>
+    `
+};