499 lines
25 KiB
PHP
499 lines
25 KiB
PHP
<div>
|
|
|
|
<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
|
|
aria-labelledby="shoppingCartLabel" style="width: 500px">
|
|
|
|
<!-- Header -->
|
|
<div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
|
|
<div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
|
|
<h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
|
|
class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
|
|
<div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
|
|
aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
|
|
<div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items -->
|
|
<div class="offcanvas-body d-flex flex-column gap-4 pt-2">
|
|
|
|
<!-- Item -->
|
|
<div class="d-flex align-items-center">
|
|
<a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
|
|
<img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
|
|
alt="Thumbnail">
|
|
</a>
|
|
<div class="w-100 min-w-0 ps-3">
|
|
<h5 class="d-flex animate-underline mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate animate-target"
|
|
href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden
|
|
laces</a>
|
|
</h5>
|
|
<div class="h6 pb-1 mb-2">$74.00</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="count-input rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus"></i>
|
|
</button>
|
|
<input type="number" class="form-control form-control-sm" value="1" readonly>
|
|
<button type="button" class="btn btn-icon btn-sm" data-increment
|
|
aria-label="Increment quantity">
|
|
<i class="ci-plus"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove from cart"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="d-flex align-items-center">
|
|
<a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
|
|
<img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
|
|
alt="Thumbnail">
|
|
</a>
|
|
<div class="w-100 min-w-0 ps-3">
|
|
<h5 class="d-flex animate-underline mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate animate-target"
|
|
href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
|
|
</h5>
|
|
<div class="h6 pb-1 mb-2">$27.00</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="count-input rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus"></i>
|
|
</button>
|
|
<input type="number" class="form-control form-control-sm" value="1" readonly>
|
|
<button type="button" class="btn btn-icon btn-sm" data-increment
|
|
aria-label="Increment quantity">
|
|
<i class="ci-plus"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove from cart"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="d-flex align-items-center">
|
|
<a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
|
|
<img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
|
|
alt="Thumbnail">
|
|
</a>
|
|
<div class="w-100 min-w-0 ps-3">
|
|
<h5 class="d-flex animate-underline mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate animate-target"
|
|
href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
|
|
</h5>
|
|
<div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="count-input rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus"></i>
|
|
</button>
|
|
<input type="number" class="form-control form-control-sm" value="1" readonly>
|
|
<button type="button" class="btn btn-icon btn-sm" data-increment
|
|
aria-label="Increment quantity">
|
|
<i class="ci-plus"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove from cart"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="offcanvas-header flex-column align-items-start">
|
|
<div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
|
|
<span class="text-light-emphasis">Subtotal:</span>
|
|
<span class="h6 mb-0">$197.00</span>
|
|
</div>
|
|
<div class="d-flex w-100 gap-3">
|
|
<a class="btn btn-lg btn-secondary w-100" href="{{ route('cart.index') }}">View cart</a>
|
|
<a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- search box --}}
|
|
<div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
|
|
<div class="offcanvas-header border-bottom p-0 py-lg-1">
|
|
<form class="container d-flex align-items-center">
|
|
<input type="search" id="searchInput"
|
|
class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
|
|
placeholder="Search the products" data-autofocus="offcanvas">
|
|
<button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas"
|
|
aria-label="Close"></button>
|
|
</form>
|
|
</div>
|
|
<div class="offcanvas-body px-0 show_result" id="searchResults">
|
|
<!-- Search results will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<x-layout.top-announcement-header />
|
|
<header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
|
|
data-sticky-navbar='{"offset": 500}'>
|
|
<div class="container py-2 py-lg-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
|
|
<!-- Mobile offcanvas menu toggler (Hamburger) -->
|
|
<button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
|
|
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Country selector visible on screens > 768px wide (md breakpoint) -->
|
|
<x-language-selector />
|
|
|
|
<!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
|
|
<x-location-selector />
|
|
|
|
</div>
|
|
|
|
<!-- Navbar brand (Logo) -->
|
|
<a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
|
|
|
|
<img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;" />
|
|
<img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;" />
|
|
</a>
|
|
|
|
<!-- Button group -->
|
|
<div class="d-flex align-items-center">
|
|
|
|
<!-- Navbar stuck nav toggler -->
|
|
<button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
|
|
data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
|
|
aria-label="Toggle navigation in navbar stuck state">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Theme switcher (light/dark/auto) -->
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
|
|
<span class="theme-icon-active d-flex animate-target">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
</button>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
|
|
<li>
|
|
<button type="button" class="dropdown-item active" data-bs-theme-value="light"
|
|
aria-pressed="true">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
<span class="theme-label">Light</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="dark"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-moon"></i>
|
|
</span>
|
|
<span class="theme-label">Dark</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="auto"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-auto"></i>
|
|
</span>
|
|
<span class="theme-label">Auto</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
|
|
data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
|
|
aria-label="Toggle search bar">
|
|
<i class="ci-search animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
|
|
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
|
|
href="{{ auth()->check() ? route('profile') : route('login') }}">
|
|
<i class="ci-user animate-target"></i>
|
|
<span class="visually-hidden">{{ __('header.account') }}</span>
|
|
</a>
|
|
|
|
<!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
|
|
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
|
|
href="#!">
|
|
<i class="ci-heart animate-target"></i>
|
|
<span class="visually-hidden">{{ __('header.wishlist') }}</span>
|
|
</a>
|
|
|
|
<!-- Cart button -->
|
|
{{-- <button type="button"
|
|
class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
|
|
aria-label="Shopping cart">
|
|
<span
|
|
class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2 cart-count"
|
|
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
|
<i class="ci-shopping-bag animate-target me-1"></i>
|
|
</button> --}}
|
|
<a type="button"
|
|
href="{{ route('cart.index') }}"
|
|
class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
|
aria-label="Shopping cart">
|
|
<span
|
|
class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2 cart-count"
|
|
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
|
<i class="ci-shopping-bag animate-target me-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
|
|
<div class="collapse navbar-stuck-hide" id="stuckNav">
|
|
<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
|
|
<div class="offcanvas-header py-3">
|
|
<h5 class="offcanvas-title" id="navbarNavLabel">Browse AsiaGolf</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
|
|
<!-- Country and City selects visible on screens < 768px wide (md breakpoint) -->
|
|
<div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
|
|
<x-language-selector-sidebar />
|
|
<x-location-selector-sidebar />
|
|
</div>
|
|
<div class="offcanvas-body pt-1 pb-3 py-lg-0">
|
|
<div class="container pb-lg-2 px-0 px-lg-3">
|
|
|
|
<div class="position-relative d-lg-flex align-items-center justify-content-between">
|
|
|
|
<!-- Categories mega menu -->
|
|
<x-layout.navbar-category />
|
|
|
|
|
|
<!-- Navbar nav -->
|
|
<x-layout.navbar-menu />
|
|
|
|
<!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex"
|
|
style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox"
|
|
aria-controls="searchBox">
|
|
<i class="ci-search fs-base ms-n1 me-2"></i>
|
|
<span class="text-body-tertiary fw-normal">Search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
|
|
<div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
|
|
<div class="nav nav-justified w-100">
|
|
<a class="nav-link border-end" href="{{ route('login') }}">
|
|
<i class="ci-user fs-lg opacity-60 me-2"></i>
|
|
{{ __('header.account') }}
|
|
</a>
|
|
<a class="nav-link" href="#!">
|
|
<i class="ci-heart fs-lg opacity-60 me-2"></i>
|
|
{{ __('header.wishlist') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('searchInput');
|
|
const searchResults = document.getElementById('searchResults');
|
|
let searchTimeout;
|
|
|
|
if (searchInput && searchResults) {
|
|
// Show default state initially
|
|
showDefaultSearch();
|
|
|
|
// Handle search input with debouncing
|
|
searchInput.addEventListener('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
const query = this.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
showDefaultSearch();
|
|
return;
|
|
}
|
|
|
|
// Debounce search
|
|
searchTimeout = setTimeout(() => {
|
|
performSearch(query);
|
|
}, 300);
|
|
});
|
|
|
|
// Clear search when input is cleared
|
|
searchInput.addEventListener('reset', function() {
|
|
showDefaultSearch();
|
|
});
|
|
}
|
|
|
|
function showDefaultSearch() {
|
|
searchResults.innerHTML = `
|
|
<div class="container text-center py-5">
|
|
<svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
|
|
viewBox="0 0 512 512" fill="currentColor">
|
|
<path d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
|
|
</svg>
|
|
<h6 class="mb-2">Your search results will appear here</h6>
|
|
<p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function performSearch(query) {
|
|
// Show loading state
|
|
searchResults.innerHTML = `
|
|
<div class="container text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3 mb-0">Searching...</p>
|
|
</div>
|
|
`;
|
|
|
|
fetch(`{{ route('search.ajax') }}?q=${encodeURIComponent(query)}`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
displaySearchResults(data.results, data.query);
|
|
} else {
|
|
showError('Search failed. Please try again.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Search error:', error);
|
|
showError('Search failed. Please try again.');
|
|
});
|
|
}
|
|
|
|
function displaySearchResults(results, query) {
|
|
let html = '<div class="container py-4">';
|
|
|
|
// Products section
|
|
if (results.products && results.products.length > 0) {
|
|
html += `
|
|
<div class="mb-4">
|
|
<h6 class="text-uppercase fs-xs fw-bold mb-3">Products</h6>
|
|
<div class="row g-3">
|
|
`;
|
|
|
|
results.products.forEach(product => {
|
|
html += `
|
|
<div class="col-6 col-md-3">
|
|
<a href="${product.route}" class="text-decoration-none">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-3">
|
|
<h6 class="card-title mb-1 text-truncate">${product.name}</h6>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div></div>';
|
|
}
|
|
|
|
// Categories section
|
|
if (results.categories && results.categories.length > 0) {
|
|
html += `
|
|
<div class="mb-4">
|
|
<h6 class="text-uppercase fs-xs fw-bold mb-3">Categories</h6>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
`;
|
|
|
|
results.categories.forEach(category => {
|
|
html += `
|
|
<a href="${category.route}"
|
|
class="btn btn-outline-secondary btn-sm">
|
|
${category.name}
|
|
</a>
|
|
`;
|
|
});
|
|
|
|
html += '</div></div>';
|
|
}
|
|
|
|
// Genders section
|
|
if (results.genders && results.genders.length > 0) {
|
|
html += `
|
|
<div class="mb-4">
|
|
<h6 class="text-uppercase fs-xs fw-bold mb-3">Genders</h6>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
`;
|
|
|
|
results.genders.forEach(gender => {
|
|
html += `
|
|
<a href="${gender.route}"
|
|
class="btn btn-outline-secondary btn-sm">
|
|
${gender.name}
|
|
</a>
|
|
`;
|
|
});
|
|
|
|
html += '</div></div>';
|
|
}
|
|
|
|
// No results
|
|
if (Object.keys(results).length === 0) {
|
|
html += `
|
|
<div class="text-center py-5">
|
|
<p class="text-muted mb-0">No results found for "${query}"</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += '</div>';
|
|
searchResults.innerHTML = html;
|
|
}
|
|
|
|
function showError(message) {
|
|
searchResults.innerHTML = `
|
|
<div class="container text-center py-5">
|
|
<div class="text-danger mb-3">
|
|
<i class="ci-alert-circle fs-1"></i>
|
|
</div>
|
|
<p class="text-muted mb-0">${message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
</script>
|