Merge pull request bagisto#7691 from devansh-webkul/pr/amit-webkul/7679

Refined carousel and added the category carousel

packages/Webkul/Shop/src/Http/Controllers/API/CategoryController.php

@@ -7,6 +7,7 @@
 use Webkul\Category\Repositories\CategoryRepository;
 use Webkul\Product\Repositories\ProductRepository;
 use Webkul\Shop\Http\Resources\AttributeResource;
+use Webkul\Shop\Http\Resources\CategoryResource;
 
 class CategoryController extends APIController
 {
@@ -23,6 +24,19 @@ public function __construct(
     ) {
     }
 
+    /**
+     * Get all categories.
+     */
+    public function index(): JsonResource
+    {
+        $categories = $this->categoryRepository
+            ->whereNotNull('parent_id')
+            ->where('status', 1)
+            ->paginate();
+
+        return CategoryResource::collection($categories);
+    }
+
     /**
      * Get filterable attributes for category.
      */

packages/Webkul/Shop/src/Http/Resources/CategoryResource.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Webkul\Shop\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class CategoryResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'id'           => $this->id,
+            'parent_id'    => $this->parent_id,
+            'name'         => $this->name,
+            'slug'         => $this->slug,
+            'url_path'     => $this->url_path,
+            'status'       => $this->status,
+            'position'     => $this->position,
+            'display_mode' => $this->display_mode,
+            'description'  => $this->description,
+            'images'       => [
+                'base_url'          => $this->image_url,
+                'banner_url'        => $this->banner_url,
+                'category_icon_url' => $this->category_icon_url,
+            ],
+            'meta'         => [
+                'title'       => $this->meta_title,
+                'keywords'    => $this->meta_keywords,
+                'description' => $this->meta_description,
+            ],
+            'translations' => $this->translations,
+            'additional'   => $this->additional,
+        ];
+    }
+}

packages/Webkul/Shop/src/Resources/views/components/categories/carousel.blade.php

@@ -0,0 +1,114 @@
+<v-categories-carousel
+    src="{{ $src }}"
+    title="{{ $title }}"
+    navigation-link="{{ $navigationLink ?? '' }}"
+>
+    <x-shop::shimmer.categories.carousel :navigation-link="$navigationLink ?? false"></x-shop::shimmer.categories.carousel>
+</v-categories-carousel>
+
+@pushOnce('scripts')
+    <script type="text/x-template" id="v-categories-carousel-template">
+        <div class="container mt-[60px] max-lg:px-[30px] max-sm:mt-[20px]" v-if="! isLoading && categories?.length">
+            <div class="bs-item-carousal-wrapper relative">
+                <div
+                    ref="swiperContainer"
+                    class="flex gap-10 overflow-auto scroll-smooth scrollbar-hide"
+                >
+                    <div
+                        class="grid grid-cols-1 justify-items-center gap-[15px] font-medium min-w-[120px]"
+                        v-for="category in categories"
+                    >
+                        <a
+                            :href="category.url_path"
+                            class=""
+                        >
+                            <div class="bg-[#F5F5F5] rounded-full w-[110px] h-[110px]">
+                                <img
+                                    class="w-[110px] h-[110px] rounded-full"
+                                    :src="category.images.base_url"
+                                    v-if="category?.images?.base_url"
+                                />
+                            </div>
+
+                            <p
+                                class="text-black text-[20px] font-medium"
+                                v-text="category.name"
+                            >
+                            </p>
+                        </a>
+                    </div>
+                </div>
+
+                <span
+                    class="bs-carousal-next flex border border-black items-center justify-center rounded-full w-[50px] h-[50px] bg-white absolute top-[37px] -left-[41px] cursor-pointer transition icon-arrow-left-stylish text-[25px] hover:bg-black hover:text-white max-lg:-left-[29px]"
+                    @click="swipeLeft"
+                >
+                </span>
+
+                <span
+                    class="bs-carousal-prev flex border border-black items-center justify-center rounded-full w-[50px] h-[50px] bg-white absolute top-[37px] -right-[22px] cursor-pointer transition icon-arrow-right-stylish text-[25px] hover:bg-black hover:text-white max-lg:-right-[29px]"
+                    @click="swipeRight"
+                >
+                </span>
+            </div>
+        </div>
+
+        <!-- category carousel shimmer -->
+        <template v-if="isLoading">
+            <x-shop::shimmer.categories.carousel
+                :count="7"
+                :navigation-link="$navigationLink ?? false"
+            >
+            </x-shop::shimmer.categories.carousel>
+        </template>
+    </script>
+
+    <script type="module">
+        app.component('v-categories-carousel', {
+            template: '#v-categories-carousel-template',
+
+            props: [
+                'src',
+                'title',
+                'navigationLink',
+            ],
+
+            data() {
+                return {
+                    isLoading: true,
+
+                    categories: [],
+                };
+            },
+
+            mounted() {
+                this.getCategories();
+            },
+
+            methods: {
+                getCategories() {
+                    this.$axios.get(this.src)
+                        .then(response => {
+                            this.isLoading = false;
+
+                            this.categories = response.data.data;
+                        }).catch(error => {
+                            console.log(error);
+                        });
+                },
+
+                swipeLeft() {
+                    const container = this.$refs.swiperContainer;
+
+                    container.scrollLeft -= 720;
+                },
+
+                swipeRight() {
+                    const container = this.$refs.swiperContainer;
+
+                    container.scrollLeft += 720;
+                },
+            },
+        });
+    </script>
+@endPushOnce

packages/Webkul/Shop/src/Resources/views/components/products/carousel.blade.php

@@ -15,17 +15,22 @@
                 <div class="flex justify-between items-center gap-8">
                     <span
                         class="icon-arrow-left-stylish text-[24px] inline-block cursor-pointer"
+                        @click="swipeLeft"
                     >
                     </span>
 
                     <span
                         class="icon-arrow-right-stylish text-[24px] inline-block cursor-pointer"
+                        @click="swipeRight"
                     >
                     </span>
                 </div>
             </div>
 
-            <div class="flex gap-8 mt-[60px] overflow-auto scrollbar-hide max-sm:mt-[20px]">
+            <div
+                ref="swiperContainer"
+                class="flex gap-8 mt-[60px] overflow-auto scroll-smooth scrollbar-hide max-sm:mt-[20px]"
+            >
                 <x-shop::products.cards.grid
                     class="min-w-[291px]"
                     v-for="product in products"
@@ -64,7 +69,7 @@ class="block mx-auto text-navyBlue text-base w-max font-medium py-[11px] px-[43p
                     isLoading: true,
 
                     products: [],
-                }
+                };
             },
 
             mounted() {
@@ -73,14 +78,27 @@ class="block mx-auto text-navyBlue text-base w-max font-medium py-[11px] px-[43p
 
             methods: {
                 getProducts() {
-                    this.$axios.get(this.src).then(response => {
+                    this.$axios.get(this.src)
+                        .then(response => {
                             this.isLoading = false;
 
                             this.products = response.data.data;
                         }).catch(error => {
                             console.log(error);
                         });
                 },
+
+                swipeLeft() {
+                    const container = this.$refs.swiperContainer;
+
+                    container.scrollLeft -= 720;
+                },
+
+                swipeRight() {
+                    const container = this.$refs.swiperContainer;
+
+                    container.scrollLeft += 720;
+                },
             },
         });
     </script>

packages/Webkul/Shop/src/Resources/views/components/shimmer/categories/carousel.blade.php

@@ -0,0 +1,25 @@
+@props(['count' => 0])
+
+<div class="container mt-[60px] max-lg:px-[30px] max-sm:mt-[20px]">
+    <div class="bs-item-carousal-wrapper relative">
+        <div class="flex gap-10 overflow-auto scrollbar-hide">
+            @for ($i = 0;  $i < $count; $i++)
+                <div class="grid grid-cols-1 justify-items-center gap-[15px] min-w-[120px]">
+                    <div class="relative overflow-hidden rounded-full w-[110px] h-[110px] bg-[#E9E9E9] shimmer">
+                        <img
+                            class="rounded-sm bg-[#F5F5F5]"
+                            src=""
+                            alt=""
+                        >
+                    </div>
+
+                    <p class="w-[90px] h-[32px] rounded-[18px] shimmer"></p>
+                </div>
+            @endfor
+        </div>
+
+        <span class="flex rounded-full w-[50px] h-[50px] absolute top-[37px] -left-[41px] shimmer"></span>
+
+        <span class="flex rounded-full w-[50px] h-[50px] absolute top-[37px] -right-[22px] shimmer"></span>
+    </div>
+</div>

packages/Webkul/Shop/src/Resources/views/components/shimmer/products/cards/grid.blade.php

@@ -1,13 +1,17 @@
 @props(['count' => 0])
 
 @for ($i = 0;  $i < $count; $i++)
-    <div class="grid gap-2.5  content-start relative max-sm:grid-cols-1 max-w-[291px] {{ $attributes["class"] }}">
+    <div class="grid gap-2.5 content-start relative max-sm:grid-cols-1 max-w-[291px] {{ $attributes["class"] }}">
         <div class="relative overflow-hidden  rounded-sm min-h-[300px] bg-[#E9E9E9] shimmer">
-            <img class="rounded-sm bg-[#F5F5F5]" src="">
+            <img
+                src=""
+                class="rounded-sm bg-[#F5F5F5]"
+            >
         </div>
 
         <div class="grid gap-2.5 content-start">
             <p class="w-[75%] h-[24px] bg-[#E9E9E9] shimmer"></p>
+
             <p class="w-[55%] h-[24px] bg-[#E9E9E9] shimmer"></p>
 
             <div class="flex gap-4 mt-[12px]">

packages/Webkul/Shop/src/Resources/views/components/shimmer/products/carousel.blade.php

@@ -27,4 +27,4 @@ class="min-w-[291px]"
         <a class="block mx-auto w-[150.172px] h-[48px] rounded-[18px] mt-[60px] shimmer">
         </a>
     @endif
-</div>
+</div>

packages/Webkul/Shop/src/Resources/views/home/index.blade.php

@@ -16,6 +16,14 @@ class="block text-[22px] py-[20px] font-medium text-center bg-[#E8EDFE] font-dms
 		</div>
 	</div>
 
+    {{-- Categories carousel --}}
+    <x-shop::categories.carousel
+        title="Categories Collections"
+        :src="route('shop.api.categories.index')"
+        :navigation-link="route('shop.home.index')"
+    >
+    </x-shop::categories.carousel>
+
     {{-- Carousel --}}
 	<x-shop::products.carousel
         title="Men's Collections"

packages/Webkul/Shop/src/Routes/api.php

@@ -1,13 +1,13 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use Webkul\Shop\Http\Controllers\API\AddressController;
 use Webkul\Shop\Http\Controllers\API\CartController;
 use Webkul\Shop\Http\Controllers\API\CategoryController;
 use Webkul\Shop\Http\Controllers\API\CompareController;
 use Webkul\Shop\Http\Controllers\API\ProductController;
 use Webkul\Shop\Http\Controllers\API\ReviewController;
 use Webkul\Shop\Http\Controllers\API\WishlistController;
-use Webkul\Shop\Http\Controllers\API\AddressController;
 
 Route::group(['middleware' => ['locale', 'theme', 'currency'], 'prefix' => 'api'], function () {
     Route::controller(ProductController::class)->group(function () {
@@ -29,12 +29,12 @@
             ->name('shop.api.products.reviews.store');
     });
 
-    Route::controller(CategoryController::class)->group(function () {
-        Route::get('categories/{id}/attributes', 'getAttributes')
-            ->name('shop.api.categories.attributes');
+    Route::controller(CategoryController::class)->prefix('categories')->group(function () {
+        Route::get('', 'index')->name('shop.api.categories.index');
 
-        Route::get('categories/{id}/max-price', 'getProductMaxPrice')
-            ->name('shop.api.categories.max_price');
+        Route::get('{id}/attributes', 'getAttributes')->name('shop.api.categories.attributes');
+
+        Route::get('{id}/max-price', 'getProductMaxPrice')->name('shop.api.categories.max_price');
     });
 
     Route::controller(CartController::class)->prefix('checkout/cart')->group(function () {
@@ -59,7 +59,7 @@
         Route::post('move-to-wishlist', 'moveToWishlist')->name('shop.api.compare.move_to_wishlist');
     });
 
-    Route::group(['middleware' => ['customer']], function () {
+    Route::group(['middleware' => ['customer'], 'prefix' => 'customer'], function () {
         Route::controller(WishlistController::class)->prefix('wishlist')->group(function () {
             Route::get('', 'index')->name('shop.api.customers.account.wishlist.index');
 
@@ -70,9 +70,6 @@
             Route::delete('{id}', 'destroy')->name('shop.api.customers.account.wishlist.destroy');
         });
 
-        Route::get('compare-items/{product_id}', [CompareController::class, 'store'])
-            ->name('shop.customers.account.compare.store');
-
-        Route::get('/customer/addresses', [AddressController::class,'index'])->name('api.shop.customers.account.addresses.index');
+        Route::get('addresses', [AddressController::class, 'index'])->name('api.shop.customers.account.addresses.index');
     });
 });