103 lines
3.7 KiB
JavaScript
103 lines
3.7 KiB
JavaScript
/**
|
|
* 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>
|
|
`
|
|
}; |