Skip to content

Update store page and single page to modify product card , add css cl… #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cybersoldattech merged 3 commits into from
Dec 7, 2024
Merged

Update store page and single page to modify product card , add css cl… #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb92b63
Update store page and single page to modify product card , add css cl…
cybersoldattech Dec 6, 2024
f894fb2
update shopper , add review in single product page and remove variant…
cybersoldattech Dec 6, 2024
ced0892
remove space , replace model on config delete unused variable
cybersoldattech Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/Livewire/Pages/SingleProduct.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

use App\Models\Product;
use Illuminate\Contracts\View\View;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Url;
use Livewire\Component;

Expand All @@ -28,6 +29,12 @@ public function mount(Product $product): void
]);
}

#[Computed]
public function getAverageRatingProperty(): float
{
return floatval($this->product->averageRating(1)->first());
}

public function render(): View
{
return view('livewire.pages.single-product', [
Expand Down
803 changes: 400 additions & 403 deletions composer.lock
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 30 additions & 8 deletions config/shopper/admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,26 @@

/*
|--------------------------------------------------------------------------
| Admin Brand Name
| Pages
|--------------------------------------------------------------------------
|
| This is the namespace and directory that Shopper save page components
|
*/

'pages' => [
'namespace' => 'App\\Shopper',
'view_path' => resource_path('views/shopper'),
],

/*
|--------------------------------------------------------------------------
| Brand Logo
|--------------------------------------------------------------------------
|
| This will be displayed on the login page and in the sidebar's header.
| This is your site's logo. It will be loaded directly from the public folder
| Ex: '/images/logo.svg'
|
*/

Expand Down Expand Up @@ -83,10 +99,17 @@

/*
|--------------------------------------------------------------------------
| Shopper Resource
| Additional Resources
|--------------------------------------------------------------------------
|
| Automatically connect the stored links. For example js and css files.
| Automatically load the assets links. For js and css files.
|
| Example:
|
| 'stylesheets' => [
| asset('/my-script.css'),
| 'https://example.com/my-style.css'
| ]
|
*/

Expand All @@ -97,17 +120,19 @@

/*
|--------------------------------------------------------------------------
| Shopper Inventory Limit
| Inventory Limit
|--------------------------------------------------------------------------
|
| Limits the number of inventories your store can manage, making it easier
| to manage your stock.
|
*/

'inventory_limit' => 4,

/*
|--------------------------------------------------------------------------
| Caching
| Caching Blade Icons
|--------------------------------------------------------------------------
|
| This section lets you configure the caching option of the icon picker component.
Expand All @@ -116,9 +141,6 @@
| searching through all of them can take quite a lot of time, which is
| why the plugin caches each field with it's configuration and search queries.
|
| This section let's you configure how caching should be done or disable it
| if you wish.
|
*/

'icon-picker' => [
Expand Down
16 changes: 0 additions & 16 deletions config/shopper/core.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,6 @@

'table_prefix' => 'sh_',

/*
|--------------------------------------------------------------------------
| Storage Disk
|--------------------------------------------------------------------------
|
| Specifies the configuration for resources storage, this will be to store
| all media of your products, brands, categories, etc.
|
*/

'storage' => [
'collection_name' => 'uploads',
'thumbnail_collection' => 'thumbnail',
'disk_name' => 'public',
],

/*
|--------------------------------------------------------------------------
| Barcode type
Expand Down
37 changes: 37 additions & 0 deletions config/shopper/media.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,28 @@

return [

/*
|--------------------------------------------------------------------------
| Storage Disk
|--------------------------------------------------------------------------
|
| Specifies the configuration for resources storage, this will be to store
| all media of your products, brands, categories, etc.
|
*/

'storage' => [
'collection_name' => 'uploads',
'thumbnail_collection' => 'thumbnail',
'disk_name' => 'public',
],

/*
|--------------------------------------------------------------------------
| Media Mine Types
|--------------------------------------------------------------------------
|
| Spatie media-library mime types supported when you upload any image
|
*/

Expand All @@ -18,11 +35,31 @@
'image/png',
],

/*
|--------------------------------------------------------------------------
| Media Filesize
|--------------------------------------------------------------------------
|
| This setting allows you to define the maximum size of your images.
|
*/

'max_size' => [
'thumbnail' => 1024, // Default size for thumbnail image (1MB). This config is the same for brand, category and collection thumbnail
'images' => 2048, // Default size for individual collection image for product (2MB)
],

/*
|--------------------------------------------------------------------------
| Media Conversion
|--------------------------------------------------------------------------
|
| Image conversion lets you display images according to the dimensions of
| the product photos you have in your store.
|
| This configuration allows you to customize each poster according to
| the size on the desired section of your store and adapt it directly
| to your design.
|
*/

Expand Down
2 changes: 0 additions & 2 deletions config/shopper/orders.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
| Order Number Generator
|--------------------------------------------------------------------------
|
|
|
*/

'generator' => [
Expand Down
5 changes: 2 additions & 3 deletions config/shopper/routes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,8 @@
| Shopper Custom backend route file
|--------------------------------------------------------------------------
|
| This value sets the file to load for Shopper admin custom routes. This
| depend of your application.
| Eg.: base_path('routes/shopper.php')
| This value sets the file to load for Shopper admin custom routes.
| E.g.: base_path('routes/shopper.php')
|
*/

Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/attributes/color.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class="sr-only"
aria-hidden="true"
style="background-color: {{ $value->key }} "
class="h-8 w-8 rounded-full "
:class="selectedColorAttributes.includes('{{ $value->id }}') ? ' border-double border-2 border-primary-600' : 'border-double border-2 border-black border-opacity-10 ' "
:class="selectedColorAttributes.includes('{{ $value->id }}') ? 'ring-2 ring-primary-600 ring-offset-2' : 'border-double border-2 border-black border-opacity-10 ' "
></span>
</label>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/attributes/size.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="grid grid-cols-3 gap-3 sm:grid-cols-5 mt-6">
@foreach ($attribute->values as $value)
<label
class="flex items-center justify-center px-3 py-3 text-sm font-medium uppercase border cursor-pointer focus:outline-none sm:flex-1"
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"
: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'">
<input id="{{ $attribute->slug }}-{{ $value->id }}"
wire:model.live.debounce.350ms="selectedAttributes"
Expand Down
8 changes: 4 additions & 4 deletions resources/views/components/categories/list.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@
<div class="space-y-5">
<div class="overflow-hidden shadow-lg aspect-w-3 aspect-h-2 rounded-xl">
<img class="object-cover max-w-none size-full"
src="{{ $category->getFirstMediaUrl(config('shopper.core.storage.thumbnail_collection')) }}"
src="{{ $category->getFirstMediaUrl(config('shopper.media.storage.thumbnail_collection')) }}"
alt="{{ $category->name }}" />
</div>
<div class="px-4">
<h3 class="text-base font-medium leading-6 transition ease-in text-gray-700 hover:text-gray-900">
<x-link href="#" class="inline-flex items-center gap-2">
<x-link :href="route('category.products', $category->slug)" class="inline-flex items-center gap-2">
{{ $category->name }}
<x-untitledui-arrow-narrow-right class="size-5" aria-hidden="true" />
</x-link>
</h3>
<nav role="navigation" class="flex flex-col mt-3">
@foreach ($category->children->take(6) as $child)
<x-link href="#" class="inline-flex text-sm leading-5 py-1.5 text-gray-500 hover:text-gray-900 transition ease-in">
<x-link :href="route('category.products', $child->slug)" class="inline-flex text-sm leading-5 py-1.5 text-gray-500 hover:text-gray-900 transition ease-in">
{{ $child->name }}
</x-link>
@endforeach
@if ($category->children->count() > 6)
<x-link href="#" class="mt-4 text-sm font-medium text-gray-700 hover:text-gray-900 group group-link-underline">
<x-link :href="route('category.products', $category->slug)" class="mt-4 text-sm font-medium text-gray-700 hover:text-gray-900 group group-link-underline">
<span class="inline-flex items-center gap-2 link link-underline link-underline-black">
<x-untitledui-plus class="size-4" aria-hidden="true" />
{{ __('View All') }}
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/collections/card.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
'collection',
])

<x-link href="#" class="block group" id="collection-{{ $collection->id }}">
<x-link :href="route('collection.products' , $collection->slug)" class="block group" id="collection-{{ $collection->id }}">
<div aria-hidden="true" class="overflow-hidden rounded-lg aspect-h-2 aspect-w-3 lg:aspect-h-6 lg:aspect-w-5 group-hover:opacity-75">
<img
class="object-cover object-center max-w-none size-full"
src="{{ $collection->getFirstMediaUrl(config('shopper.core.storage.thumbnail_collection')) }}"
src="{{ $collection->getFirstMediaUrl(config('shopper.media.storage.thumbnail_collection')) }}"
alt="{{ $collection->seo_title }}"
/>
</div>
Expand Down
35 changes: 0 additions & 35 deletions resources/views/components/products/related.blade.php
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions resources/views/components/products/thumbnail.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
'containerClass' => null,
])

<div @class(['aspect-1 overflow-hidden', $containerClass])>
<div @class(['aspect-1 rounded-lg overflow-hidden', $containerClass])>
<img
src="{{ $product->getFirstMediaUrl(config('shopper.core.storage.thumbnail_collection')) }}"
src="{{ $product->getFirstMediaUrl(config('shopper.media.storage.thumbnail_collection')) }}"
alt="{{ $product->name}} thumbnail"
{{ $attributes->twMerge(['class' => 'size-full max-w-none object-cover object-center group-hover:opacity-75']) }}
/>
Expand Down
25 changes: 19 additions & 6 deletions resources/views/livewire/pages/single-product.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="bg-white">
<div class="py-3 bg-white border-b border-gray-200 bg-opacity-80">
<x-container class="flex items-center justify-between px-4">
{{ Breadcrumbs::render('product', $selectedVariant ?? $product) }}
{{ Breadcrumbs::render('product', $product) }}
</x-container>
</div>

Expand All @@ -14,10 +14,10 @@

<x-products.thumbnail :product="$selectedVariant ?? $product" />

@if ($product->getMedia(config('shopper.core.storage.collection_name'))->isNotEmpty())
@if ($product->getMedia(config('shopper.media.storage.collection_name'))->isNotEmpty())
<div class="hidden w-full max-w-2xl mx-auto mt-6 sm:block lg:max-w-none">
<div class="grid grid-cols-4 gap-6" aria-orientation="horizontal" role="tablist">
@foreach ($product->getMedia(config('shopper.core.storage.collection_name')) as $image)
@foreach ($product->getMedia(config('shopper.media.storage.collection_name')) as $image)
<div
class="relative flex items-center justify-center h-24 bg-white rounded-lg overflow-hidden">
<img src="{{ $image->getFullUrl() }}" alt="{{ $product->name }} image"
Expand Down Expand Up @@ -47,7 +47,7 @@ class="text-base font-medium text-gray-900"
<!-- Reviews -->
<div class="mt-3">
<h3 class="sr-only">{{ __('Reviews') }}</h3>
<x-products.reviews :rating="4" :count="0" />
<x-products.reviews :rating="$this->getAverageRatingProperty" />
</div>

<livewire:variants-selector
Expand All @@ -67,8 +67,21 @@ class="text-base font-medium text-gray-900"
<h2 class="text-xl font-bold text-gray-900">{{ __('Customers also bought') }}</h2>

<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">
@foreach ($product->relatedProducts as $relatedProduct)
<x-products.related :product="$relatedProduct" />
@foreach ($product->relatedProducts as $product)
<div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
<x-products.thumbnail :product="$product" class="aspect-[3/4] bg-gray-200 object-cover group-hover:opacity-75 sm:h-96" />
<div class="flex flex-1 flex-col space-y-2 p-4">
<h3 class="text-sm font-medium text-gray-900">
<x-link :href="route('single-product', $product)">
<span class="absolute inset-0"></span>
{{ $product->name }}
</x-link>
</h3>
<div class="flex flex-1 flex-col justify-end">
<x-products.price :product="$product" class="mt-1" />
</div>
</div>
</div>
@endforeach
</div>
</section>
Expand Down
Loading
Loading