feat: add options to select aspect ratio and cron algo for product images

2025-12-08 21:25:00 +03:00
parent bf674473e9
commit e9c6ed8ddf
19 changed files with 98 additions and 188 deletions
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
@@ -61,7 +61,3 @@ function confirmedRemove(event) {
  });
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
@@ -13,10 +13,6 @@
        <span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
        {{ value.data.max_page_count }}
      </div>
-      <div>
-        <span class="tw:font-bold tw:dark:text-slate-200">Соотношение сторон:</span>
-        {{ value.data.image_aspect_ratio || '1:1' }}
-      </div>
    </div>
  </BaseBlock>
 </template>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
@@ -37,18 +37,6 @@
                </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>

@@ -149,30 +137,13 @@ 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 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));
+  return md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value));
 });

 // Инициализация carousel, если его нет (только для записи)
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
@@ -26,15 +26,6 @@
            Ограничение страниц снижает нагрузку на сервер.
          </template>
        </FormItem>
-
-        <FormItem label="Соотношение сторон">
-          <template #default>
-            <AspectRatioSelect v-model="draft.data.image_aspect_ratio"/>
-          </template>
-          <template #help>
-            Выберите соотношение сторон для изображений товаров.
-          </template>
-        </FormItem>
      </div>
    </BaseForm>
  </div>
@@ -46,7 +37,6 @@ import {md5} from "js-md5";
 import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
 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();
@@ -72,7 +62,6 @@ onMounted(() => {
  draft.value = JSON.parse(JSON.stringify(model.value));
  if (draft.value.data) {
    if (draft.value.data.max_page_count) draft.value.data.max_page_count = parseInt(draft.value.data.max_page_count);
-    if (!draft.value.data.image_aspect_ratio) draft.value.data.image_aspect_ratio = '1:1';
  }
 });

--- a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
+++ b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
@@ -58,7 +58,6 @@ export const blocks = [
    goal_name: '',
    data: {
      max_page_count: 10,
-      image_aspect_ratio: '1:1',
    },
  },
  {
@@ -70,7 +69,6 @@ export const blocks = [
    data: {
      category_id: null,
      all_text: null,
-      image_aspect_ratio: '1:1',
      carousel: {
        slides_per_view: null,
        space_between: null,
--- a/frontend/admin/src/stores/settings.js
+++ b/frontend/admin/src/stores/settings.js
@@ -18,6 +18,8 @@ export const useSettingsStore = defineStore('settings', {
        theme_dark: 'dark',
        app_debug: false,
        privacy_policy_link: null,
+        image_aspect_ratio: '1:1',
+        image_crop_algorithm: 'cover',
      },

      telegram: {
--- a/frontend/admin/src/views/GeneralView.vue
+++ b/frontend/admin/src/views/GeneralView.vue
@@ -49,6 +49,19 @@
    Режим разработчика. Рекомендуется включать только по необходимости.
    В остальных случаях, для нормальной работы магазина, должен быть выключен.
  </ItemBool>
+
+  <ItemSelect label="Соотношение сторон" v-model="settings.items.app.image_aspect_ratio" :items="aspectRatioOptions">
+    Выберите соотношение сторон для изображений товаров. Это глобальная настройка, которая будет применяться ко всем изображениям в списках товаров: карусель товаров, лента товаров, результаты поиска.
+  </ItemSelect>
+
+  <ItemSelect label="Алгоритм обрезки" v-model="settings.items.app.image_crop_algorithm" :items="cropAlgorithmOptions">
+    Выберите алгоритм обрезки изображений. Эта настройка применяется глобально ко всем изображениям в списках товаров (карусель товаров, лента товаров, результаты поиска):
+    <ul class="tw:list-disc tw:ml-5 tw:mt-2">
+      <li><strong>Cover</strong> - обрезает изображение, сохраняя пропорции, чтобы заполнить весь размер (может обрезать края)</li>
+      <li><strong>Contain</strong> - вписывает изображение в размер, сохраняя пропорции (может добавить пустые поля)</li>
+      <li><strong>Resize</strong> - изменяет размер изображения с сохранением пропорций (без обрезки)</li>
+    </ul>
+  </ItemSelect>
 </template>

 <script setup>
@@ -60,6 +73,19 @@ import ItemInput from "@/components/Settings/ItemInput.vue";

 const settings = useSettingsStore();
 const themes = JSON.parse(window.TeleCart.themes);
+
+const aspectRatioOptions = {
+  '1:1': '1:1 - Квадрат (универсально, аксессуары, мелкие товары)',
+  '4:5': '4:5 - Вертикальное (одежда, обувь, вертикальные товары)',
+  '3:4': '3:4 - Вертикальное (одежда, обувь, вертикальные товары)',
+  '2:3': '2:3 - Высокое вертикальное (цветы, высокие предметы)',
+};
+
+const cropAlgorithmOptions = {
+  'cover': 'Cover - Обрезать с сохранением пропорций',
+  'contain': 'Contain - Вписать с сохранением пропорций',
+  'resize': 'Resize - Изменить размер с сохранением пропорций',
+};
 </script>

 <style scoped>
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
@@ -51,7 +51,6 @@ async function fetchProducts() {
      maxPages: props.block.data.max_page_count,
      perPage: perPage,
      filters: filtersStore.applied,
-      image_aspect_ratio: props.block.data.image_aspect_ratio,
    }));
    products.value = response.data;
    hasMore.value = response.meta.hasMore;
@@ -94,7 +93,6 @@ async function onLoadMore() {
      perPage: perPage,
      maxPages: props.block.data.max_page_count,
      filters: filtersStore.applied,
-      image_aspect_ratio: props.block.data.image_aspect_ratio,
    }));
    products.value.push(...response.data);
    hasMore.value = response.meta.hasMore;
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/frontend/spa/src/components/ProductsList.vue
@@ -5,7 +5,7 @@

      <template v-if="products.length > 0">
        <div
-            class="products-grid grid grid-cols-2 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
+            class="products-grid grid grid-cols-2 gap-x-2 gap-y-2"
        >
          <RouterLink
              v-for="(product, index) in products"
@@ -31,7 +31,7 @@
      </template>

      <div v-else-if="isLoading === true"
-           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">
+           class="grid grid-cols-2 gap-x-6 gap-y-10">
        <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
          <div class="aspect-square bg-gray-200 rounded-md"></div>
          <div class="h-4 bg-gray-200 rounded w-3/4"></div>
--- a/frontend/spa/src/stores/SettingsStore.js
+++ b/frontend/spa/src/stores/SettingsStore.js
@@ -8,11 +8,6 @@ export const useSettingsStore = defineStore('settings', {
        store_enabled: true,
        app_name: 'OpenCart Telegram магазин',
        app_icon: '',
-        app_icon192: '',
-        app_icon180: '',
-        app_icon152: '',
-        app_icon120: '',
-        manifest_url: null,
        night_auto: true,
        ya_metrika_enabled: false,
        feature_coupons: false,
@@ -31,19 +26,15 @@ export const useSettingsStore = defineStore('settings', {
        mainpage_blocks: [],
        is_privacy_consented: true,
        privacy_policy_link: false,
+        image_aspect_ratio: '1:1',
    }),

    actions: {
        async load() {
            console.log('Load settings');
            const settings = await fetchSettings();
-            this.manifest_url = settings.manifest_url;
            this.app_name = settings.app_name;
            this.app_icon = settings.app_icon;
-            this.app_icon192 = settings.app_icon192;
-            this.app_icon180 = settings.app_icon180;
-            this.app_icon152 = settings.app_icon152;
-            this.app_icon120 = settings.app_icon120;
            this.theme.light = settings.theme_light;
            this.theme.dark = settings.theme_dark;
            this.ya_metrika_enabled = settings.ya_metrika_enabled;
@@ -56,6 +47,7 @@ export const useSettingsStore = defineStore('settings', {
            this.texts = settings.texts;
            this.mainpage_blocks = settings.mainpage_blocks;
            this.privacy_policy_link = settings.privacy_policy_link;
+            this.image_aspect_ratio = settings.image_aspect_ratio;
        }
    }
 });
--- a/frontend/spa/src/utils/AppMetaInitializer.ts
+++ b/frontend/spa/src/utils/AppMetaInitializer.ts
@@ -16,13 +16,6 @@ class AppMetaInitializer {
        this.setMeta('theme-color', '#000000');
        this.setMeta('msapplication-navbutton-color', '#000000');
        this.setMeta('apple-mobile-web-app-status-bar-style', 'black-translucent');
-        this.addLink('manifest', this.settings.manifest_url);
-
-        this.addLink('icon', this.settings.app_icon192, '192x192');
-        this.addLink('apple-touch-icon', this.settings.app_icon192);
-        this.addLink('apple-touch-icon', this.settings.app_icon180, '180x180');
-        this.addLink('apple-touch-icon', this.settings.app_icon152, '152x152');
-        this.addLink('apple-touch-icon', this.settings.app_icon120, '120x120');
    }

    private setMeta(name: string, content: string) {
--- a/frontend/spa/tests/unit/utils/AppMetaInitializer.test.ts
+++ b/frontend/spa/tests/unit/utils/AppMetaInitializer.test.ts
@@ -14,11 +14,6 @@ describe('AppMetaInitializer', () => {
    
    const settings = {
      app_name: 'Test App',
-      manifest_url: '/manifest.json',
-      app_icon192: '/icon192.png',
-      app_icon180: '/icon180.png',
-      app_icon152: '/icon152.png',
-      app_icon120: '/icon120.png',
    };

    metaInitializer = new AppMetaInitializer(settings);
@@ -43,14 +38,6 @@ describe('AppMetaInitializer', () => {
    expect(appNameMeta?.getAttribute('content')).toBe('Test App');
  });

-  it('должен создавать link теги для иконок', () => {
-    metaInitializer.init();
-    
-    const iconLink = document.querySelector('link[rel="icon"]');
-    expect(iconLink).not.toBeNull();
-    expect(iconLink?.getAttribute('href')).toBe('/icon192.png');
-  });
-
  it('должен создавать apple-touch-icon теги', () => {
    metaInitializer.init();
    
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/configs/app.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/configs/app.php
@@ -7,7 +7,9 @@ return [
        'app_icon' => null,
        "theme_light" => "light",
        "theme_dark" => "dark",
-        "app_debug" => false
+        "app_debug" => false,
+        'image_aspect_ratio' => '1:1',
+        'image_crop_algorithm' => 'cover',
    ],

    'telegram' => [
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageFactory.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageFactory.php
@@ -61,7 +61,12 @@ class ImageFactory
        return $this;
    }

-    public function resize(?int $width = null, ?int $height = null, $operation = 'resize'): self
+    public function crop(string $algorithm, ?int $width = null, ?int $height = null): self
+    {
+        return $this->{$algorithm}($width, $height);
+    }
+
+    public function resize(?int $width = null, ?int $height = null): self
    {
        $this->modifications['resize'] = [
            'width' => $width,
--- 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,14 +34,12 @@ class ProductsHandler
        $maxPages = (int) $request->json('maxPages', 10);
        $search = trim($request->get('search', ''));
        $filters = $request->json('filters');
-        $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,
-            $aspectRatio,
        );

        return new JsonResponse($response);
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/SettingsHandler.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/SettingsHandler.php
@@ -7,7 +7,6 @@ use Exception;
 use GuzzleHttp\Exception\ClientException;
 use Openguru\OpenCartFramework\Http\Request;
 use Openguru\OpenCartFramework\ImageTool\ImageFactory;
-use Openguru\OpenCartFramework\Router\Router;
 use Openguru\OpenCartFramework\Telegram\TelegramService;
 use Symfony\Component\HttpFoundation\JsonResponse;

@@ -15,18 +14,15 @@ class SettingsHandler
 {
    private SettingsService $settings;
    private ImageFactory $image;
-    private Router $router;
    private TelegramService $telegramService;

    public function __construct(
        SettingsService $settings,
        ImageFactory $image,
-        Router $router,
        TelegramService $telegramService
    ) {
        $this->settings = $settings;
        $this->image = $image;
-        $this->router = $router;
        $this->telegramService = $telegramService;
    }

@@ -36,15 +32,8 @@ class SettingsHandler

        $appIcon = $appConfig->getAppIcon();
        $hash = $this->settings->getHash();
-        $icons = [];

        if ($appIcon) {
-            $icons['icon192'] = $this->image->make($appIcon)->resize(192, 192)->url('png') . '?_v=' . $hash;
-            $icons['icon180'] = $this->image->make($appIcon)->resize(180, 180)->url('png') . '?_v=' . $hash;
-            ;
-            $icons['icon152'] = $this->image->make($appIcon)->resize(152, 152)->url('png') . '?_v=' . $hash;
-            ;
-            $icons['icon120'] = $this->image->make($appIcon)->resize(120, 120)->url('png') . '?_v=' . $hash;
            $appIcon = $this->image->make($appIcon)->resize(null, 64)->url('png') . '?_v=' . $hash;
        }

@@ -52,11 +41,6 @@ class SettingsHandler
            'app_name' => $appConfig->getAppName(),
            'app_debug' => $appConfig->isAppDebug(),
            'app_icon' => $appIcon,
-            'app_icon192' => $icons['icon192'] ?? '',
-            'app_icon180' => $icons['icon180'] ?? '',
-            'app_icon152' => $icons['icon152'] ?? '',
-            'app_icon120' => $icons['icon120'] ?? '',
-            'manifest_url' => $this->router->url('manifest', ['_v' => $hash]),
            'theme_light' => $appConfig->getThemeLight(),
            'theme_dark' => $appConfig->getThemeDark(),
            'ya_metrika_enabled' => $this->settings->config()->getMetrics()->isYandexMetrikaEnabled(),
@@ -68,42 +52,10 @@ class SettingsHandler
            'texts' => $this->settings->config()->getTexts()->toArray(),
            'mainpage_blocks' => $this->settings->get('mainpage_blocks', []),
            'privacy_policy_link' => $this->settings->get('app.privacy_policy_link'),
+            'image_aspect_ratio' => $this->settings->get('app.image_aspect_ratio', '1:1'),
        ]);
    }

-    public function manifest(): JsonResponse
-    {
-        $manifest = [
-            'name' => $this->settings->config()->getApp()->getAppName(),
-            'short_name' => $this->settings->config()->getApp()->getAppName(),
-            'start_url' => '/image/catalog/tgshopspa/',
-            'display' => 'standalone',
-            'background_color' => '#ffffff',
-            'theme_color' => '#000000',
-            'orientation' => 'portrait',
-        ];
-
-        $appIcon = $this->settings->config()->getApp()->getAppIcon();
-        if ($appIcon) {
-            $icon192 = $this->image->make($appIcon)->resize(192, 192)->url('png');
-            $icon512 = $this->image->make($appIcon)->resize(512, 512)->url('png');
-            $manifest['icons'] = [
-                [
-                    'src' => $icon192,
-                    'sizes' => '192x192',
-                    'type' => 'image/png',
-                ],
-                [
-                    'src' => $icon512,
-                    'sizes' => '512x512',
-                    'type' => 'image/png',
-                ]
-            ];
-        }
-
-        return new JsonResponse($manifest);
-    }
-
    public function testTgMessage(Request $request): JsonResponse
    {
        $template = $request->json('template', 'Нет шаблона');
--- 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
@@ -6,7 +6,6 @@ use Openguru\OpenCartFramework\Cache\CacheInterface;
 use Openguru\OpenCartFramework\ImageTool\ImageFactory;
 use Openguru\OpenCartFramework\QueryBuilder\Builder;
 use Openguru\OpenCartFramework\QueryBuilder\JoinClause;
-use Openguru\OpenCartFramework\Support\Arr;
 use RuntimeException;

 class BlocksService
@@ -142,9 +141,7 @@ class BlocksService
            ],
        ];

-        $aspectRatio = Arr::get($block, 'data.image_aspect_ratio', '1:1');
-
-        $response = $this->productsService->getProductsResponse($params, $languageId, $aspectRatio);
+        $response = $this->productsService->getProductsResponse($params, $languageId);

        $block['data']['products'] = $response;

--- 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
@@ -58,7 +58,7 @@ class ProductsService
    /**
     * @throws ImageNotFoundException
     */
-    public function getProductsResponse(array $params, int $languageId, string $aspectRatio): array
+    public function getProductsResponse(array $params, int $languageId): array
    {
        $page = $params['page'];
        $perPage = $params['perPage'];
@@ -67,6 +67,9 @@ class ProductsService
        $maxPages = $params['maxPages'] ?? 50;
        $filters = $params['filters'] ?? [];

+        $aspectRatio = $this->settings->get('app.image_aspect_ratio', '1:1');
+        $cropAlgorithm = $this->settings->get('app.image_crop_algorithm', 'cover');
+
        [$imageWidth, $imageHeight] = ImageUtils::aspectRatioToSize($aspectRatio);

        $customerGroupId = $this->settings->config()->getOrders()->getOcCustomerGroupId();
@@ -158,7 +161,7 @@ class ProductsService

            if (count($productsImagesMap[$productId]) < 2) {
                $productsImagesMap[$productId][] = [
-                    'url' => $this->image->make($item['image'])->cover($imageWidth, $imageHeight)->url(),
+                    'url' => $this->image->make($item['image'])->crop($cropAlgorithm, $imageWidth, $imageHeight)->url(),
                    'alt' => 'Product Image',
                ];
            }
@@ -172,11 +175,12 @@ class ProductsService
        }

        return [
-            'data' => array_map(function ($product) use ($productsImagesMap, $imageWidth, $imageHeight, $currency) {
+            'data' => array_map(
+                function ($product) use ($productsImagesMap, $cropAlgorithm, $imageWidth, $imageHeight, $currency) {
                    $allImages = [];

-                $image = $this->image->make($product['product_image'])
-                    ->resize($imageWidth, $imageHeight)
+                    $image = $this->image->make($product['product_image'], false)
+                        ->crop($cropAlgorithm, $imageWidth, $imageHeight)
                        ->url();

                    $allImages[] = [
@@ -185,7 +189,10 @@ class ProductsService
                    ];

                    $price = $this->priceCalculator->format($product['price'], $product['tax_class_id']);
-                $priceNumeric = $this->priceCalculator->getPriceNumeric($product['price'], $product['tax_class_id']);
+                    $priceNumeric = $this->priceCalculator->getPriceNumeric(
+                        $product['price'],
+                        $product['tax_class_id']
+                    );

                    $special = false;
                    $specialPriceNumeric = null;
@@ -219,7 +226,9 @@ class ProductsService
                        'manufacturer_name' => $product['manufacturer_name'],
                        'category_name' => $product['category_name'],
                    ];
-            }, $products),
+                },
+                $products
+            ),

            'meta' => [
                'currentCategoryName' => $categoryName,
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php
@@ -25,7 +25,6 @@ return [
    'health' => [HealthCheckHandler::class, 'handle'],
    'ingest' => [TelemetryHandler::class, 'ingest'],
    'heartbeat' => [TelemetryHandler::class, 'heartbeat'],
-    'manifest' => [SettingsHandler::class, 'manifest'],
    'processBlock' => [BlocksHandler::class, 'processBlock'],
    'product_show' => [ProductsHandler::class, 'show'],
    'products' => [ProductsHandler::class, 'index'],