feat: add product view page

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

@@ -117,4 +117,80 @@ class ProductsHandler
             }, $products),
         ]);
     }
+
+    public function show(Request $request): JsonResponse
+    {
+        $productId = (int) $request->get('id');
+        $languageId = 1;
+        $imageWidth = 500;
+        $imageHeight = 500;
+
+        $product = $this->queryBuilder->newQuery()
+            ->select([
+                'products.product_id' => 'product_id',
+                'products.quantity' => 'product_quantity',
+                'product_description.name' => 'product_name',
+                'product_description.description' => 'product_description',
+                'products.price' => 'price',
+                'products.image' => 'product_image',
+                'products.tax_class_id' => 'tax_class_id',
+            ])
+            ->from(db_table('product'), 'products')
+            ->join(
+                db_table('product_description') . ' AS product_description',
+                function (JoinClause $join) use ($languageId) {
+                    $join->on('products.product_id', '=', 'product_description.product_id')
+                        ->where('product_description.language_id', '=', $languageId);
+                }
+            )
+            ->where('products.product_id', '=', $productId)
+            ->limit(1)
+            ->firstOrNull();
+
+        $productsImages = $this->queryBuilder->newQuery()
+            ->select([
+                'products_images.product_id' => 'product_id',
+                'products_images.image' => 'image',
+            ])
+            ->from(db_table('product_image'), 'products_images')
+            ->orderBy('products_images.sort_order', 'ASC')
+            ->where('products_images.product_id', '=', $productId)
+            ->get();
+
+        /** @var Closure $resize */
+        $resize = Application::getInstance()->get('image_resize');
+
+        $images = [];
+        $images[] = [
+            'url' => $resize($product['product_image'], $imageWidth, $imageHeight),
+            'alt' => $product['product_name'],
+        ];
+        foreach ($productsImages as $item) {
+            $images[] = [
+                'url' => $resize($item['image'], $imageWidth, $imageHeight),
+                'alt' => $product['product_name'],
+            ];
+        }
+
+        $price = $this->currency->format(
+            $this->tax->calculate(
+                $product['price'],
+                $product['tax_class_id'],
+                $this->settings->get('oc_config_tax'),
+            ),
+            $this->settings->get('oc_currency'),
+        );
+
+        $data = [
+            'id' => $product['product_id'],
+            'name' => $product['product_name'],
+            'description' => html_entity_decode($product['product_description']),
+            'price' => $price,
+            'images' => $images,
+        ];
+
+        return new JsonResponse([
+            'data' => $data,
+        ]);
+    }
 }

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

@@ -6,5 +6,6 @@ use App\Handlers\ProductsHandler;
 
 return [
     'products' => [ProductsHandler::class, 'handle'],
+    'product_show' => [ProductsHandler::class, 'show'],
     'order_create' => [OrderCreateHandler::class, 'handle'],
 ];

spa/package-lock.json

@@ -12,6 +12,7 @@
         "@tailwindcss/vite": "^4.1.11",
         "ofetch": "^1.4.1",
         "vue": "^3.5.17",
+        "vue-router": "^4.5.1",
         "vue-tg": "^0.9.0-beta.10"
       },
       "devDependencies": {
@@ -1156,6 +1157,12 @@
         "@vue/shared": "3.5.17"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.17.tgz",
@@ -2090,6 +2097,21 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tg": {
       "version": "0.9.0-beta.10",
       "resolved": "https://registry.npmjs.org/vue-tg/-/vue-tg-0.9.0-beta.10.tgz",

spa/package.json

@@ -13,6 +13,7 @@
     "@tailwindcss/vite": "^4.1.11",
     "ofetch": "^1.4.1",
     "vue": "^3.5.17",
+    "vue-router": "^4.5.1",
     "vue-tg": "^0.9.0-beta.10"
   },
   "devDependencies": {

spa/src/App.vue

@@ -1,46 +1,9 @@
 <template>
-  <FullscreenViewport v-if="platform === 'ios' && platform === 'android'"/>
-
-  <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">
-    <ProductList/>
-  </div>
+  <FullscreenViewport/>
+  <router-view />
 </template>
 
 <script setup>
-import ProductList from "./components/ProductList.vue";
 import {onMounted, ref} from "vue";
 import { useWebAppViewport } from 'vue-tg';
 import { useMiniApp, FullscreenViewport } from 'vue-tg';
@@ -49,21 +12,6 @@ const tg = useMiniApp();
 const platform = ref();
 platform.value = tg.platform;
 
-// const backButton = useBackButton();
-// backButton.show();
-
-const goodsRef = ref();
-function scrollToProducts() {
-  goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
-}
-
-
 const { disableVerticalSwipes } = useWebAppViewport();
 disableVerticalSwipes();
-
-
-onMounted(() => {
-
-});
-
 </script>

spa/src/components/ProductList.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="bg-base-100">
-    <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
-      <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">
-        <a v-for="product in products" :key="product.id" class="group">
-          <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>
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {$fetch} from 'ofetch';
-import {onMounted, ref} from "vue";
-import { useHapticFeedback } 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 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;
-  }
-}
-</script>

spa/src/main.js

@@ -2,26 +2,24 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
 import { VueTelegramPlugin } from 'vue-tg';
-
+import { router } from './router';
 
 const app = createApp(App);
-app.use(VueTelegramPlugin);
+app
+    .use(router)
+    .use(VueTelegramPlugin);
 app.mount('#app');
 
-import { useMiniApp, useTheme, onThemeChanged } from 'vue-tg';
+import { useMiniApp, useTheme } from 'vue-tg';
 
 const theme = useTheme();
 const tg = useMiniApp();
 
-
-
-onThemeChanged(() => {
-    // handle theme update
-})
-
 theme.onChange(() => {
     document.documentElement.setAttribute('data-theme', theme.colorScheme.value);
 });
 
 document.documentElement.setAttribute('data-theme', theme.colorScheme.value);
 tg.ready();
+
+

spa/src/router.js

@@ -0,0 +1,13 @@
+import {createRouter, createWebHistory} from 'vue-router';
+import Home from './views/Home.vue';
+import Product from './views/Product.vue';
+
+const routes = [
+    {path: '/', component: Home},
+    {path: '/product/:id', component: Product},
+];
+
+export const router = createRouter({
+    history: createWebHistory('/image/catalog/tgshopspa/'),
+    routes,
+});

spa/src/views/Home.vue

@@ -0,0 +1,100 @@
+<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">
+      <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+        <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';
+const backButton = useBackButton();
+
+onMounted(() => {
+  if (backButton.isVisible.value) {
+    backButton.hide();
+  }
+})
+</script>

spa/src/views/Product.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div>
+      <div class="carousel" ref="carouselRef" @scroll.passive="onScroll">
+        <div v-for="image in product.images" class="carousel-item w-full">
+          <img
+              :src="image.url"
+              class="w-full"
+              :alt="image.alt" />
+        </div>
+      </div>
+
+      <!-- Product info -->
+      <div class="mx-auto max-w-2xl px-4 pt-3 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24">
+        <div class="lg:col-span-2 lg:border-r lg:pr-8">
+          <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ product.name }}</h1>
+        </div>
+
+        <!-- Options -->
+        <div class="mt-4 lg:row-span-3 lg:mt-0">
+          <p class="text-3xl tracking-tight">{{ product.price }}</p>
+        </div>
+
+        <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pt-6 lg:pr-8 lg:pb-16">
+          <!-- Description and details -->
+          <div>
+            <h3 class="sr-only">Description</h3>
+
+            <div class="space-y-6">
+              <p class="text-base" v-html="product.description"></p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {$fetch} from "ofetch";
+import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
+import {useBackButton, useHapticFeedback} from 'vue-tg';
+const hapticFeedback = useHapticFeedback();
+
+const router = useRouter()
+const route = useRoute()
+const productId = route.params.id
+
+const id = 28;
+const product = ref([]);
+
+onMounted(async () => {
+  const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId}`);
+  product.value = data;
+});
+
+const backButton = useBackButton();
+if (typeof backButton.show === 'function') {
+  backButton.show();
+  backButton.onClick(() => {
+    router.back()
+  });
+}
+
+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;
+  }
+}
+
+
+</script>

spa/tailwind.config.js

@@ -4,7 +4,11 @@ module.exports = {
         "./src/**/*.{vue,js,ts,jsx,tsx}",
     ],
     theme: {
-        extend: {},
+        extend: {
+            gridTemplateRows: {
+                '[auto,auto,1fr]': 'auto auto 1fr',
+            },
+        },
     },
-    plugins: [require("daisyui")], // убери строку, если DaisyUI не нужен
+    plugins: [require("daisyui")],
 };