diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageTool.php b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageTool.php index e200709..456341d 100755 --- a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageTool.php +++ b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageTool.php @@ -56,4 +56,22 @@ class ImageTool implements ImageToolInterface return rtrim($this->siteUrl, '/') . '/image/' . str_replace($this->imageDir, '', $fullNewPath); } + + public function getUrl(string $path): string + { + return rtrim($this->siteUrl, '/') . '/image/' . str_replace($this->imageDir, '', $path); + } + + public function getRealSize(string $path): array + { + $fullPath = $this->imageDir . $path; + + if (! is_file($fullPath)) { + throw new \RuntimeException('Image file not found: ' . $path); + } + + $img = $this->manager->make($fullPath); + + return [$img->getWidth(), $img->getHeight()]; + } } diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageToolInterface.php b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageToolInterface.php index da86598..0e41ac0 100755 --- a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageToolInterface.php +++ b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageToolInterface.php @@ -4,6 +4,9 @@ namespace Openguru\OpenCartFramework\ImageTool; interface ImageToolInterface { + public function getUrl(string $path): string; + public function getRealSize(string $path): array; + public function resize( string $path, int $width, diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Exceptions/CustomExceptionHandler.php b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Exceptions/CustomExceptionHandler.php old mode 100644 new mode 100755 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 97dbd14..9fe134b 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 @@ -230,20 +230,20 @@ class ProductsHandler ->where('products_images.product_id', '=', $productId) ->get(); - $images = []; - $images[] = [ - 'url' => $this->ocImageTool->resize( - $product['product_image'], - $imageWidth, - $imageHeight, - 'placeholder.png' - ), - 'alt' => $product['product_name'], - ]; - + $imagePaths = []; + $imagePaths[] = $product['product_image']; foreach ($productsImages as $item) { + $imagePaths[] = $item['image']; + } + + $images = []; + foreach ($imagePaths as $imagePath) { + [$width, $height] = $this->ocImageTool->getRealSize($imagePath); $images[] = [ - 'url' => $this->ocImageTool->resize($item['image'], $imageWidth, $imageHeight, 'placeholder.png'), + 'thumbnailURL' => $this->ocImageTool->resize($imagePath, $imageWidth, $imageHeight, 'placeholder.png'), + 'largeURL' => $this->ocImageTool->getUrl($imagePath), + 'width' => $width, + 'height' => $height, 'alt' => $product['product_name'], ]; } diff --git a/spa/src/components/FullScreenImageViewer.vue b/spa/src/components/FullScreenImageViewer.vue new file mode 100644 index 0000000..face9b9 --- /dev/null +++ b/spa/src/components/FullScreenImageViewer.vue @@ -0,0 +1,67 @@ + + + diff --git a/spa/src/components/ProductImageSwiper.vue b/spa/src/components/ProductImageSwiper.vue index b62a366..481cfff 100644 --- a/spa/src/components/ProductImageSwiper.vue +++ b/spa/src/components/ProductImageSwiper.vue @@ -1,100 +1,49 @@ - - - diff --git a/spa/src/main.js b/spa/src/main.js index 6af1725..1879df4 100644 --- a/spa/src/main.js +++ b/spa/src/main.js @@ -11,6 +11,12 @@ import ApplicationError from "@/ApplicationError.vue"; import AppMetaInitializer from "@/utils/AppMetaInitializer.ts"; import {injectYaMetrika} from "@/utils/yaMetrika.js"; + +import { register } from 'swiper/element/bundle'; +import 'swiper/element/bundle'; +import 'swiper/css/bundle'; +register(); + const pinia = createPinia(); const app = createApp(App); app diff --git a/spa/src/style.css b/spa/src/style.css index 42b4524..68c9e23 100644 --- a/spa/src/style.css +++ b/spa/src/style.css @@ -10,7 +10,10 @@ html, body, #app { html { --swiper-pagination-color: var(--color-primary); + --swiper-navigation-color: var(--color-primary); --swiper-pagination-bullet-inactive-color: var(--color-base-content); + --swiper-pagination-fraction-color: var(--color-neutral-content); + --swiper-pagination-bottom: var(--tg-safe-area-inset-bottom); } .swiper-pagination-bullets { diff --git a/spa/src/views/Cart.vue b/spa/src/views/Cart.vue index 39ba6e6..05ac848 100644 --- a/spa/src/views/Cart.vue +++ b/spa/src/views/Cart.vue @@ -27,28 +27,33 @@ :class="item.stock === false ? 'border-error' : ''" >
-
-
- +
+
+
+ +
+
+ +
+

{{ item.name }} ***

+

{{ item.total }}

+

{{ item.price }}/ед

+
+
+

{{ option.name }}: {{ option.value }}

+ + + + + + + + +
+
-

{{ item.name }} ***

-

{{ item.total }}

-

{{ item.price }}/ед

-
-
-

{{ option.name }}: {{ option.value }}

- - - - - - - - -
-
- + + + + + + +
diff --git a/spa/vite.config.js b/spa/vite.config.js index a5a26f6..0360ed4 100644 --- a/spa/vite.config.js +++ b/spa/vite.config.js @@ -1,34 +1,43 @@ -import { defineConfig } from "vite"; +import {defineConfig} from "vite"; import tailwindcss from "@tailwindcss/vite"; import vue from "@vitejs/plugin-vue"; import {fileURLToPath, URL} from 'node:url'; export default defineConfig({ - plugins: [tailwindcss(), vue()], + plugins: [ + tailwindcss(), + vue({ + template: { + compilerOptions: { + isCustomElement: tag => tag.startsWith('swiper-'), + }, + }, + }), + ], - base: '/image/catalog/tgshopspa/', - build: { - outDir: '../module/oc_telegram_shop/upload/image/catalog/tgshopspa', - emptyOutDir: true, - sourcemap: true, - manifest: true, - }, - - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)), + base: '/image/catalog/tgshopspa/', + build: { + outDir: '../module/oc_telegram_shop/upload/image/catalog/tgshopspa', + emptyOutDir: true, + sourcemap: true, + manifest: true, }, - }, - server: { - host: true, - allowedHosts: ["tg.nikitakiselev.ru"], - proxy: { - '/index.php': { - target: 'http://localhost:8000', - changeOrigin: true, - rewrite: path => path, - } - } - }, + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + }, + }, + + server: { + host: true, + allowedHosts: ["tg.nikitakiselev.ru"], + proxy: { + '/index.php': { + target: 'http://localhost:8000', + changeOrigin: true, + rewrite: path => path, + } + } + }, });