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 @@
+
+
+
+
+ {{ slotProps.option.label }}
+ {{ slotProps.option.description }}
+
+
+
+
+
+
+
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 @@
Текст для кнопки, которая открывает просмотр товаров у категории
+
+
+
+
Изображения
+
+
+
+
+
+ Выберите соотношение сторон для изображений товаров.
+
+
+
@@ -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 @@
-
-
-
- {{ slotProps.option.label }}
- {{ slotProps.option.description }}
-
-
-
+
Выберите соотношение сторон для изображений товаров.
@@ -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 @@
+ [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();