feat: add aspect ratio selector for products_carousel

2025-12-06 18:14:07 +03:00
parent 1fbbb7b6db
commit 615e8c54a6
8 changed files with 96 additions and 54 deletions
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/AspectRatioSelect.vue
+++ 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>
+
--- 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 будет создан только при реальных изменениях пользователем
 });
--- 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) => {
--- 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,
--- 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
@@ -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;
+    }
+}
--- 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);
--- 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];
-    }
 }
--- 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();