Skip to content

Commit 73d0c40

Browse files
authored
Merge pull request #3 from shopperlabs/hide-zone-when-not-enable
feat: hide zone selection when not available and add collections to home
2 parents a7fec6d + 4fdf85a commit 73d0c40

File tree

4 files changed

+76
-27
lines changed

4 files changed

+76
-27
lines changed

stubs/livewire/app/Livewire/Pages/Home.php

+5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
namespace App\Livewire\Pages;
66

7+
use App\Models\Collection;
78
use App\Models\Product;
89
use Illuminate\Contracts\View\View;
910
use Livewire\Attributes\Layout;
@@ -25,6 +26,10 @@ public function render(): View
2526
])
2627
->publish()
2728
->get(),
29+
'collections' => Collection::with(['media'])
30+
->select('id', 'slug', 'name')
31+
->take(3)
32+
->get(),
2833
]);
2934
}
3035
}

stubs/livewire/resources/views/components/layouts/footer.blade.php

+4-2
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,10 @@ class="text-primary-500 hover:text-primary-700"
152152
</div>
153153
</div>
154154

155-
<!-- Zones Selector -->
156-
<x-zones-selector />
155+
@if(session()->has('zone'))
156+
<!-- Zones Selector -->
157+
<x-zones-selector />
158+
@endif
157159
</div>
158160
<div class="flex flex-col items-center border-t border-gray-200 py-8 sm:flex-row sm:justify-between lg:py-10">
159161
<p class="text-sm text-gray-700">
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,42 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
use App\Actions\ZoneSessionManager;
6+
use Livewire\Volt\Component;
7+
use Livewire\Attributes\Computed;
8+
use Shopper\Core\Models\Country;
9+
10+
new class extends Component {
11+
#[Computed(persist: true)]
12+
public function countryFlag(): string|null
13+
{
14+
return session('zone')
15+
? ZoneSessionManager::getSession()->countryFlag
16+
: (
17+
shopper_setting('country_id')
18+
? Country::query()->find(shopper_setting('country_id'))->svg_flag
19+
: null
20+
);
21+
}
22+
} ?>
23+
124
<div class="hidden lg:ml-8 lg:flex">
225
<button
3-
onclick="Livewire.dispatch('openPanel', { component: 'modals.zone-selector' })"
26+
@if(session('zone'))
27+
onclick="Livewire.dispatch('openPanel', { component: 'modals.zone-selector' })"
28+
@endif
429
type="button"
5-
class="flex items-center text-gray-700 hover:text-gray-800"
30+
@class([
31+
'flex items-center gap-2 text-gray-700 hover:text-gray-800',
32+
'cursor-default' => ! session()->has('zone')
33+
])
634
>
7-
<img src="{{ \App\Actions\ZoneSessionManager::getSession()?->countryFlag }}" alt="country flag" class="block h-auto w-5 shrink-0" />
8-
<span class="ml-2 block text-sm font-medium">{{ current_currency() }}</span>
9-
<span class="sr-only">, {{ __('changer la devise') }}</span>
35+
@if($this->countryFlag)
36+
<img src="{{ $this->countryFlag }}" alt="country flag" class="block h-auto w-5 shrink-0" />
37+
@endif
38+
39+
<span class="block text-sm font-medium">{{ current_currency() }}</span>
40+
<span class="sr-only">, {{ __('change currency') }}</span>
1041
</button>
1142
</div>

stubs/livewire/resources/views/livewire/pages/home.blade.php

+31-20
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-g
2929
</div>
3030
<div class="py-10">
3131
<x-buttons.primary href="#" class="group px-8 py-3 text-center text-base font-medium">
32-
{{ __('Shop New Arrivals') }}
32+
{{ __('Shop now') }}
3333
<span
3434
class="ml-2 translate-x-0 transform transition duration-200 ease-in-out group-hover:translate-x-1"
3535
>
@@ -43,32 +43,43 @@ class="ml-2 translate-x-0 transform transition duration-200 ease-in-out group-ho
4343

4444
<div class="bg-gray-50">
4545
<x-container class="py-16 lg:py-24">
46-
<div class="lg:grid lg:grid-cols-6 lg:gap-10">
47-
<div class="flex self-center sm:col-span-2">
48-
<div>
49-
<h1
50-
class="font-heading text-2xl font-extrabold tracking-tight text-gray-950 sm:text-3xl"
51-
>
52-
{{ __('Shop by collections') }}
53-
</h1>
54-
<div class="mt-8">
55-
<x-buttons.primary href="#" class="px-8 py-3 font-medium uppercase tracking-wider">
56-
{{ __('View all collections') }}
57-
<x-untitledui-arrow-narrow-right class="ml-2 size-5" />
58-
</x-buttons.primary>
59-
</div>
46+
@if($collections->isNotEmpty())
47+
<section aria-labelledby="collection-heading" class="mx-auto max-w-xl lg:max-w-none">
48+
<h2 id="collection-heading" class="font-heading text-2xl font-extrabold tracking-tight text-gray-950 sm:text-3xl">
49+
{{ __('Shop by Collection') }}
50+
</h2>
51+
<p class="mt-2 text-base text-gray-500">
52+
Each season, we collaborate with world-class designers to create a collection inspired by the natural world.
53+
</p>
54+
55+
<div class="mt-10 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:space-y-0">
56+
@foreach($collections as $collection)
57+
<x-link href="#" class="group block">
58+
<img
59+
src="{{ $collection->getFirstMediaUrl(config('shopper.media.storage.thumbnail_collection')) }}"
60+
alt="{{ $collection->name }}"
61+
class="aspect-[3/2] w-full object-cover group-hover:opacity-75 lg:aspect-[5/6]"
62+
/>
63+
<h3 class="mt-2 text-base font-semibold text-gray-900">
64+
{{ $collection->name }}
65+
</h3>
66+
</x-link>
67+
@endforeach
6068
</div>
61-
</div>
62-
</div>
63-
<div class="mt-16 max-w-3xl lg:mt-32 lg:max-w-none">
64-
<h2 class="font-heading text-2xl font-semibold tracking-tight text-gray-950 sm:text-3xl">Trending products</h2>
69+
</section>
70+
@endif
71+
72+
<section aria-labelledby="products-list" class="mt-16 max-w-3xl lg:mt-32 lg:max-w-none">
73+
<h2 class="font-heading text-2xl font-semibold tracking-tight text-gray-950 sm:text-3xl">
74+
{{ __('Trending products') }}
75+
</h2>
6576

6677
<div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
6778
@foreach ($products as $product)
6879
<x-product.card :product="$product" />
6980
@endforeach
7081
</div>
71-
</div>
82+
</section>
7283
</x-container>
7384
</div>
7485
</div>

0 commit comments

Comments
 (0)