generated from boboko/starter
category page filters components and general ui - no functionality yet
This commit is contained in:
elvira
@@ -4,10 +4,10 @@
|
||||
@section('description', strip_tags($collection['description'] ?? ''))
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-8 py-12">
|
||||
<div class="max-w-5xl mx-auto pt-26 pb-12">
|
||||
|
||||
<div class="flex items-end justify-between gap-6 flex-wrap mb-10">
|
||||
<h1 class="font-display font-extrabold text-h1">{{ $collection['name'] }}</h1>
|
||||
<div class="flex items-end justify-between gap-6 flex-wrap mb-16">
|
||||
<h1 class="font-medium text-h2">{{ $collection['name'] }}</h1>
|
||||
|
||||
<x-breadcrumb :items="[
|
||||
['label' => __('storefront.nav.home'), 'href' => route('home')],
|
||||
@@ -15,33 +15,49 @@
|
||||
]" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between gap-6 flex-wrap border-b border-black pb-6 mb-10">
|
||||
<p class="text-neutral-600">
|
||||
{{ trans_choice('storefront.shop.showing_results', $products->total(), [
|
||||
'first' => $products->firstItem() ?? 0,
|
||||
'last' => $products->lastItem() ?? 0,
|
||||
'total' => $products->total(),
|
||||
]) }}
|
||||
</p>
|
||||
|
||||
{{-- Dummy — not wired to real sorting yet --}}
|
||||
<x-ui.select
|
||||
:ariaLabel="__('storefront.shop.sort_label')"
|
||||
:options="[
|
||||
['value' => 'default', 'label' => __('storefront.shop.sort_default')],
|
||||
['value' => 'popularity', 'label' => __('storefront.shop.sort_popularity')],
|
||||
['value' => 'price-asc', 'label' => __('storefront.shop.sort_price_asc')],
|
||||
['value' => 'price-desc', 'label' => __('storefront.shop.sort_price_desc')],
|
||||
['value' => 'newest', 'label' => __('storefront.shop.sort_newest')],
|
||||
]"
|
||||
value="default"
|
||||
/>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_230px] gap-14">
|
||||
|
||||
<div class="flex items-center justify-between gap-6 flex-wrap mb-7">
|
||||
{{-- <p class="text-neutral-600"> --}}
|
||||
<p>
|
||||
{{ trans_choice('storefront.shop.showing_results', $products->total(), [
|
||||
'first' => $products->firstItem() ?? 0,
|
||||
'last' => $products->lastItem() ?? 0,
|
||||
'total' => $products->total(),
|
||||
]) }}
|
||||
</p>
|
||||
|
||||
{{-- Dummy — not wired to real sorting yet. Options carry data-action
|
||||
for a future `category` Stimulus controller; no-op until that
|
||||
controller exists and a [data-controller="category"] wraps this. --}}
|
||||
<x-ui.dropdown
|
||||
id="category-sort"
|
||||
:label="__('storefront.shop.sort_popularity')"
|
||||
:ariaLabel="__('storefront.shop.sort_label')"
|
||||
triggerClass="min-w-48"
|
||||
>
|
||||
@foreach ([
|
||||
'popularity' => __('storefront.shop.sort_popularity'),
|
||||
'price-asc' => __('storefront.shop.sort_price_asc'),
|
||||
'price-desc' => __('storefront.shop.sort_price_desc'),
|
||||
'newest' => __('storefront.shop.sort_newest'),
|
||||
] as $value => $label)
|
||||
<x-ui.dropdown.item
|
||||
data-action="category#sort"
|
||||
data-category-sort-param="{{ $value }}"
|
||||
:current="$value === 'popularity'"
|
||||
>{{ $label }}</x-ui.dropdown.item>
|
||||
@endforeach
|
||||
</x-ui.dropdown>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-12">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_230px] gap-14">
|
||||
|
||||
{{-- Products --}}
|
||||
<div>
|
||||
|
||||
@if($products->isEmpty())
|
||||
<p class="text-neutral-500">{{ __('storefront.shop.no_products') }}</p>
|
||||
@else
|
||||
@@ -56,7 +72,7 @@
|
||||
{{-- Sidebar — search, price and availability filters are dummy for now --}}
|
||||
<aside class="flex flex-col gap-10">
|
||||
|
||||
<div>
|
||||
<div class="-mt-2">
|
||||
<label for="shop-search" class="sr-only">{{ __('storefront.shop.search_label') }}</label>
|
||||
<div class="relative">
|
||||
<x-ui.input
|
||||
@@ -76,24 +92,23 @@ class="absolute right-0 top-1/2 -translate-y-1/2"
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="font-display font-extrabold uppercase">{{ __('storefront.shop.filter_price') }}</h2>
|
||||
<p class="font-extrabold text-h4">{{ __('storefront.shop.filter_price') }}</p>
|
||||
|
||||
<div class="flex items-center gap-2" aria-hidden="true">
|
||||
<x-ui.icon name="arrow-left" :size="20" />
|
||||
<span class="flex-1 h-px bg-black"></span>
|
||||
<x-ui.icon name="arrow-right" :size="20" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="text-sm">€10 - €50</span>
|
||||
<button type="button" class="underline-slide [--slide-h:1px] font-display font-bold italic uppercase text-sm">
|
||||
{{ __('storefront.shop.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
{{-- Dummy — not wired to real price bounds or filtering yet. --}}
|
||||
<x-ui.range-slider
|
||||
:min="10"
|
||||
:max="50"
|
||||
prefix="€"
|
||||
separator=" - "
|
||||
:legend="__('storefront.shop.filter_price')"
|
||||
:min-label="__('storefront.shop.price_min')"
|
||||
:max-label="__('storefront.shop.price_max')"
|
||||
:reset-label="__('storefront.shop.reset')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="font-display font-extrabold uppercase">{{ __('storefront.shop.availability') }}</h2>
|
||||
<div class="flex flex-col gap-4 [&_label]:text-base">
|
||||
<p class="font-extrabold text-h4">{{ __('storefront.shop.availability') }}</p>
|
||||
<x-ui.checkbox id="shop-in-stock" name="in_stock">
|
||||
{{ __('storefront.shop.in_stock_only') }}
|
||||
</x-ui.checkbox>
|
||||
|
||||
Reference in New Issue
Block a user