feat(products-feed): replace fixed image dimensions with aspect ratio selection

- Added image aspect ratio selection (1:1, 4:5, 3:4, 2:3) to ProductsFeed block configuration in Admin panel
- Removed manual width/height input fields
- Updated ProductsFeed block in SPA to send aspect ratio parameter instead of dimensions
- Implemented backend logic to calculate image height based on selected aspect ratio and base width (300px)
- Updated default configuration for products_feed block
- Added descriptive help text for each aspect ratio option in the dropdown

frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue

@@ -13,6 +13,10 @@
         <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>

frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue

@@ -26,6 +26,29 @@
             Ограничение страниц снижает нагрузку на сервер.
           </template>
         </FormItem>
+
+        <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>
+          </template>
+          <template #help>
+            Выберите соотношение сторон для изображений товаров.
+          </template>
+        </FormItem>
       </div>
     </BaseForm>
   </div>
@@ -35,14 +58,31 @@
 import {computed, defineExpose, onMounted, ref} from "vue";
 import {md5} from "js-md5";
 import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
-import {InputNumber} from "primevue";
+import {InputNumber, Dropdown} from "primevue";
 import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.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 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) => {
+      if (['max_page_count'].includes(key)) {
+        return value !== null && value !== undefined && value !== '' ? parseInt(value) : value;
+      }
+      return value;
+    });
+  };
+  return md5(normalize(model.value)) !== md5(normalize(draft.value));
+});
 
 function onApply() {
   model.value = JSON.parse(JSON.stringify(draft.value));
@@ -50,6 +90,10 @@ function onApply() {
 
 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';
+  }
 });
 
 defineExpose({isChanged});

frontend/admin/src/components/MainPageConfigurator/availableBlocks.js

@@ -58,6 +58,7 @@ export const blocks = [
     goal_name: '',
     data: {
       max_page_count: 10,
+      image_aspect_ratio: '1:1',
     },
   },
   {

frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue

@@ -33,7 +33,7 @@ const hasMore = ref(false);
 const isLoading = ref(false);
 const isLoadingMore = ref(false);
 const page = ref(1);
-const perPage = 20;
+const perPage = 10;
 
 const props = defineProps({
   block: {
@@ -45,17 +45,17 @@ const props = defineProps({
 async function fetchProducts() {
   try {
     isLoading.value = true;
-    console.debug('Home: Load products for Main Page.');
+    console.debug('[Products Feed]: Start to load products for page 1. Filters: ', toRaw(filtersStore.applied));
-    console.debug('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
     const response = await ftch('products', null, toRaw({
-      page: page.value,
+      page: 1,
       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;
-    console.debug('ProductsFeedBlock: Products for main page loaded.');
+    console.debug('[Products Feed]: Products loaded for page 1. Has More: ', hasMore.value);
 
     yaMetrika.dataLayerPush({
       ecommerce: {
@@ -84,18 +84,21 @@ async function fetchProducts() {
 
 async function onLoadMore() {
   try {
-    console.debug('ProductsFeedBlock: onLoadMore');
+    console.debug('[Products Feed]: onLoadMore');
     if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
     isLoadingMore.value = true;
     page.value++;
-    console.debug('ProductsFeedBlock: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
+    console.debug('[Products Feed]: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
     const response = await ftch('products', null, toRaw({
       page: page.value,
+      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;
+    console.debug(`[Products Feed]: Products loaded for page ${page.value}. Has More: `, hasMore.value);
   } catch (error) {
     console.error(error);
   } finally {

frontend/spa/src/components/ProductsList.vue

@@ -131,12 +131,13 @@ function productClick(product, index) {
 useIntersectionObserver(
     bottom,
     ([entry]) => {
-      console.debug('Check Intersection');
+      console.debug('[Product List]: Check Intersection: ', entry?.isIntersecting);
       if (entry?.isIntersecting === true
           && props.hasMore === true
           && props.isLoading === false
           && props.isLoadingMore === false
       ) {
+        console.debug('[Product List]: Send Load More signal');
         emits('loadMore');
       }
     },

frontend/spa/src/stores/SettingsStore.js

@@ -29,7 +29,7 @@ export const useSettingsStore = defineStore('settings', {
             text_order_created_success: 'Заказ успешно оформлен.',
         },
         mainpage_blocks: [],
-        is_privacy_consented: false,
+        is_privacy_consented: true,
         privacy_policy_link: false,
     }),
 

module/oc_telegram_shop/upload/oc_telegram_shop/configs/app.php

@@ -73,6 +73,7 @@ TEXT,
             'goal_name' => '',
             'data' => [
                 'max_page_count' => 10,
+                'image_aspect_ratio' => '1:1',
             ],
         ],
     ],

module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php

@@ -8,11 +8,11 @@ use App\Services\ProductsService;
 use App\Services\SettingsService;
 use Exception;
 use Openguru\OpenCartFramework\Exceptions\EntityNotFoundException;
-use Symfony\Component\HttpFoundation\JsonResponse;
 use Openguru\OpenCartFramework\Http\Request;
-use Symfony\Component\HttpFoundation\Response;
 use Psr\Log\LoggerInterface;
 use RuntimeException;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Response;
 
 class ProductsHandler
 {
@@ -34,11 +34,16 @@ 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);
+
         $languageId = $this->settings->config()->getApp()->getLanguageId();
 
         $response = $this->productsService->getProductsResponse(
             compact('page', 'perPage', 'search', 'filters', 'maxPages'),
             $languageId,
+            $width,
+            $height,
         );
 
         return new JsonResponse($response);

module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/BlocksService.php

@@ -6,6 +6,7 @@ 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
@@ -17,6 +18,13 @@ 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;
@@ -113,6 +121,11 @@ 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;
     }
 
@@ -147,4 +160,9 @@ class BlocksService
 
         return $block;
     }
+
+    private function aspectRatioToSize($aspectRatio): array
+    {
+        return self::$aspectRatiosMap[$aspectRatio] ?? [400, 400];
+    }
 }

module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/ProductsService.php

@@ -53,17 +53,22 @@ class ProductsService
     /**
      * @throws ImageNotFoundException
      */
-    public function getProductsResponse(array $params, int $languageId): array
+    public function getProductsResponse(
-    {
+        array $params,
+        int $languageId,
+        int $imageWidth = 300,
+        int $imageHeight = 300
+    ): array {
         $page = $params['page'];
         $perPage = $params['perPage'];
         $search = $params['search'] ?? false;
         $categoryName = '';
-        $imageWidth = 300;
-        $imageHeight = 300;
         $maxPages = $params['maxPages'] ?? 50;
         $filters = $params['filters'] ?? [];
 
+        $imageWidth = $imageWidth ?: 300;
+        $imageHeight = $imageHeight ?: 300;
+
         $customerGroupId = $this->settings->config()->getOrders()->getOcCustomerGroupId();
         $currency = $this->settings->config()->getStore()->getOcDefaultCurrency();