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('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
+    console.debug('[Products Feed]: Start to load products for page 1. 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,
     }),