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

update home

This commit is contained in:
Bayu Lukman Yusuf 2026-02-24 15:27:26 +07:00
parent 5b54da590c
commit 08f79062e9
14 changed files with 100 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Models/Gender.php
View File

@ -21,4 +21,16 @@ class Gender extends Model
protected $primaryKey = 'id'; protected $primaryKey = 'id';
protected $fillable = ['name', 'image']; protected $fillable = ['name', 'image'];
public function items()
{
return $this->hasMany(Items::class, 'gender_id', 'id');
}
public function productCount()
{
return $this->items()->count();
}
} }

1
app/Repositories/Catalog/GenderRepository.php
View File

@ -30,6 +30,7 @@ class GenderRepository
$ids = collect($ids)->pluck("gender"); $ids = collect($ids)->pluck("gender");
return Gender::whereIn("name",$ids)->get(); return Gender::whereIn("name",$ids)->get();
} }
return Gender::get(); return Gender::get();
} }
} }

11
app/View/Components/Grocery/FeaturedCategories.php
View File

@ -5,15 +5,18 @@ namespace App\View\Components\Grocery;
use Closure; use Closure;
use Illuminate\Contracts\View\View; use Illuminate\Contracts\View\View;
use Illuminate\View\Component; use Illuminate\View\Component;
use App\Repositories\Catalog\GenderRepository;
class FeaturedCategories extends Component class FeaturedCategories extends Component
{ {
protected $genders = [];
/** /**
* Create a new component instance. * Create a new component instance.
*/ */
public function __construct() public function __construct(GenderRepository $genderRepository)
{ {
// $this->genders = $genderRepository->getList([]);
} }
/** /**
@ -21,6 +24,8 @@ class FeaturedCategories extends Component
*/ */
public function render(): View|Closure|string public function render(): View|Closure|string
{ {
return view('components.grocery.featured-categories'); return view('components.grocery.featured-categories',[
"genders" => $this->genders,
]);
} }
} }

BIN
public/img/banner01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/img/banner02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/img/thumbnail_demo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 KiB

56
resources/views/components/grocery/featured-categories.blade.php
View File

@ -18,16 +18,16 @@
}'> }'>
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- Category --> @foreach ($genders as $key => $value)
<div class="swiper-slide h-auto"> <div class="swiper-slide h-auto">
<div <div
class="position-relative d-flex justify-content-between align-items-center h-100 bg-primary-subtle rounded-5 overflow-hidden ps-2 ps-xl-3"> class="position-relative d-flex justify-content-between align-items-center h-100 bg-black rounded-5 overflow-hidden ps-2 ps-xl-3">
<div class="d-flex flex-column pt-4 px-3 pb-3"> <div class="d-flex flex-column pt-4 px-3 pb-3">
<p class="fs-xs pb-2 mb-1">124 products</p> <p class="fs-xs pb-2 mb-1">{{ $value->productCount() }} products</p>
<h2 class="h5 mb-2 mb-xxl-3">Only fresh fish to your table</h2> <h2 class="h5 mb-2 mb-xxl-3">{{ $value->name }}</h2>
<div class="nav"> <div class="nav">
<a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0" <a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0"
href="{{ route('product.index', ['filter[category]' => 'fresh-fish']) }}"> href="{{ route('product.index', ['filter[gender]' => $value->id]) }}">
<span class="animate-target">Shop now</span> <span class="animate-target">Shop now</span>
<i class="ci-chevron-right fs-base ms-1"></i> <i class="ci-chevron-right fs-base ms-1"></i>
</a> </a>
@ -35,54 +35,12 @@
</div> </div>
<div class="ratio w-100 align-self-end rtl-flip" <div class="ratio w-100 align-self-end rtl-flip"
style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)"> style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
<img src="/img/home/grocery/featured/01.png" alt="Image"> <img src="{{ asset('img/thumbnail_demo.png') }}" alt="Image">
</div> </div>
</div> </div>
</div> </div>
@endforeach
<!-- Category -->
<div class="swiper-slide h-auto">
<div
class="position-relative d-flex justify-content-between align-items-center h-100 bg-success-subtle rounded-5 overflow-hidden ps-2 ps-xl-3">
<div class="d-flex flex-column pt-4 px-3 pb-3">
<p class="fs-xs pb-2 mb-1">97 products</p>
<h2 class="h5 mb-2 mb-xxl-3">Products for Easter table</h2>
<div class="nav">
<a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0"
href="{{ route('product.index', ['filter[category]' => 'easter-table']) }}">
<span class="animate-target">Shop now</span>
<i class="ci-chevron-right fs-base ms-1"></i>
</a>
</div>
</div>
<div class="ratio w-100 align-self-end rtl-flip"
style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
<img src="/img/home/grocery/featured/02.png" alt="Image">
</div>
</div>
</div>
<!-- Category -->
<div class="swiper-slide h-auto">
<div
class="position-relative d-flex justify-content-between align-items-center h-100 bg-info-subtle rounded-5 overflow-hidden ps-2 ps-xl-3">
<div class="d-flex flex-column pt-4 px-3 pb-3">
<p class="fs-xs pb-2 mb-1">28 products</p>
<h2 class="h5 mb-2 mb-xxl-3">Berries from the garden</h2>
<div class="nav">
<a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0"
href="{{ route('product.index', ['filter[category]' => 'berries']) }}">
<span class="animate-target">Shop now</span>
<i class="ci-chevron-right fs-base ms-1"></i>
</a>
</div>
</div>
<div class="ratio w-100 align-self-end rtl-flip"
style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
<img src="/img/home/grocery/featured/03.png" alt="Image">
</div>
</div>
</div>
</div> </div>
<!-- Slider pagination (Bullets) --> <!-- Slider pagination (Bullets) -->

6
resources/views/components/grocery/home-slider.blade.php
View File

@ -44,7 +44,7 @@
</div> </div>
<div class="d-md-none" style="height: 380px"></div> <div class="d-md-none" style="height: 380px"></div>
<div class="d-none d-md-block d-lg-none" style="height: 420px"></div> <div class="d-none d-md-block d-lg-none" style="height: 420px"></div>
<div class="d-none d-lg-block d-xl-none" style="height: 500px"></div> <div class="d-none d-lg-block d-xl-none" style="height: 580px"></div>
<div class="d-none d-xl-block d-xxl-none" style="height: 560px"></div> <div class="d-none d-xl-block d-xxl-none" style="height: 660px"></div>
<div class="d-none d-xxl-block" style="height: 624px"></div> <div class="d-none d-xxl-block" style="height: 804px"></div>
</section> </section>

21
resources/views/components/grocery/popular-products.blade.php
View File

@ -18,7 +18,8 @@
href="{{ route('product.index', ['filter[category]' => $value->id]) }}"> href="{{ route('product.index', ['filter[category]' => $value->id]) }}">
<span class="animate-target text-truncate">{{ $value->name ?? '' }}</span> <span class="animate-target text-truncate">{{ $value->name ?? '' }}</span>
</a> </a>
<div class="fs-xs fw-normal text-body-secondary">{{ $value->productCount() }} products</div> <div class="fs-xs fw-normal text-body-secondary">{{ $value->productCount() }} products
</div>
</div> </div>
</div> </div>
</div> </div>
@ -32,8 +33,7 @@
<div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4"> <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
<h2 class="h3 mb-0">Popular products</h2> <h2 class="h3 mb-0">Popular products</h2>
<div class="nav ms-3"> <div class="nav ms-3">
<a class="nav-link animate-underline px-0 py-2" <a class="nav-link animate-underline px-0 py-2" href="{{ route('product.index') }}">
href="{{ route('product.index') }}">
<span class="animate-target">View all</span> <span class="animate-target">View all</span>
<i class="ci-chevron-right fs-base ms-1"></i> <i class="ci-chevron-right fs-base ms-1"></i>
</a> </a>
@ -48,17 +48,17 @@
<div class="col"> <div class="col">
<div class="card product-card h-100 bg-transparent border-0 shadow-none"> <div class="card product-card h-100 bg-transparent border-0 shadow-none">
<div class="position-relative z-2"> <div class="position-relative z-2">
<button type="button" {{-- <button type="button"
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2" class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body 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"> aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i> <i class="ci-heart animate-target"></i>
</button> </button> --}}
<a class="d-block p-2 p-lg-3" href="{{ route('product.detail', [$value->slug]) }}"> <a class="d-block p-2 p-lg-3" href="{{ route('product.detail', [$value->slug]) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)"> <div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
<img src="{{ $value->image_url }}" alt="Image" loading="lazy"> <img src="{{ $value->image_url }}" alt="Image" loading="lazy">
</div> </div>
</a> </a>
<div class="position-absolute w-100 start-0 bottom-0"> {{-- <div class="position-absolute w-100 start-0 bottom-0">
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3"> <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
<div <div
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2"> class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
@ -77,7 +77,7 @@
</button> </button>
</div> </div>
</div> </div>
</div> </div> --}}
</div> </div>
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2"> <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
<div class="h6 mb-2">{{ $value->display_price_currency }}</div> <div class="h6 mb-2">{{ $value->display_price_currency }}</div>
@ -86,7 +86,10 @@
href="{{ route('product.detail', [$value->slug]) }}">{{ $value->name }}</a> href="{{ route('product.detail', [$value->slug]) }}">{{ $value->name }}</a>
</h3> </h3>
</div> </div>
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">{{ $value->unit }}</div> @if ($value->variants->count() > 1)
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">
+{{ $value->variants->count() - 1 }} Varian</div>
@endif
</div> </div>
</div> </div>
@endforeach @endforeach

8
resources/views/components/grocery/shop-by-lifestyle.blade.php
View File

@ -23,11 +23,12 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
@foreach ($brands as $brand) @foreach ($brands as $brand)
<!-- Category --> @if ($brand->image_url)
<div class="swiper-slide text-center"> <div class="swiper-slide text-center">
<div <div
class="position-relative d-inline-block text-dark-emphasis bg-warning-subtle rounded-circle p-5 mb-4"> class="position-relative d-inline-block text-dark-emphasis bg-white border border-2 rounded-circle p-5 mb-4">
<img width="64" height="64" src="{{ $brand->image_url }}" alt="{{ $brand->name }}" class="img-fluid"> <img width="64" height="64" src="{{ $brand->image_url }}" alt="{{ $brand->name }}"
class="img-fluid">
</div> </div>
<h3 class="h5 mb-2"> <h3 class="h5 mb-2">
<a class="animate-underline stretched-link" <a class="animate-underline stretched-link"
@ -37,6 +38,7 @@
</h3> </h3>
{{-- <p class="fs-sm mb-0">Foods that don't contain gluten</p> --}} {{-- <p class="fs-sm mb-0">Foods that don't contain gluten</p> --}}
</div> </div>
@endif
@endforeach @endforeach
</div> </div>

20
resources/views/components/grocery/special-products.blade.php
View File

@ -4,18 +4,18 @@
<!-- Banner --> <!-- Banner -->
<div class="col-sm-5 col-md-4 col-lg-3 mb-5 mb-sm-0"> <div class="col-sm-5 col-md-4 col-lg-3 mb-5 mb-sm-0">
<div class="pe-lg-2 pe-xl-4"> <div class="pe-lg-2 pe-xl-4">
<div class="rounded-4 overflow-hidden" style="background-color: #a6cddc" data-bs-theme="light"> <div class="rounded-4 overflow-hidden" style="background-color: #000000" data-bs-theme="light">
<div class="pt-3 px-3 mt-3 mx-3"> <div class="pt-3 px-3 mt-3 mx-3">
<h4 class="mb-2 mb-xl-3">Make breakfast healthy and easy</h4> <h4 class="mb-2 mb-xl-3 text-white">Find your ways</h4>
<div class="nav"> <div class="nav">
<a class="nav-link animate-underline stretched-link px-0" href="#!"> <a class="nav-link animate-underline stretched-link px-0 text-white" href="#!">
<span class="animate-target">Shop now</span> <span class="animate-target">Shop now</span>
<i class="ci-chevron-right fs-base mt-1 ms-1"></i> <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="ratio mt-n2" style="--cz-aspect-ratio: calc(240 / 282 * 100%)"> <div class="ratio mt-n2" style="--cz-aspect-ratio: calc(282 / 282 * 100%)">
<img src="/img/shop/grocery/banner.jpg" alt="Banner"> <img src="{{ asset('img/thumbnail_demo.png') }}" alt="Banner">
</div> </div>
</div> </div>
</div> </div>
@ -56,17 +56,17 @@
style="width: 171.75px; margin-right: 24px;"> style="width: 171.75px; margin-right: 24px;">
<div class="card product-card h-100 bg-transparent border-0 shadow-none"> <div class="card product-card h-100 bg-transparent border-0 shadow-none">
<div class="position-relative z-2"> <div class="position-relative z-2">
<button type="button" {{-- <button type="button"
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2" class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body 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"> aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i> <i class="ci-heart animate-target"></i>
</button> </button> --}}
<a class="d-block p-2 p-lg-3" href="{{ route('product.detail', $value->slug) }}"> <a class="d-block p-2 p-lg-3" href="{{ route('product.detail', $value->slug) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)"> <div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
<img src="{{ $value->image_url }}" alt="Image"> <img src="{{ $value->image_url }}" alt="Image">
</div> </div>
</a> </a>
<div class="position-absolute w-100 start-0 bottom-0"> {{-- <div class="position-absolute w-100 start-0 bottom-0">
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3"> <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
<div <div
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2"> class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
@ -85,7 +85,7 @@
</button> </button>
</div> </div>
</div> </div>
</div> </div> --}}
</div> </div>
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2"> <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
<div class="h6 mb-2">{{ $value->display_price_currency }}</div> <div class="h6 mb-2">{{ $value->display_price_currency }}</div>

4
resources/views/components/grocery/top-header.blade.php
View File

@ -4,14 +4,16 @@
<div class="nav flex-nowrap justify-content-between gap-4 py-2"> <div class="nav flex-nowrap justify-content-between gap-4 py-2">
@foreach ($brands as $key => $brand) @foreach ($brands as $key => $brand)
@if ($brand->image_url)
<a class="nav-link align-items-center animate-underline gap-2 p-0" <a class="nav-link align-items-center animate-underline gap-2 p-0"
href="{{ route('product.index', ['filter[brand]' => $brand->id]) }}"> href="{{ route('product.index', ['filter[brand]' => $brand->id]) }}">
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle" <span class="d-flex align-items-center justify-content-center bg-white border rounded-circle"
style="width: 40px; height: 40px"> style="width: 40px; height: 40px">
<img src="{{ $brand->image_url }}" width="30" alt="Image"> <img src="{{ $brand->image_url }}" width="30" alt="Image">
</span> </span>
<span class="d-block animate-target fw-semibold text-nowrap ms-1">{{ $brand->name }}</span> <span class="d-block animate-target fw-semibold text-nowrap ms-1">{{ $brand->name }}</span>
</a> </a>
@endif
@endforeach @endforeach
</div> </div>

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

@ -17,7 +17,9 @@
</button> </button>
<!-- Navbar brand (Logo) --> <!-- Navbar brand (Logo) -->
<a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5" href="/">AsiaGolf</a> <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5" href="/">
<img src="{{ asset('logo/logo-colored.png') }}" alt="Logo" style="height:42px !important;width: auto !important;max-width: none !important;" />
</a>
<!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) --> <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
<x-grocery.header-category-dropdown /> <x-grocery.header-category-dropdown />

10
resources/views/home/grocery.blade.php
View File

@ -30,7 +30,7 @@
<!-- Recipes --> <!-- Recipes -->
<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4"> {{-- <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4">
<h2 class="h3 mb-4">Recipes</h2> <h2 class="h3 mb-4">Recipes</h2>
<div class="row"> <div class="row">
@ -153,7 +153,7 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section> --}}
<!-- CTA banners --> <!-- CTA banners -->
@ -204,7 +204,7 @@
</div> </div>
<div class="ratio align-self-sm-end order-sm-1 rtl-flip" <div class="ratio align-self-sm-end order-sm-1 rtl-flip"
style="--cz-aspect-ratio: calc(284 / 330 * 100%); max-width: 330px"> style="--cz-aspect-ratio: calc(284 / 330 * 100%); max-width: 330px">
<img src="/img/home/grocery/banner01.png" alt="Image"> <img src="{{ asset('img/banner01.png') }}" alt="Image">
</div> </div>
</div> </div>
</div> </div>
@ -213,8 +213,8 @@
<div class="col-lg-5"> <div class="col-lg-5">
<div class="d-flex align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden"> <div class="d-flex align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
<div class="ratio align-self-end rtl-flip" <div class="ratio align-self-end rtl-flip"
style="--cz-aspect-ratio: calc(284 / 244 * 100%); max-width: 244px"> style="--cz-aspect-ratio: calc(244 / 244 * 100%); max-width: 244px">
<img src="/img/home/grocery/banner02.png" alt="Image"> <img src="{{ asset('img/banner02.png') }}" alt="Image">
</div> </div>
<div class="p-4"> <div class="p-4">
<h2 class="h4 mb-sm-4">We'd love to hear what you think!</h2> <h2 class="h4 mb-sm-4">We'd love to hear what you think!</h2>