Skip to content

Commit cb92b63

Browse files
cybersoldattechcybersoldattech
committed
Update store page and single page to modify product card , add css class to attributes etc...
1 parent 66c071b commit cb92b63

File tree

7 files changed

+31
-67
lines changed

7 files changed

+31
-67
lines changed

‎resources/views/components/attributes/color.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class="sr-only"
2222
aria-hidden="true"
2323
style="background-color: {{ $value->key }} "
2424
class="h-8 w-8 rounded-full "
25-
:class="selectedColorAttributes.includes('{{ $value->id }}') ? ' border-double border-2 border-primary-600' : 'border-double border-2 border-black border-opacity-10 ' "
25+
:class="selectedColorAttributes.includes('{{ $value->id }}') ? 'ring-2 ring-primary-600 ring-offset-2' : 'border-double border-2 border-black border-opacity-10 ' "
2626
></span>
2727
</label>
2828
</div>

‎resources/views/components/attributes/size.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="grid grid-cols-3 gap-3 sm:grid-cols-5 mt-6">
77
@foreach ($attribute->values as $value)
88
<label
9-
class="flex items-center justify-center px-3 py-3 text-sm font-medium uppercase border cursor-pointer focus:outline-none sm:flex-1"
9+
class="flex items-center justify-center px-3 py-3 text-sm font-medium uppercase border cursor-pointer focus:outline-none sm:flex-1 rounded-md"
1010
:class="selectedAttributes.includes('{{ $value->id }}') ? 'border-transparent bg-primary-600 text-white hover:bg-primary-700' : 'border-gray-200 bg-white text-gray-900 hover:bg-gray-50'">
1111
<input id="{{ $attribute->slug }}-{{ $value->id }}"
1212
wire:model.live.debounce.350ms="selectedAttributes"

‎resources/views/components/products/related.blade.php‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎resources/views/components/products/thumbnail.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
'containerClass' => null,
44
])
55

6-
<div @class(['aspect-1 overflow-hidden', $containerClass])>
6+
<div @class(['aspect-1 rounded-lg overflow-hidden', $containerClass])>
77
<img
88
src="{{ $product->getFirstMediaUrl(config('shopper.core.storage.thumbnail_collection')) }}"
99
alt="{{ $product->name}} thumbnail"

‎resources/views/livewire/pages/single-product.blade.php‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="bg-white">
22
<div class="py-3 bg-white border-b border-gray-200 bg-opacity-80">
33
<x-container class="flex items-center justify-between px-4">
4-
{{ Breadcrumbs::render('product', $selectedVariant ?? $product) }}
4+
{{ Breadcrumbs::render('product', $product , $selectedVariant ?? null) }}
55
</x-container>
66
</div>
77

@@ -67,8 +67,21 @@ class="text-base font-medium text-gray-900"
6767
<h2 class="text-xl font-bold text-gray-900">{{ __('Customers also bought') }}</h2>
6868

6969
<div class="grid grid-cols-1 mt-8 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
70-
@foreach ($product->relatedProducts as $relatedProduct)
71-
<x-products.related :product="$relatedProduct" />
70+
@foreach ($product->relatedProducts as $product)
71+
<div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
72+
<x-products.thumbnail :product="$product" class="aspect-[3/4] bg-gray-200 object-cover group-hover:opacity-75 sm:h-96" />
73+
<div class="flex flex-1 flex-col space-y-2 p-4">
74+
<h3 class="text-sm font-medium text-gray-900">
75+
<x-link :href="route('single-product', $product)">
76+
<span class="absolute inset-0"></span>
77+
{{ $product->name }}
78+
</x-link>
79+
</h3>
80+
<div class="flex flex-1 flex-col justify-end">
81+
<x-products.price :product="$product" class="mt-1" />
82+
</div>
83+
</div>
84+
</div>
7285
@endforeach
7386
</div>
7487
</section>

‎resources/views/livewire/pages/store.blade.php‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
wire:model.live.debounce.350ms="selectedAttributes"
3737
value="{{ $value->id }}"
3838
type="checkbox"
39-
class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
39+
class="size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
4040
>
4141
<label for="{{ $attribute->slug }}-{{ $index }}" class="ml-3 text-sm text-gray-600">{{ $value->value }}</label>
4242
</div>
@@ -54,29 +54,15 @@ class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
5454
<section aria-labelledby="product-heading" class="mt-6 lg:col-span-2 lg:mt-0 xl:col-span-3">
5555
<h2 id="product-heading" class="sr-only">{{ __('Products') }}</h2>
5656

57-
<div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-3">
57+
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 xl:gap-x-8">
5858
@foreach($products as $product)
59-
<div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
60-
<img
61-
src="{{ $product->getFirstMediaUrl(config('shopper.core.storage.thumbnail_collection')) }}"
62-
alt="{{ $product->name }} thumbnail"
63-
class="aspect-[3/4] bg-gray-200 object-cover group-hover:opacity-75 sm:h-96"
64-
>
65-
<div class="flex flex-1 flex-col space-y-2 p-4">
66-
<h3 class="text-sm font-medium text-gray-900">
67-
<x-link :href="route('single-product', $product)">
68-
<span class="absolute inset-0"></span>
69-
{{ $product->name }}
70-
</x-link>
71-
</h3>
72-
<div class="flex flex-1 flex-col justify-end">
73-
<x-products.price :product="$product" class="mt-1" />
74-
</div>
75-
</div>
76-
</div>
59+
<x-link :href="route('single-product', $product)" class="group">
60+
<x-products.thumbnail :product="$product" class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-[7/8]"/>
61+
<h3 class="mt-4 text-sm text-gray-700">{{ $product->name }}</h3>
62+
<x-products.price :product="$product" class="mt-1 text-lg font-medium text-gray-900"/>
63+
</x-link>
7764
@endforeach
7865
</div>
79-
8066
<div class="mt-2">
8167
{{ $products->links() }}
8268
</div>

‎routes/breadcrumbs/breadcrumbs.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111

1212
Breadcrumbs::for('store', function (Generator $trail) {
1313
$trail->parent('home');
14-
$trail->push('store', route('store.products'));
14+
$trail->push('Store', route('store.products'));
1515
});
1616

1717
Breadcrumbs::for('category', function (Generator $trail, $category) {
1818
$trail->parent('home');
19-
$trail->push($category->slug, route('category.products', $category));
19+
$trail->push($category->name, route('category.products', $category));
2020
});
2121

2222
Breadcrumbs::for('collection', function (Generator $trail, $collection) {
2323
$trail->parent('home');
24-
$trail->push($collection->slug, route('collection.products', $collection));
24+
$trail->push($collection->name, route('collection.products', $collection));
2525
});
2626

27-
Breadcrumbs::for('product', function (Generator $trail, $product) {
27+
Breadcrumbs::for('product', function (Generator $trail, $product, $variant = null) {
2828
$trail->parent('store');
29-
$trail->push($product->slug, route('single-product', $product));
29+
$trail->push($variant?->name ? $product->name . ' / ' . $variant->name : $product->name, route('single-product', $product));
3030
});

0 commit comments

Comments
 (0)