From 615e8c54a60d076a65bc04e60d26c5cbb21c264f Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Sat, 6 Dec 2025 18:14:07 +0300
Subject: [PATCH] feat: add aspect ratio selector for products_carousel

---
 .../Forms/AspectRatioSelect.vue               | 31 ++++++++++++++++
 .../Forms/ProductsCarouselForm.vue            | 35 ++++++++++++++++++-
 .../Forms/ProductsFeedForm.vue                | 26 ++------------
 .../MainPageConfigurator/availableBlocks.js   |  1 +
 .../framework/ImageTool/ImageUtils.php        | 18 ++++++++++
 .../src/Handlers/ProductsHandler.php          |  6 ++--
 .../src/Services/BlocksService.php            | 21 ++---------
 .../src/Services/ProductsService.php          | 12 +++----
 8 files changed, 96 insertions(+), 54 deletions(-)
 create mode 100644 frontend/admin/src/components/MainPageConfigurator/Forms/AspectRatioSelect.vue
 create mode 100644 module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageUtils.php

diff --git a/frontend/admin/src/components/MainPageConfigurator/Forms/AspectRatioSelect.vue b/frontend/admin/src/components/MainPageConfigurator/Forms/AspectRatioSelect.vue
new file mode 100644
index 0000000..a894316
--- /dev/null
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/AspectRatioSelect.vue
@@ -0,0 +1,31 @@
+<template>
+  <Dropdown
+    v-model="model"
+    :options="aspectRatioOptions"
+    optionLabel="label"
+    optionValue="value"
+    placeholder="Выберите соотношение"
+    class="tw:w-full md:tw:w-96"
+  >
+    <template #option="slotProps">
+      <div class="tw:flex tw:flex-col">
+        <span class="tw:font-medium">{{ slotProps.option.label }}</span>
+        <span class="tw:text-xs tw:text-gray-500 tw:whitespace-normal">{{ slotProps.option.description }}</span>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { Dropdown } from "primevue";
+
+const model = defineModel();
+
+const aspectRatioOptions = [
+  { label: '1:1', value: '1:1', description: 'Универсально, аксессуары, мелкие товары, удобно для всех товаров — идеально для сетки.' },
+  { label: '4:5', value: '4:5', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
+  { label: '3:4', value: '3:4', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
+  { label: '2:3', value: '2:3', description: 'Цветы, высокие предметы (бутылки, букеты, декоративные элементы).' },
+];
+</script>
+
diff --git a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
index 0b4a886..4a8c1bd 100644
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
@@ -36,6 +36,19 @@
                   Текст для кнопки, которая открывает просмотр товаров у категории
                 </template>
               </FormItem>
+
+              <!-- Раздел Изображения -->
+              <div class="tw:border-t tw:border-gray-200 tw:pt-6">
+                <h3 class="tw:text-lg tw:font-medium tw:mb-4">Изображения</h3>
+                <FormItem label="Соотношение сторон">
+                  <template #default>
+                    <AspectRatioSelect v-model="imageAspectRatio"/>
+                  </template>
+                  <template #help>
+                    Выберите соотношение сторон для изображений товаров.
+                  </template>
+                </FormItem>
+              </div>
             </div>
           </Panel>
 
@@ -136,12 +149,31 @@ import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
 import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
 import CategorySelect from "@/components/Form/CategorySelect.vue";
 import {Fieldset, InputNumber, InputText, Panel, ToggleSwitch} from "primevue";
+import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
 
 const draft = ref(null);
 const model = defineModel();
 const emit = defineEmits(['cancel']);
 
-const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));
+const imageAspectRatio = computed({
+  get() {
+    return draft.value.data.image_aspect_ratio || '1:1';
+  },
+  set(value) {
+    draft.value.data.image_aspect_ratio = value;
+  }
+});
+
+const isChanged = computed(() => {
+  const normalize = (obj) => {
+    const clone = JSON.parse(JSON.stringify(obj));
+    if (clone.data && !clone.data.image_aspect_ratio) {
+      clone.data.image_aspect_ratio = '1:1';
+    }
+    return JSON.stringify(clone);
+  };
+  return md5(normalize(model.value)) !== md5(normalize(draft.value));
+});
 
 // Инициализация carousel, если его нет (только для записи)
 function ensureCarousel() {
@@ -242,6 +274,7 @@ function onApply() {
 
 onMounted(async () => {
   draft.value = JSON.parse(JSON.stringify(model.value));
+
   // Не создаем carousel здесь, чтобы не изменять draft при инициализации
   // carousel будет создан только при реальных изменениях пользователем
 });
diff --git a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
index 3fbe455..da3b3de 100644
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
@@ -29,21 +29,7 @@
 
         <FormItem label="Соотношение сторон">
           <template #default>
-            <Dropdown
-              v-model="draft.data.image_aspect_ratio"
-              :options="aspectRatioOptions"
-              optionLabel="label"
-              optionValue="value"
-              placeholder="Выберите соотношение"
-              class="tw:w-full md:tw:w-96"
-            >
-              <template #option="slotProps">
-                <div class="tw:flex tw:flex-col">
-                  <span class="tw:font-medium">{{ slotProps.option.label }}</span>
-                  <span class="tw:text-xs tw:text-gray-500 tw:whitespace-normal">{{ slotProps.option.description }}</span>
-                </div>
-              </template>
-            </Dropdown>
+            <AspectRatioSelect v-model="draft.data.image_aspect_ratio"/>
           </template>
           <template #help>
             Выберите соотношение сторон для изображений товаров.
@@ -58,20 +44,14 @@
 import {computed, defineExpose, onMounted, ref} from "vue";
 import {md5} from "js-md5";
 import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
-import {InputNumber, Dropdown} from "primevue";
+import {InputNumber} from "primevue";
 import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
+import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
 
 const draft = ref(null);
 const model = defineModel();
 const emit = defineEmits(['cancel']);
 
-const aspectRatioOptions = [
-  { label: '1:1', value: '1:1', description: 'Универсально, аксессуары, мелкие товары, удобно для всех товаров — идеально для сетки.' },
-  { label: '4:5', value: '4:5', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
-  { label: '3:4', value: '3:4', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
-  { label: '2:3', value: '2:3', description: 'Цветы, высокие предметы (бутылки, букеты, декоративные элементы).' },
-];
-
 const isChanged = computed(() => {
   const normalize = (obj) => {
     return JSON.stringify(obj, (key, value) => {
diff --git a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
index e62ed17..c6be263 100644
--- a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
+++ b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
@@ -70,6 +70,7 @@ export const blocks = [
     data: {
       category_id: null,
       all_text: null,
+      image_aspect_ratio: '1:1',
       carousel: {
         slides_per_view: null,
         space_between: null,
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageUtils.php b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageUtils.php
new file mode 100644
index 0000000..284ce4d
--- /dev/null
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageUtils.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Openguru\OpenCartFramework\ImageTool;
+
+class ImageUtils
+{
+    private static array $aspectRatiosMap = [
+        '1:1' => [400, 400],
+        '4:5' => [400, 500],
+        '3:4' => [400, 533],
+        '2:3' => [400, 600],
+    ];
+
+    public static function aspectRatioToSize(string $aspectRatio, array $default = [400, 400]): array
+    {
+        return self::$aspectRatiosMap[$aspectRatio] ?? $default;
+    }
+}
\ No newline at end of file
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 84e19d4..560e922 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
@@ -34,16 +34,14 @@ class ProductsHandler
         $maxPages = (int) $request->json('maxPages', 10);
         $search = trim($request->get('search', ''));
         $filters = $request->json('filters');
-        $width = (int) $request->json('width', 300);
-        $height = (int) $request->json('height', 300);
+        $aspectRatio = $request->json('image_aspect_ratio', '1:1');
 
         $languageId = $this->settings->config()->getApp()->getLanguageId();
 
         $response = $this->productsService->getProductsResponse(
             compact('page', 'perPage', 'search', 'filters', 'maxPages'),
             $languageId,
-            $width,
-            $height,
+            $aspectRatio,
         );
 
         return new JsonResponse($response);
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/BlocksService.php b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/BlocksService.php
index 6920b21..59d7a97 100755
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/BlocksService.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/BlocksService.php
@@ -18,13 +18,6 @@ class BlocksService
         'products_carousel' => [self::class, 'processProductsCarousel'],
     ];
 
-    private static array $aspectRatiosMap = [
-        '1:1' => [400, 400],
-        '4:5' => [400, 500],
-        '3:4' => [400, 533],
-        '2:3' => [400, 600],
-    ];
-
     private ImageFactory $image;
     private CacheInterface $cache;
     private SettingsService $settings;
@@ -121,11 +114,6 @@ class BlocksService
 
     private function processProductsFeed(array $block): array
     {
-        [$width, $height] = $this->aspectRatioToSize(Arr::get($block, 'data.image_aspect_ratio', '1:1'));
-
-        Arr::set($block, 'data.image_width', $width);
-        Arr::set($block, 'data.image_height', $height);
-
         return $block;
     }
 
@@ -154,15 +142,12 @@ class BlocksService
             ],
         ];
 
-        $response = $this->productsService->getProductsResponse($params, $languageId);
+        $aspectRatio = Arr::get($block, 'data.image_aspect_ratio', '1:1');
+
+        $response = $this->productsService->getProductsResponse($params, $languageId, $aspectRatio);
 
         $block['data']['products'] = $response;
 
         return $block;
     }
-
-    private function aspectRatioToSize($aspectRatio): array
-    {
-        return self::$aspectRatiosMap[$aspectRatio] ?? [400, 400];
-    }
 }
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/ProductsService.php b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/ProductsService.php
index 82ecfda..ca314ad 100755
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/ProductsService.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/ProductsService.php
@@ -9,6 +9,7 @@ use Openguru\OpenCartFramework\CriteriaBuilder\CriteriaBuilder;
 use Openguru\OpenCartFramework\Exceptions\EntityNotFoundException;
 use Openguru\OpenCartFramework\ImageTool\ImageFactory;
 use Openguru\OpenCartFramework\ImageTool\ImageNotFoundException;
+use Openguru\OpenCartFramework\ImageTool\ImageUtils;
 use Openguru\OpenCartFramework\OpenCart\Decorators\OcRegistryDecorator;
 use Openguru\OpenCartFramework\OpenCart\PriceCalculator;
 use Openguru\OpenCartFramework\QueryBuilder\Builder;
@@ -57,12 +58,8 @@ class ProductsService
     /**
      * @throws ImageNotFoundException
      */
-    public function getProductsResponse(
-        array $params,
-        int $languageId,
-        int $imageWidth = 300,
-        int $imageHeight = 300
-    ): array {
+    public function getProductsResponse(array $params, int $languageId, string $aspectRatio): array
+    {
         $page = $params['page'];
         $perPage = $params['perPage'];
         $search = $params['search'] ?? false;
@@ -70,8 +67,7 @@ class ProductsService
         $maxPages = $params['maxPages'] ?? 50;
         $filters = $params['filters'] ?? [];
 
-        $imageWidth = $imageWidth ?: 300;
-        $imageHeight = $imageHeight ?: 300;
+        [$imageWidth, $imageHeight] = ImageUtils::aspectRatioToSize($aspectRatio);
 
         $customerGroupId = $this->settings->config()->getOrders()->getOcCustomerGroupId();
         $currency = $this->settings->config()->getStore()->getOcDefaultCurrency();