Skip to content

Commit

Permalink
Merge pull request bagisto#7688 from shivendra-webkul/product-listing
Browse files Browse the repository at this point in the history 
Added Category products listing and shimmer for listing page.
  • Loading branch information
@jitendra-webkul
jitendra-webkul authored Jun 22, 2023
2 parents 1b06de3 + 95b5072 commit a4bd76c
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 61 deletions.
3 changes: 3 additions & 0 deletions packages/Webkul/Shop/src/Http/Resources/ProductResource.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ public function toArray($request)
{
$productTypeInstance = $this->getTypeInstance();

$reviewHelper = app('Webkul\Product\Helpers\Review');

return [
'id' => $this->id,
'name' => $this->name,
Expand All @@ -32,6 +34,7 @@ public function toArray($request)
'price_html' => $productTypeInstance->getPriceHtml(),
'base_image' => product_image()->getProductBaseImage($this),
'images' => product_image()->getGalleryImages($this),
'avg_ratings' => round($reviewHelper->getAverageRating($this)),
];
}
}
2 changes: 1 addition & 1 deletion packages/Webkul/Shop/src/Resources/views/categories/view.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class="rounded-[12px]"
</div>

<div
class="mt-[30px]"
class="grid grid-cols-1 gap-[25px] mt-[30px] "
v-else
>
<!-- Product Card Shimmer Effect -->
Expand Down
2 changes: 1 addition & 1 deletion packages/Webkul/Shop/src/Resources/views/components/products/cards/grid.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class="rounded-sm bg-[#F5F5F5] group-hover:scale-105 transition-all duration-300
<div class="action-items bg-black">
<p
class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-navyBlue inline-block absolute top-[20px] left-[20px]"
v-if="product.is_new"
v-if="product.is_new && ! product.on_sale"
>
{{-- @translations --}}
@lang('New')
Expand Down
104 changes: 62 additions & 42 deletions packages/Webkul/Shop/src/Resources/views/components/products/cards/list.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,100 @@
<product-list
<v-product-list
{{ $attributes }}
:product="product"
>
</product-list>

</v-product-list>
@pushOnce('scripts')
<script type="text/x-template" id="v-product-list-template">
<div class="flex gap-[20px] rounded-[12px] mb-[15px] max-sm:flex-wrap {{ $attributes["class"] }}">
<div class="relative overflow-hidden group max-w-[258px] max-h-[250px]">
<div class="flex gap-[15px] grid-cols-2 max-w-max relative max-sm:flex-wrap">
<div class="relative overflow-hidden group max-w-[250px] max-h-[258px]">
<a :href="`{{ route('shop.productOrCategory.index', '') }}/${product.url_key}`">
<img
class="rounded-sm bg-[#F5F5F5] group-hover:scale-105 transition-all duration-300"
<img
class="rounded-sm bg-[#F5F5F5] group-hover:scale-105 transition-all duration-300"
:src="product.base_image.medium_image_url"
width="258"
height="250"
width="250"
height="258"
>
</a>
<div class="action-items bg-black">
<p
</a>

<div class="action-items bg-black">
<p
class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-navyBlue inline-block absolute top-[20px] left-[20px]"
v-if="product.is_new"
v-if="product.is_new && ! product.on_sale"
>
{{-- @translations --}}
@lang('New')
</p>

<p
class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-navyBlue inline-block absolute top-[20px] left-[20px]"
v-if="product.on_sale"
<p
class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-red-700 inline-block absolute top-[20px] left-[20px]"
v-if="product.on_sale"
>
{{-- @translations --}}
@lang('Sale')
</p>

<div class="group-hover:bottom-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
<a
class="flex justify-center items-center w-[30px] h-[30px] bg-white rounded-md cursor-pointer absolute top-[20px] right-[20px] icon-heart text-[25px]"
<span
class=" flex justify-center items-center w-[30px] h-[30px] bg-white rounded-md cursor-pointer absolute top-[20px] right-[20px] icon-heart text-[25px]"
@click="addToWishlist()"
>
</a>

<a
class="flex justify-center items-center w-[30px] h-[30px] bg-white rounded-md cursor-pointer absolute top-[60px] right-[20px] icon-compare text-[25px]"
</span>
<span
class=" flex justify-center items-center w-[30px] h-[30px] bg-white rounded-md cursor-pointer absolute top-[60px] right-[20px] icon-compare text-[25px]"
@click="addToCompare(product.id)"
>
</a>
</div>
</div>
</div>

<div class="">
<div class="flex justify-between">
<p class="text-base" v-text="product.name"></p>
</div>
</span>
</div>
</div>
</div>

<div class="grid gap-[15px] content-start">
<p
class="text-base"
v-text="product.name"
>
</p>

<div class="flex gap-2.5 text-lg" v-html="product.price_html"></div>
<div class="flex gap-2.5">
<p
class="text-lg font-semibold"
v-html="product.price_html">
</p>
</div>

<div class="flex gap-4 mt-[8px]">
<span class="rounded-full w-[30px] h-[30px] block cursor-pointer bg-[#B5DCB4]"></span>
<div class="flex gap-4">
<span class="rounded-full w-[30px] h-[30px] block cursor-pointer bg-[#B5DCB4]">
</span>

<span class="rounded-full w-[30px] h-[30px] block cursor-pointer bg-[#5C5C5C]"></span>
</div>
<span class="rounded-full w-[30px] h-[30px] block cursor-pointer bg-[#5C5C5C]">
</span>
</div>

<button
class="bs-primary-button w-auto py-[10px] px-[10] mt-[20px] w-auto"
<p class="text-[14px] text-[#7D7D7D]" v-if="! product.avg_ratings">
Be the first to review this product
</p>

<p v-else class="text-[14px] text-[#7D7D7D]">
<x-shop::products.star-rating
::value="product && product.avg_ratings ? product.avg_ratings : 0"
:is-editable=false
>
</x-shop::products.star-rating>
</p>

<div
class="bs-primary-button px-[30px] py-[10px]"
@click="addToCart()"
>
@lang('shop::app.components.products.add-to-cart')
</button>
</div>
</div>
</div>
</div>
</script>

<script type="module">
app.component('product-list', {
app.component('v-product-list', {
template: '#v-product-list-template',
props: ['product'],
Expand Down
2 changes: 1 addition & 1 deletion packages/Webkul/Shop/src/Resources/views/components/shimmer/categories/view.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<x-shop::shimmer.products.cards.grid count="12"></x-shop::shimmer.products.cards.grid>
</div>
@else
<div class="mt-[30px]">
<div class="grid grid-cols-1 gap-[25px] mt-[30px]">
<x-shop::shimmer.products.cards.list count="12"></x-shop::shimmer.products.cards.list>
</div>
@endif
Expand Down
36 changes: 20 additions & 16 deletions packages/Webkul/Shop/src/Resources/views/components/shimmer/products/cards/list.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
@props(['count' => 0])

@for ($i = 0; $i < $count; $i++)
<div class="flex gap-[20px] rounded-[12px] mb-[15px] max-sm:flex-wrap">
<div class="flex justify-content:between ml-[2px]">
<div class="relative overflow-hidden rounded-sm min-w-[258px] min-h-[250px] bg-[#E9E9E9] shimmer">
<img class="rounded-sm bg-[#F5F5F5]">
</div>
<div class="grid grid-cols-1 gap-[25px]">
<div class="grid gap-2.5 grid-cols-2 relative max-sm:grid-cols-1 max-w-max">
<div class="relative overflow-hidden rounded-sm min-w-[250px] min-h-[258px] bg-[#E9E9E9] shimmer ">
<img
class="rounded-sm bg-[#F5F5F5]"
src=""
>
</div>

<div class="grid gap-[15px] content-start">
<p class="w-[75%] h-[24px] bg-[#E9E9E9] shimmer"></p>

<div class="ml-[20px]">
<div class="grid gap-2.5 content-start">
<p class="w-[200px] h-[24px] bg-[#E9E9E9] shimmer"></p>
<p class="w-[150px] h-[24px] bg-[#E9E9E9] shimmer"></p>
<p class="w-[55%] h-[24px] bg-[#E9E9E9] shimmer"></p>

<div class="flex gap-4 mt-[8px]">
<span class="rounded-full w-[30px] h-[30px] block bg-[#E9E9E9] shimmer"></span>
<span class="rounded-full w-[30px] h-[30px] block bg-[#E9E9E9] shimmer"></span>
</div>
<div class="flex gap-4">
<span class="rounded-full w-[30px] h-[30px] block bg-[#E9E9E9] shimmer"></span>

<button class="w-[158px] h-[46px] rounded-[12px] py-[10px] px-[10] mt-[20px] bg-[#E9E9E9] shimmer">
</button>
</div>
<span class="rounded-full w-[30px] h-[30px] block bg-[#E9E9E9] shimmer"></span>
</div>

<p class="w-[100%] h-[24px] bg-[#E9E9E9] shimmer"></p>

<div class="w-[152px] h-[46px] rounded-[12px] shimmer"></div>
</div>
</div>
</div>
@endfor

0 comments on commit a4bd76c

Please sign in to comment.