feat: add Categories

module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/CategoriesHandler.php

@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Handlers;
+
+use Closure;
+use Openguru\OpenCartFramework\Application;
+use Openguru\OpenCartFramework\Http\JsonResponse;
+use Openguru\OpenCartFramework\Http\Request;
+use Openguru\OpenCartFramework\QueryBuilder\Builder;
+use Openguru\OpenCartFramework\QueryBuilder\JoinClause;
+
+class CategoriesHandler
+{
+    private Builder $queryBuilder;
+
+    public function __construct(Builder $queryBuilder)
+    {
+        $this->queryBuilder = $queryBuilder;
+    }
+
+    public function index(Request $request): JsonResponse
+    {
+        $languageId = 1;
+        $perPage = $request->get('perPage', 10);
+
+        $imageWidth = 150;
+        $imageHeight = 150;
+
+        $categories = $this->queryBuilder->newQuery()
+            ->select([
+                'categories.category_id' => 'id',
+                'categories.image' => 'image',
+                'descriptions.name' => 'name',
+                'descriptions.description' => 'description',
+            ])
+            ->from(db_table('category'), 'categories')
+            ->join(
+                db_table('category_description') . ' AS descriptions',
+                function (JoinClause $join) use ($languageId) {
+                    $join->on('categories.category_id', '=', 'descriptions.category_id')
+                        ->where('descriptions.language_id', '=', $languageId);
+                }
+            )
+            ->where('categories.parent_id', '=', 0)
+            ->where('categories.status', '=', 1)
+            ->orderBy('sort_order')
+            ->limit($perPage)
+            ->get();
+
+        /** @var Closure $resize */
+        $resize = Application::getInstance()->get('image_resize');
+
+        return new JsonResponse([
+            'data' => array_map(static function ($category) use ($resize, $imageWidth, $imageHeight) {
+                if ($category['image']) {
+                    $image = $resize($category['image'], $imageWidth, $imageHeight);
+                } else {
+                    $image = $resize('no_image.png', $imageWidth, $imageHeight);
+                }
+
+                return [
+                    'id' => (int)$category['id'],
+                    'image' => $image,
+                    'name' => $category['name'],
+                    'description' => $category['description'],
+                ];
+            }, $categories),
+        ]);
+    }
+}

module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php

@@ -33,10 +33,21 @@ class ProductsHandler
         $languageId = 1;
         $page = $request->get('page', 1);
         $perPage = $request->get('perPage', 10);
+        $categoryId = (int)$request->get('categoryId', 0);
+        $categoryName = '';
 
         $imageWidth = 200;
         $imageHeight = 200;
 
+        if ($categoryId) {
+            $categoryName = $this->queryBuilder->newQuery()
+                ->select(['name'])
+                ->from(db_table('category_description'), 'category')
+                ->where('language_id', '=', $languageId)
+                ->where('category_id', '=', $categoryId)
+                ->value('name');
+        }
+
         $products = $this->queryBuilder->newQuery()
             ->select([
                 'products.product_id' => 'product_id',
@@ -54,11 +65,23 @@ class ProductsHandler
                         ->where('product_description.language_id', '=', $languageId);
                 }
             )
+            ->when($categoryId !== 0, function (Builder $query) use ($categoryId) {
+                $query->join(
+                    db_table('product_to_category') . ' AS product_to_category',
+                    function (JoinClause $join) use ($categoryId) {
+                        $join->on('product_to_category.product_id', '=', 'products.product_id')
+                            ->where('product_to_category.category_id', '=', $categoryId);
+                    }
+                );
+            })
             ->forPage($page, $perPage)
             ->orderBy('date_added', 'DESC')
             ->get();
 
         $productIds = Arr::pluck($products, 'product_id');
+        $productsImages = [];
+
+        if ($productIds) {
             $productsImages = $this->queryBuilder->newQuery()
                 ->select([
                     'products_images.product_id' => 'product_id',
@@ -68,6 +91,8 @@ class ProductsHandler
                 ->orderBy('products_images.sort_order', 'ASC')
                 ->whereIn('product_id', $productIds)
                 ->get();
+        }
+
 
         /** @var Closure $resize */
         $resize = Application::getInstance()->get('image_resize');
@@ -103,7 +128,7 @@ class ProductsHandler
                     $this->settings->get('oc_currency'),
                 );
 
-                if (! empty($productsImagesMap[$product['product_id']])) {
+                if (!empty($productsImagesMap[$product['product_id']])) {
                     $allImages = array_merge($allImages, $productsImagesMap[$product['product_id']]);
                 }
 
@@ -115,12 +140,16 @@ class ProductsHandler
                     'images' => $allImages,
                 ];
             }, $products),
+
+            'meta' => [
+                'currentCategoryName' => $categoryName,
+            ]
         ]);
     }
 
     public function show(Request $request): JsonResponse
     {
-        $productId = (int) $request->get('id');
+        $productId = (int)$request->get('id');
         $languageId = 1;
         $imageWidth = 500;
         $imageHeight = 500;

module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Handlers\CategoriesHandler;
 use App\Handlers\HelloWorldHandler;
 use App\Handlers\OrderCreateHandler;
 use App\Handlers\ProductsHandler;
@@ -8,4 +9,6 @@ return [
     'products' => [ProductsHandler::class, 'handle'],
     'product_show' => [ProductsHandler::class, 'show'],
     'order_create' => [OrderCreateHandler::class, 'handle'],
+
+    'categoriesList' => [CategoriesHandler::class, 'index'],
 ];

spa/src/components/BottomDrawer.vue

@@ -18,7 +18,6 @@
 
 <script setup>
 import {computed} from "vue";
-import { XMarkIcon } from '@heroicons/vue/24/outline';
 
 const props = defineProps({
   modelValue: Boolean,

spa/src/components/CategoriesInline.vue

@@ -0,0 +1,28 @@
+<template>
+<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
+  <RouterLink class="btn" to="/categories">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+    </svg>
+    Каталог
+  </RouterLink>
+
+  <RouterLink v-for="category in categories" class="btn" :to="`/category/${category.id}`">
+    {{ category.name }}
+  </RouterLink>
+</div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import ftch from "../utils/ftch.js";
+
+const categories = ref([]);
+
+onMounted(async () => {
+  const {data} = await ftch('categoriesList', {
+    perPage: 7,
+  });
+  categories.value = data;
+});
+</script>

spa/src/components/NoProducts.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16 text-gray-500">
+    <span class="text-5xl mb-4">🛒</span>
+    <h2 class="text-xl font-semibold mb-2">Здесь пока пусто</h2>
+    <p class="text-sm mb-4">Мы уже выехали на склад, чтобы найти что-нибудь подходящее.</p>
+    <button class="btn btn-primary" @click="goBack">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+      </svg>
+      Назад
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const goBack = () => router.back();
+</script>

spa/src/router.js

@@ -1,10 +1,14 @@
 import {createRouter, createWebHistory} from 'vue-router';
 import Home from './views/Home.vue';
 import Product from './views/Product.vue';
+import CategoriesList from "./views/CategoriesList.vue";
+import ProductsList from "./views/ProductsList.vue";
 
 const routes = [
     {path: '/', component: Home},
     {path: '/product/:id', component: Product},
+    {path: '/categories', component: CategoriesList},
+    {path: '/category/:id', component: ProductsList},
 ];
 
 export const router = createRouter({

spa/src/utils/ftch.js

@@ -0,0 +1,9 @@
+import {$fetch} from "ofetch";
+
+const BASE_URL = '/';
+
+export default async function (action, query) {
+    return await $fetch(`${BASE_URL}index.php?route=extension/tgshop/handle&api_action=${action}`, {
+        query: query,
+    });
+};

spa/src/views/CategoriesList.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
+    <h2 class="text-3xl mb-5">Категории</h2>
+
+    <div class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <RouterLink
+          v-for="category in categories"
+          :key="category.id"
+          :to="`/category/${category.id}`"
+          class="group border border-gray-200 rounded-lg py-2 px-4 flex flex-col justify-center items-center"
+      >
+        <img :src="category.image" :alt="category.name" loading="lazy"/>
+        <h3 class="mt-4 text-lg">{{ category.name }}</h3>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import ftch from "../utils/ftch.js";
+
+const categories = ref([]);
+
+onMounted(async () => {
+  const {data} = await ftch('categoriesList');
+  console.log(data);
+  categories.value = data;
+});
+</script>

spa/src/views/Hero.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+      class="hero min-h-screen relative"
+      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
+  >
+    <div class="hero-overlay"></div>
+    <div class="hero-content text-neutral-content text-center">
+      <div class="max-w-md">
+        <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
+        <p class="mb-5">
+          Мы гордо продаём то, что другие боятся.
+        </p>
+        <button class="btn btn-primary" @click="$emit('action')">
+          Показать товар лицом
+        </button>
+        <div class="mt-4 flex justify-center">
+          <svg
+              class="w-6 h-6 text-white animate-bounce"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+
+        <div class="absolute text-gray-400 left-3 bottom-3">
+          {{ platform }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useMiniApp} from "vue-tg";
+import {ref} from "vue";
+
+const emits = defineEmits(['action']);
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+</script>
+
+<style scoped>
+
+</style>

spa/src/views/Home.vue

@@ -1,95 +1,21 @@
 <template>
-  <div
-      class="hero min-h-screen relative"
-      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
-  >
-    <div class="hero-overlay"></div>
-    <div class="hero-content text-neutral-content text-center">
-      <div class="max-w-md">
-        <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
-        <p class="mb-5">
-          Мы гордо продаём то, что другие боятся.
-        </p>
-        <button class="btn btn-primary" @click="scrollToProducts">
-          Показать товар лицом
-        </button>
-        <div class="mt-4 flex justify-center">
-          <svg
-              class="w-6 h-6 text-white animate-bounce"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </div>
-
-        <div class="absolute text-gray-400 left-3 bottom-3">
-          {{ platform }}
-        </div>
-      </div>
-    </div>
-  </div>
-
   <div ref="goodsRef">
-    <div class="bg-base-100">
+    <CategoriesInline/>
-      <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+    <ProductsList/>
-        <h2 class="sr-only">Products</h2>
-
-        <div class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-          <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
-            <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
-              <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
-                <img :src="image.url" :alt="image.alt"/>
-              </div>
-            </div>
-
-            <h3 class="mt-4 text-sm">{{ product.name }}</h3>
-            <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
-          </RouterLink>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import {$fetch} from 'ofetch';
 import {onMounted, ref} from "vue";
-import {useHapticFeedback, useMiniApp} from 'vue-tg';
-
-const hapticFeedback = useHapticFeedback();
-
-const products = ref([]);
-
-onMounted(async () => {
-  const {data} = await $fetch('/index.php?route=extension/tgshop/handle&api_action=products');
-  products.value = data;
-});
 
 const goodsRef = ref();
 function scrollToProducts() {
   goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
 }
 
-const tg = useMiniApp();
-const platform = ref();
-platform.value = tg.platform;
-
-const carouselRef = ref();
-let lastScrollLeft = 0;
-function onScroll(e) {
-  const scrollLeft = e.target.scrollLeft;
-  const delta = Math.abs(scrollLeft - lastScrollLeft);
-
-  if (delta > 30) {
-    hapticFeedback.impactOccurred('soft');
-    lastScrollLeft = scrollLeft;
-  }
-}
-
 import { useBackButton } from 'vue-tg';
+import ProductsList from "./ProductsList.vue";
+import CategoriesInline from "../components/CategoriesInline.vue";
 const backButton = useBackButton();
 
 onMounted(() => {

spa/src/views/Product.vue

@@ -6,6 +6,7 @@
           <img
               :src="image.url"
               class="w-full"
+              loading="lazy"
               :alt="image.alt" />
         </div>
       </div>
@@ -79,6 +80,4 @@ function onScroll(e) {
     lastScrollLeft = scrollLeft;
   }
 }
-
-
 </script>

spa/src/views/ProductsList.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
+    <h2 class="text-lg font-bold mb-5 text-center">{{ productsMeta.currentCategoryName }}</h2>
+
+    <div v-if="products.length > 0" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
+        <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
+          <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
+            <img :src="image.url" :alt="image.alt" loading="lazy"/>
+          </div>
+        </div>
+
+        <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+        <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
+      </RouterLink>
+    </div>
+
+    <NoProducts v-else/>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {useBackButton, useHapticFeedback, useMiniApp} from 'vue-tg';
+import { useRouter, useRoute } from 'vue-router';
+import ftch from "../utils/ftch.js";
+import NoProducts from "../components/NoProducts.vue";
+
+const hapticFeedback = useHapticFeedback();
+const router = useRouter();
+const route = useRoute();
+const categoryId = route.params.id;
+
+const products = ref([]);
+const productsMeta = ref([]);
+
+const carouselRef = ref();
+let lastScrollLeft = 0;
+function onScroll(e) {
+  const scrollLeft = e.target.scrollLeft;
+  const delta = Math.abs(scrollLeft - lastScrollLeft);
+
+  if (delta > 30) {
+    hapticFeedback.impactOccurred('soft');
+    lastScrollLeft = scrollLeft;
+  }
+}
+
+const backButton = useBackButton();
+if (typeof backButton.show === 'function') {
+  backButton.show();
+  backButton.onClick(() => {
+    router.back()
+  });
+}
+
+onMounted(async () => {
+  const {data, meta} = await ftch('products', {
+    categoryId: categoryId,
+  });
+  productsMeta.value = meta;
+  products.value = data;
+});
+</script>