generated from boboko/starter
108 lines
4.5 KiB
PHP
108 lines
4.5 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', $collection['name'] . ' — ' . config('app.name'))
|
|
@section('description', strip_tags($collection['description'] ?? ''))
|
|
|
|
@section('content')
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-8 py-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>
|
|
|
|
<x-breadcrumb :items="[
|
|
['label' => __('storefront.nav.home'), 'href' => route('home')],
|
|
['label' => $collection['name']],
|
|
]" />
|
|
</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>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-12">
|
|
|
|
{{-- Products --}}
|
|
<div>
|
|
@if($products->isEmpty())
|
|
<p class="text-neutral-500">{{ __('storefront.shop.no_products') }}</p>
|
|
@else
|
|
<x-product-grid :products="$products->items()" cols="3" />
|
|
|
|
<div class="mt-12">
|
|
<x-ui.pagination :paginator="$products" />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Sidebar — search, price and availability filters are dummy for now --}}
|
|
<aside class="flex flex-col gap-10">
|
|
|
|
<div>
|
|
<label for="shop-search" class="sr-only">{{ __('storefront.shop.search_label') }}</label>
|
|
<div class="relative">
|
|
<x-ui.input
|
|
type="search"
|
|
id="shop-search"
|
|
:placeholder="__('storefront.shop.search_placeholder')"
|
|
class="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="absolute right-0 top-1/2 -translate-y-1/2"
|
|
aria-label="{{ __('storefront.shop.search_label') }}"
|
|
>
|
|
<x-ui.icon name="search" :size="20" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<h2 class="font-display font-extrabold uppercase">{{ __('storefront.shop.filter_price') }}</h2>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<h2 class="font-display font-extrabold uppercase">{{ __('storefront.shop.availability') }}</h2>
|
|
<x-ui.checkbox id="shop-in-stock" name="in_stock">
|
|
{{ __('storefront.shop.in_stock_only') }}
|
|
</x-ui.checkbox>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
@endsection
|