SMG_DEV
/
ECOMMERCE
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search

This commit is contained in:
Bayu Lukman Yusuf 2026-02-27 16:29:57 +07:00
parent f2c2cf11ed
commit f78819c9b9
1 changed files with 65 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
resources/views/components/layout/header-grocery.blade.php
View File

@ -27,13 +27,19 @@
<!-- Search bar visible on screens > 768px wide (md breakpoint) --> <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
<div class="position-relative w-100 d-none d-md-block me-3 me-xl-4"> <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
<input type="search" class="form-control form-control-lg rounded-pill" <form action="{{ route('product.index') }}" method="GET" id="header-search-form">
placeholder="Search for products" aria-label="Search"> <input type="search"
<button type="button" class="form-control form-control-lg rounded-pill"
class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1" name="search"
aria-label="Search button"> placeholder="Search for products"
<i class="ci-search"></i> aria-label="Search"
</button> value="{{ request('search') }}">
<button type="submit"
class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
aria-label="Search button">
<i class="ci-search"></i>
</button>
</form>
</div> </div>
<!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) --> <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
@ -159,9 +165,15 @@
<div class="collapse d-md-none" id="searchBar"> <div class="collapse d-md-none" id="searchBar">
<div class="container pt-2 pb-3"> <div class="container pt-2 pb-3">
<div class="position-relative"> <div class="position-relative">
<i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i> <form action="{{ route('product.index') }}" method="GET" id="mobile-search-form">
<input type="search" class="form-control form-icon-start rounded-pill" <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
placeholder="Search for products" data-autofocus="collapse"> <input type="search"
class="form-control form-icon-start rounded-pill"
name="search"
placeholder="Search for products"
data-autofocus="collapse"
value="{{ request('search') }}">
</form>
</div> </div>
</div> </div>
</div> </div>
@ -169,3 +181,46 @@
<x-grocery.top-header /> <x-grocery.top-header />
<script>
document.addEventListener('DOMContentLoaded', function() {
// Handle desktop search form submission
const desktopSearchForm = document.getElementById('header-search-form');
if (desktopSearchForm) {
desktopSearchForm.addEventListener('submit', function(e) {
const searchInput = this.querySelector('input[name="search"]');
if (!searchInput.value.trim()) {
e.preventDefault();
searchInput.focus();
return false;
}
});
}
// Handle mobile search form submission
const mobileSearchForm = document.getElementById('mobile-search-form');
if (mobileSearchForm) {
mobileSearchForm.addEventListener('submit', function(e) {
const searchInput = this.querySelector('input[name="search"]');
if (!searchInput.value.trim()) {
e.preventDefault();
searchInput.focus();
return false;
}
});
}
// Add search suggestions functionality (optional enhancement)
const searchInputs = document.querySelectorAll('input[name="search"]');
searchInputs.forEach(input => {
input.addEventListener('input', function(e) {
const searchTerm = e.target.value.trim();
if (searchTerm.length >= 2) {
// You can implement AJAX search suggestions here
// For now, just log the search term
console.log('Searching for:', searchTerm);
}
});
});
});
</script>