diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php index ce61570..8aae4f6 100755 --- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php +++ b/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, + ]); + } } diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php b/module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php index f100806..ab14cfa 100755 --- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php +++ b/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'], ]; diff --git a/spa/package-lock.json b/spa/package-lock.json index 39d70c7..320b702 100644 --- a/spa/package-lock.json +++ b/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", diff --git a/spa/package.json b/spa/package.json index 3826cd9..98bf9ce 100644 --- a/spa/package.json +++ b/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": { diff --git a/spa/src/App.vue b/spa/src/App.vue index f3c5fcd..b302784 100644 --- a/spa/src/App.vue +++ b/spa/src/App.vue @@ -1,46 +1,9 @@ diff --git a/spa/src/components/ProductList.vue b/spa/src/components/ProductList.vue deleted file mode 100644 index 78567d9..0000000 --- a/spa/src/components/ProductList.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - diff --git a/spa/src/main.js b/spa/src/main.js index 1ffa966..1726c15 100644 --- a/spa/src/main.js +++ b/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(); + + diff --git a/spa/src/router.js b/spa/src/router.js new file mode 100644 index 0000000..c42f60b --- /dev/null +++ b/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, +}); diff --git a/spa/src/views/Home.vue b/spa/src/views/Home.vue new file mode 100644 index 0000000..cfee851 --- /dev/null +++ b/spa/src/views/Home.vue @@ -0,0 +1,100 @@ + + + diff --git a/spa/src/views/Product.vue b/spa/src/views/Product.vue new file mode 100644 index 0000000..ca0b67b --- /dev/null +++ b/spa/src/views/Product.vue @@ -0,0 +1,81 @@ + + + \ No newline at end of file diff --git a/spa/tailwind.config.js b/spa/tailwind.config.js index 2ba7beb..d9f6a7a 100644 --- a/spa/tailwind.config.js +++ b/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")], }; \ No newline at end of file