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

list product, show list filter category, gender

This commit is contained in:
Bayu Lukman Yusuf 2026-01-06 14:12:36 +07:00
parent 64892821d9
commit e0e853e2b8
7 changed files with 150 additions and 693 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/Http/Controllers/ProductController.php
View File

@ -2,18 +2,50 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\Items; use App\Repositories\Catalog\CategoryRepository;
use App\Repositories\Catalog\GenderRepository;
use App\Repositories\Catalog\ProductRepository; use App\Repositories\Catalog\ProductRepository;
use Illuminate\Http\Request; use Illuminate\Http\Request;
class ProductController extends Controller class ProductController extends Controller
{ {
public function index(Request $request)
{
$page = $request->page ?? 1;
$filters = $request->filter ?? [];
$sortBy = $request->sort_by ?? 'relevance';
$genderRepository = new GenderRepository;
$categoryRepository = new CategoryRepository;
$genders = $genderRepository->getList([]);
$categories = $categoryRepository->getList([]);
$productRepository = new ProductRepository;
$products = $productRepository->getList([
'limit' => 20,
'sort_by' => $sortBy,
]);
return view('shop.catalog-fashion', [
'filters' => $filters,
'genders' => $genders,
'categories' => $categories,
'products' => $products,
'page' => $page,
]);
}
public function detail($slug, Request $request, ProductRepository $productRepository) public function detail($slug, Request $request, ProductRepository $productRepository)
{ {
$product = $productRepository->show($slug); $product = $productRepository->show($slug);
$complete_look_products_data = $productRepository->getList([ $complete_look_products_data = $productRepository->getList([
'category_id' => $product->category1_id, 'category_id' => $product->category1_id,
'limit' => 4, 'limit' => 4,
@ -21,11 +53,10 @@ class ProductController extends Controller
$complete_look_products = collect($complete_look_products_data->items())->chunk(2); $complete_look_products = collect($complete_look_products_data->items())->chunk(2);
return view('shop.product-fashion', [
return view('shop.product-fashion',[ 'product' => $product,
'product' => $product,
'complete_look_products' => $complete_look_products, 'complete_look_products' => $complete_look_products,
]); ]);
} }
} }

2
app/Models/StoreCategory.php
View File

@ -22,4 +22,6 @@ class StoreCategory extends Model
{ {
return $this->hasMany(StoreCapacity::class); return $this->hasMany(StoreCapacity::class);
} }
} }

14
lang/en/catalog_fashion.php Normal file
View File

@ -0,0 +1,14 @@
<?php
return [
'categories' => 'Categories',
'genders' => 'Genders',
'price' => 'Price',
'filter' => 'Filter',
'sort_by' => 'Sort by',
'sort_relevance' => 'Relevance',
'sort_popularity' => 'Popularity',
'sort_price_low_to_high' => 'Price: Low to High',
'sort_price_high_to_low' => 'Price: High to Low',
'sort_newest_arrivals' => 'Newest Arrivals',
];

14
lang/id/catalog_fashion.php Normal file
View File

@ -0,0 +1,14 @@
<?php
return [
'categories' => 'Kategori',
'genders' => 'Gender',
'price' => 'Harga',
'filter' => 'Filter',
'sort_by' => 'Urutkan',
'sort_relevance' => 'Relevan',
'sort_popularity' => 'Popularitas',
'sort_price_low_to_high' => 'Harga: Dari Rendah ke Tinggi',
'sort_price_high_to_low' => 'Harga: Dari Tinggi ke Rendah',
'sort_newest_arrivals' => 'Terbaru',
];

2
resources/views/components/layout/navbar-category.blade.php
View File

@ -57,7 +57,7 @@
@foreach ($chunks as $chunk) @foreach ($chunks as $chunk)
<li class="d-flex w-100 pt-1"> <li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">{{ $chunk->name }}</a> href="{{ route('product.index', ['filter[category]' => $chunk->name, 'filter[gender]' => $gender->name]) }}">{{ $chunk->name }}</a>
</li> </li>
@endforeach @endforeach

767
resources/views/shop/catalog-fashion.blade.php
View File

@ -218,50 +218,65 @@
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
data-bs-target="#filterSidebar" aria-label="Close"></button> data-bs-target="#filterSidebar" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body flex-column pt-2 py-lg-0">
<!-- Selected filters + Sorting --> <div class="offcanvas-body flex-column pt-2 py-lg-0">
<div class="pb-4 mb-2 mb-xl-3"> @if (count($filters) > 0)
<div class="d-flex align-items-center justify-content-between mb-3"> <!-- Selected filters + Sorting -->
<h4 class="h6 mb-0">Filter</h4> <div class="pb-4 mb-2 mb-xl-3">
<button type="button" <div class="d-flex align-items-center justify-content-between mb-3">
class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2"> <h4 class="h6 mb-0">Filter</h4>
Clear all <a type="button" href="{{ route('product.index') }}"
</button> class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
Clear all
</a>
</div>
<div class="d-flex flex-wrap gap-2">
@foreach ($filters as $key => $filter)
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-close fs-sm ms-n1 me-1"></i>
{{ $filter }}
</button>
@endforeach
</div>
</div> </div>
<div class="d-flex flex-wrap gap-2"> @endif
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-close fs-sm ms-n1 me-1"></i>
Sale
</button>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-close fs-sm ms-n1 me-1"></i>
Adidas
</button>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-close fs-sm ms-n1 me-1"></i>
Bilabong
</button>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-close fs-sm ms-n1 me-1"></i>
Size: XXS
</button>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-close fs-sm ms-n1 me-1"></i>
$40 - $150
</button>
</div>
</div>
<div class="accordion"> <div class="accordion">
<!-- Genders -->
<div class="accordion-item border-0 pb-1 pb-xl-2">
<h4 class="accordion-header" id="headingGenders">
<button type="button" class="accordion-button p-0 pb-3"
data-bs-toggle="collapse" data-bs-target="#genders" aria-expanded="true"
aria-controls="genders">
{{ __('catalog_fashion.genders') }}
</button>
</h4>
<div class="accordion-collapse collapse show" id="genders"
aria-labelledby="headingGenders">
<div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
<div style="height: 220px" data-simplebar data-simplebar-auto-hide="false">
<ul class="nav flex-column gap-2 pe-3">
@foreach ($genders as $gender)
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="{{ route('product.index', array_merge(request()->except('filter[gender]'), ['filter[gender]' => $gender->name])) }}">
{{ $gender->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
<!-- Categories --> <!-- Categories -->
<div class="accordion-item border-0 pb-1 pb-xl-2"> <div class="accordion-item border-0 pb-1 pb-xl-2">
<h4 class="accordion-header" id="headingCategories"> <h4 class="accordion-header" id="headingCategories">
<button type="button" class="accordion-button p-0 pb-3" <button type="button" class="accordion-button p-0 pb-3"
data-bs-toggle="collapse" data-bs-target="#categories" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#categories" aria-expanded="true"
aria-controls="categories"> aria-controls="categories">
Categories {{ __('catalog_fashion.categories') }}
</button> </button>
</h4> </h4>
<div class="accordion-collapse collapse show" id="categories" <div class="accordion-collapse collapse show" id="categories"
@ -269,111 +284,13 @@
<div class="accordion-body p-0 pb-4 mb-1 mb-xl-2"> <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
<div style="height: 220px" data-simplebar data-simplebar-auto-hide="false"> <div style="height: 220px" data-simplebar data-simplebar-auto-hide="false">
<ul class="nav flex-column gap-2 pe-3"> <ul class="nav flex-column gap-2 pe-3">
<li class="nav-item mb-1"> @foreach ($categories as $category)
<a class="nav-link d-block fw-normal p-0" href="#!"> <li class="nav-item mb-1">
Blazers &amp; Suits<span <a class="nav-link d-block fw-normal p-0" href="{{ route('product.index', array_merge(request()->except('filter[category]'), ['filter[category]' => $category->name])) }}">
class="fs-xs text-body-secondary ms-1">(235)</span> {{ $category->name }}
</a> </a>
</li> </li>
<li class="nav-item mb-1"> @endforeach
<a class="nav-link d-block fw-normal p-0" href="#!">
Blouses<span
class="fs-xs text-body-secondary ms-1">(235)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Cardigans &amp; Jumpers<span
class="fs-xs text-body-secondary ms-1">(107)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Dresses<span class="fs-xs text-body-secondary ms-1">(93)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Hoodie &amp; Sweatshirts<span
class="fs-xs text-body-secondary ms-1">(122)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Jackets &amp; Coats<span
class="fs-xs text-body-secondary ms-1">(116)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Jeans<span class="fs-xs text-body-secondary ms-1">(215)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Lingerie<span
class="fs-xs text-body-secondary ms-1">(150)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Maternity Wear<span
class="fs-xs text-body-secondary ms-1">(8)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Nightwear<span
class="fs-xs text-body-secondary ms-1">(26)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Shirts &amp; Tops<span
class="fs-xs text-body-secondary ms-1">(164)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Shorts<span class="fs-xs text-body-secondary ms-1">(147)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Socks &amp; Tights<span
class="fs-xs text-body-secondary ms-1">(139)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Sportswear<span
class="fs-xs text-body-secondary ms-1">(65)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Swimwear<span
class="fs-xs text-body-secondary ms-1">(18)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
T-shirts &amp; Vests<span
class="fs-xs text-body-secondary ms-1">(209)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Trousers<span
class="fs-xs text-body-secondary ms-1">(105)</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link d-block fw-normal p-0" href="#!">
Underwear<span
class="fs-xs text-body-secondary ms-1">(87)</span>
</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -417,7 +334,7 @@
</div> </div>
<!-- Brands --> <!-- Brands -->
<div class="accordion-item border-0 pb-1 pb-xl-2"> {{-- <div class="accordion-item border-0 pb-1 pb-xl-2">
<h4 class="accordion-header" id="headingBrands"> <h4 class="accordion-header" id="headingBrands">
<button type="button" class="accordion-button p-0 pb-3" <button type="button" class="accordion-button p-0 pb-3"
data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true"
@ -593,10 +510,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> --}}
<!-- Size --> <!-- Size -->
<div class="accordion-item border-0 pb-1 pb-xl-2"> {{-- <div class="accordion-item border-0 pb-1 pb-xl-2">
<h4 class="accordion-header" id="headingSize"> <h4 class="accordion-header" id="headingSize">
<button type="button" class="accordion-button p-0 pb-3" <button type="button" class="accordion-button p-0 pb-3"
data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true"
@ -642,10 +559,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> --}}
<!-- Color --> <!-- Color -->
<div class="accordion-item border-0 pb-1 pb-xl-2"> {{-- <div class="accordion-item border-0 pb-1 pb-xl-2">
<h4 class="accordion-header" id="headingColor"> <h4 class="accordion-header" id="headingColor">
<button type="button" class="accordion-button p-0 pb-3" <button type="button" class="accordion-button p-0 pb-3"
data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="true"
@ -696,7 +613,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> --}}
<!-- Status --> <!-- Status -->
<div class="accordion-item border-0"> <div class="accordion-item border-0">
@ -742,11 +659,11 @@
<!-- Sorting --> <!-- Sorting -->
<div class="d-sm-flex align-items-center justify-content-between mt-n2 mb-3 mb-sm-4"> <div class="d-sm-flex align-items-center justify-content-between mt-n2 mb-3 mb-sm-4">
<div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold">32</span> <div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold">{{ count($products) }}</span>
items items
</div> </div>
<div class="d-flex align-items-center text-nowrap"> <div class="d-flex align-items-center text-nowrap">
<label class="form-label fw-semibold mb-0 me-2">Sort by:</label> <label class="form-label fw-semibold mb-0 me-2">{{ __('catalog_fashion.sort_by') }}:</label>
<div style="width: 190px"> <div style="width: 190px">
<select class="form-select border-0 rounded-0 px-1" <select class="form-select border-0 rounded-0 px-1"
data-select='{ data-select='{
@ -754,12 +671,13 @@
"classNames": { "classNames": {
"containerInner": ["form-select", "border-0", "rounded-0", "px-1"] "containerInner": ["form-select", "border-0", "rounded-0", "px-1"]
} }
}'> }'
<option value="Relevance">Relevance</option> onchange="window.location.href='{{ route('product.index') }}?sort_by='+this.value+'&{{ http_build_query(request()->except('sort_by')) }}'">
<option value="Popularity">Popularity</option> <option value="relevance" {{ request('sort_by') == 'relevance' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_relevance') }}</option>
<option value="Price: Low to High">Price: Low to High</option> <option value="popularity" {{ request('sort_by') == 'popularity' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_popularity') }}</option>
<option value="Price: High to Low">Price: High to Low</option> <option value="price_low_to_high" {{ request('sort_by') == 'price_low_to_high' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_low_to_high') }}</option>
<option value="Newest Arrivals">Newest Arrivals</option> <option value="price_high_to_low" {{ request('sort_by') == 'price_high_to_low' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_high_to_low') }}</option>
<option value="newest_arrivals" {{ request('sort_by') == 'newest_arrivals' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_newest_arrivals') }}</option>
</select> </select>
</div> </div>
</div> </div>
@ -767,327 +685,17 @@
<div class="row gy-4 gy-md-5 pb-4 pb-md-5"> <div class="row gy-4 gy-md-5 pb-4 pb-md-5">
<!-- Item --> @foreach ($products as $key => $value)
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0"> <!-- Item -->
<div class="animate-underline hover-effect-opacity"> <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="position-relative mb-3"> <x-home.product-card :product="$value" />
<span
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">Sale</span>
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/01.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Denim midi skirt with pockets</span>
</a>
</div>
<div class="h6 mb-2">$126.50 <del class="fs-sm fw-normal text-body-tertiary">$156.00</del>
</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-1" id="color-1-1" checked>
<label for="color-1-1" class="btn btn-color fs-base" style="color: #284971">
<span class="visually-hidden">Dark denim</span>
</label>
<input type="radio" class="btn-check" name="colors-1" id="color-1-2">
<label for="color-1-2" class="btn btn-color fs-base" style="color: #8b9bc4">
<span class="visually-hidden">Light denim</span>
</label>
</div>
</div>
</div> </div>
</div> @endforeach
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/02.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+1</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Cotton lace blouse with necklace</span>
</a>
</div>
<div class="h6 mb-2">$54.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-2" id="color-2-1"
checked>
<label for="color-2-1" class="btn btn-color fs-base" style="color: #dcb1b1">
<span class="visually-hidden">Pink</span>
</label>
<input type="radio" class="btn-check" name="colors-2" id="color-2-2">
<label for="color-2-2" class="btn btn-color fs-base" style="color: #ced6f0">
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors-2" id="color-2-3">
<label for="color-2-3" class="btn btn-color fs-base" style="color: #e1e0cf">
<span class="visually-hidden">Mustard</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/03.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Sneakers with a massive sole</span>
</a>
</div>
<div class="h6 mb-2">$86.50</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-3" id="color-3-1"
checked>
<label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
<input type="radio" class="btn-check" name="colors-3" id="color-3-2">
<label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/04.png" alt="Image">
</div>
</a>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Knitted bag with a wooden handle</span>
</a>
</div>
<div class="h6 mb-2">$105.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-4" id="color-4-1"
checked>
<label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
<span class="visually-hidden">Beige</span>
</label>
<input type="radio" class="btn-check" name="colors-4" id="color-4-2">
<label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
<span class="visually-hidden">Blue</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<span
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/05.png" alt="Image">
</div>
</a>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Polarized sunglasses for men</span>
</a>
</div>
<div class="h6 mb-2">$96.00 <del
class="fs-sm fw-normal text-body-tertiary">$112.00</del>
</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-5" id="color-5-1"
checked>
<label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
<span class="visually-hidden">Green</span>
</label>
<input type="radio" class="btn-check" name="colors-5" id="color-5-2">
<label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors-5" id="color-5-3">
<label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
<span class="visually-hidden">Brown</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/06.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Classic cotton men's shirt</span>
</a>
</div>
<div class="h6 mb-2">$27.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+3 colors</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-6" id="color-6-1"
checked>
<label for="color-6-1" class="btn btn-color fs-base" style="color: #c1cde7">
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors-6" id="color-6-2">
<label for="color-6-2" class="btn btn-color fs-base" style="color: #526f99">
<span class="visually-hidden">Dark blue</span>
</label>
<input type="radio" class="btn-check" name="colors-6" id="color-6-3">
<label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
<input type="radio" class="btn-check" name="colors-6" id="color-6-4">
<label for="color-6-4" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
<!-- Banner --> <!-- Banner -->
<div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0"> {{-- <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
<div <div
class="position-relative bg-body-tertiary text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5"> class="position-relative bg-body-tertiary text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5">
<p class="fs-xs text-body-secondary mb-1">Sweatshirts</p> <p class="fs-xs text-body-secondary mb-1">Sweatshirts</p>
@ -1125,228 +733,16 @@
href="{{ route('second', ['shop', 'product-fashion']) }}">Shop href="{{ route('second', ['shop', 'product-fashion']) }}">Shop
now</a> now</a>
</div> </div>
</div> </div> --}}
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/07.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Black massive women's boots</span>
</a>
</div>
<div class="h6 mb-2">$160.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-7" id="color-7-1"
checked>
<label for="color-7-1" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
<input type="radio" class="btn-check" name="colors-7" id="color-7-2">
<label for="color-7-2" class="btn btn-color fs-base" style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/08.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">8</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Leather sneakers with golden laces</span>
</a>
</div>
<div class="h6 mb-2">$74.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-8" id="color-8-1"
checked>
<label for="color-8-1" class="btn btn-color fs-base" style="color: #b1aa9b">
<span class="visually-hidden">Cream</span>
</label>
<input type="radio" class="btn-check" name="colors-8" id="color-8-2">
<label for="color-8-2" class="btn btn-color fs-base" style="color: #496c33">
<span class="visually-hidden">Dark green</span>
</label>
<input type="radio" class="btn-check" name="colors-8" id="color-8-3">
<label for="color-8-3" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/09.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">White cotton blouse with necklace</span>
</a>
</div>
<div class="h6 mb-2">$38.50</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-9" id="color-9-1"
checked>
<label for="color-9-1" class="btn btn-color fs-base" style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
<input type="radio" class="btn-check" name="colors-9" id="color-9-2">
<label for="color-9-2" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/10.png" alt="Image">
</div>
</a>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Leather handbag for women</span>
</a>
</div>
<div class="h6 mb-2">$140.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-10" id="color-10-1"
checked>
<label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
<span class="visually-hidden">Olive</span>
</label>
<input type="radio" class="btn-check" name="colors-10" id="color-10-2">
<label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
<input type="radio" class="btn-check" name="colors-10" id="color-10-3">
<label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
<span class="visually-hidden">Blue</span>
</label>
</div>
</div>
</div>
</div>
</div> </div>
<!-- Show more button --> <!-- Show more button -->
<button type="button" class="btn btn-lg btn-outline-secondary w-100"> <a href="{{ route('product.index', array_merge(request()->except('page'), ['page' => $page + 1])) }}" type="button" class="btn btn-lg btn-outline-secondary w-100">
Show more Show more
<i class="ci-chevron-down fs-xl ms-2 me-n1"></i> <i class="ci-chevron-down fs-xl ms-2 me-n1"></i>
</button> </a>
</div> </div>
</div> </div>
</section> </section>
@ -1423,8 +819,7 @@
<button type="button" <button type="button"
class="fixed-bottom z-sticky w-100 btn btn-lg btn-dark border-0 border-top border-light border-opacity-10 rounded-0 pb-4 d-lg-none" class="fixed-bottom z-sticky w-100 btn btn-lg btn-dark border-0 border-top border-light border-opacity-10 rounded-0 pb-4 d-lg-none"
data-bs-toggle="offcanvas" data-bs-target="#filterSidebar" aria-controls="filterSidebar" data-bs-toggle="offcanvas" data-bs-target="#filterSidebar" aria-controls="filterSidebar" data-bs-theme="light">
data-bs-theme="light">
<i class="ci-filter fs-base me-2"></i> <i class="ci-filter fs-base me-2"></i>
Filters Filters
</button> </button>

1
routes/web.php
View File

@ -23,4 +23,5 @@ Route::post('/locale/switch', [LocaleController::class, 'switch'])->name('locale
Route::get('/', [HomeController::class, 'index'])->name('home'); Route::get('/', [HomeController::class, 'index'])->name('home');
Route::get('/products',[ProductController::class, 'index'])->name('product.index');
Route::get('/product/{slug}',[ProductController::class, 'detail'])->name('product.detail'); Route::get('/product/{slug}',[ProductController::class, 'detail'])->name('product.detail');