feat: add options to select aspect ratio and cron algo for product images
This commit is contained in:
@@ -61,7 +61,3 @@ function confirmedRemove(event) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -13,10 +13,6 @@
|
|||||||
<span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
|
<span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
|
||||||
{{ value.data.max_page_count }}
|
{{ value.data.max_page_count }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<span class="tw:font-bold tw:dark:text-slate-200">Соотношение сторон:</span>
|
|
||||||
{{ value.data.image_aspect_ratio || '1:1' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</BaseBlock>
|
</BaseBlock>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -37,18 +37,6 @@
|
|||||||
</template>
|
</template>
|
||||||
</FormItem>
|
</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>
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
@@ -149,30 +137,13 @@ import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
|
|||||||
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
|
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
|
||||||
import CategorySelect from "@/components/Form/CategorySelect.vue";
|
import CategorySelect from "@/components/Form/CategorySelect.vue";
|
||||||
import {Fieldset, InputNumber, InputText, Panel, ToggleSwitch} from "primevue";
|
import {Fieldset, InputNumber, InputText, Panel, ToggleSwitch} from "primevue";
|
||||||
import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
|
|
||||||
|
|
||||||
const draft = ref(null);
|
const draft = ref(null);
|
||||||
const model = defineModel();
|
const model = defineModel();
|
||||||
const emit = defineEmits(['cancel']);
|
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 isChanged = computed(() => {
|
||||||
const normalize = (obj) => {
|
return md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value));
|
||||||
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, если его нет (только для записи)
|
// Инициализация carousel, если его нет (только для записи)
|
||||||
|
|||||||
@@ -26,15 +26,6 @@
|
|||||||
Ограничение страниц снижает нагрузку на сервер.
|
Ограничение страниц снижает нагрузку на сервер.
|
||||||
</template>
|
</template>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem label="Соотношение сторон">
|
|
||||||
<template #default>
|
|
||||||
<AspectRatioSelect v-model="draft.data.image_aspect_ratio"/>
|
|
||||||
</template>
|
|
||||||
<template #help>
|
|
||||||
Выберите соотношение сторон для изображений товаров.
|
|
||||||
</template>
|
|
||||||
</FormItem>
|
|
||||||
</div>
|
</div>
|
||||||
</BaseForm>
|
</BaseForm>
|
||||||
</div>
|
</div>
|
||||||
@@ -46,7 +37,6 @@ import {md5} from "js-md5";
|
|||||||
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
|
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
|
||||||
import {InputNumber} from "primevue";
|
import {InputNumber} from "primevue";
|
||||||
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
|
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
|
||||||
import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
|
|
||||||
|
|
||||||
const draft = ref(null);
|
const draft = ref(null);
|
||||||
const model = defineModel();
|
const model = defineModel();
|
||||||
@@ -72,7 +62,6 @@ onMounted(() => {
|
|||||||
draft.value = JSON.parse(JSON.stringify(model.value));
|
draft.value = JSON.parse(JSON.stringify(model.value));
|
||||||
if (draft.value.data) {
|
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.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';
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -58,7 +58,6 @@ export const blocks = [
|
|||||||
goal_name: '',
|
goal_name: '',
|
||||||
data: {
|
data: {
|
||||||
max_page_count: 10,
|
max_page_count: 10,
|
||||||
image_aspect_ratio: '1:1',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -70,7 +69,6 @@ export const blocks = [
|
|||||||
data: {
|
data: {
|
||||||
category_id: null,
|
category_id: null,
|
||||||
all_text: null,
|
all_text: null,
|
||||||
image_aspect_ratio: '1:1',
|
|
||||||
carousel: {
|
carousel: {
|
||||||
slides_per_view: null,
|
slides_per_view: null,
|
||||||
space_between: null,
|
space_between: null,
|
||||||
|
|||||||
@@ -18,6 +18,8 @@ export const useSettingsStore = defineStore('settings', {
|
|||||||
theme_dark: 'dark',
|
theme_dark: 'dark',
|
||||||
app_debug: false,
|
app_debug: false,
|
||||||
privacy_policy_link: null,
|
privacy_policy_link: null,
|
||||||
|
image_aspect_ratio: '1:1',
|
||||||
|
image_crop_algorithm: 'cover',
|
||||||
},
|
},
|
||||||
|
|
||||||
telegram: {
|
telegram: {
|
||||||
|
|||||||
@@ -49,6 +49,19 @@
|
|||||||
Режим разработчика. Рекомендуется включать только по необходимости.
|
Режим разработчика. Рекомендуется включать только по необходимости.
|
||||||
В остальных случаях, для нормальной работы магазина, должен быть выключен.
|
В остальных случаях, для нормальной работы магазина, должен быть выключен.
|
||||||
</ItemBool>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -60,6 +73,19 @@ import ItemInput from "@/components/Settings/ItemInput.vue";
|
|||||||
|
|
||||||
const settings = useSettingsStore();
|
const settings = useSettingsStore();
|
||||||
const themes = JSON.parse(window.TeleCart.themes);
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -51,7 +51,6 @@ async function fetchProducts() {
|
|||||||
maxPages: props.block.data.max_page_count,
|
maxPages: props.block.data.max_page_count,
|
||||||
perPage: perPage,
|
perPage: perPage,
|
||||||
filters: filtersStore.applied,
|
filters: filtersStore.applied,
|
||||||
image_aspect_ratio: props.block.data.image_aspect_ratio,
|
|
||||||
}));
|
}));
|
||||||
products.value = response.data;
|
products.value = response.data;
|
||||||
hasMore.value = response.meta.hasMore;
|
hasMore.value = response.meta.hasMore;
|
||||||
@@ -94,7 +93,6 @@ async function onLoadMore() {
|
|||||||
perPage: perPage,
|
perPage: perPage,
|
||||||
maxPages: props.block.data.max_page_count,
|
maxPages: props.block.data.max_page_count,
|
||||||
filters: filtersStore.applied,
|
filters: filtersStore.applied,
|
||||||
image_aspect_ratio: props.block.data.image_aspect_ratio,
|
|
||||||
}));
|
}));
|
||||||
products.value.push(...response.data);
|
products.value.push(...response.data);
|
||||||
hasMore.value = response.meta.hasMore;
|
hasMore.value = response.meta.hasMore;
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<template v-if="products.length > 0">
|
<template v-if="products.length > 0">
|
||||||
<div
|
<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
|
<RouterLink
|
||||||
v-for="(product, index) in products"
|
v-for="(product, index) in products"
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div v-else-if="isLoading === true"
|
<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 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="aspect-square bg-gray-200 rounded-md"></div>
|
||||||
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
|
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||||
|
|||||||
@@ -8,11 +8,6 @@ export const useSettingsStore = defineStore('settings', {
|
|||||||
store_enabled: true,
|
store_enabled: true,
|
||||||
app_name: 'OpenCart Telegram магазин',
|
app_name: 'OpenCart Telegram магазин',
|
||||||
app_icon: '',
|
app_icon: '',
|
||||||
app_icon192: '',
|
|
||||||
app_icon180: '',
|
|
||||||
app_icon152: '',
|
|
||||||
app_icon120: '',
|
|
||||||
manifest_url: null,
|
|
||||||
night_auto: true,
|
night_auto: true,
|
||||||
ya_metrika_enabled: false,
|
ya_metrika_enabled: false,
|
||||||
feature_coupons: false,
|
feature_coupons: false,
|
||||||
@@ -31,19 +26,15 @@ export const useSettingsStore = defineStore('settings', {
|
|||||||
mainpage_blocks: [],
|
mainpage_blocks: [],
|
||||||
is_privacy_consented: true,
|
is_privacy_consented: true,
|
||||||
privacy_policy_link: false,
|
privacy_policy_link: false,
|
||||||
|
image_aspect_ratio: '1:1',
|
||||||
}),
|
}),
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
async load() {
|
async load() {
|
||||||
console.log('Load settings');
|
console.log('Load settings');
|
||||||
const settings = await fetchSettings();
|
const settings = await fetchSettings();
|
||||||
this.manifest_url = settings.manifest_url;
|
|
||||||
this.app_name = settings.app_name;
|
this.app_name = settings.app_name;
|
||||||
this.app_icon = settings.app_icon;
|
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.light = settings.theme_light;
|
||||||
this.theme.dark = settings.theme_dark;
|
this.theme.dark = settings.theme_dark;
|
||||||
this.ya_metrika_enabled = settings.ya_metrika_enabled;
|
this.ya_metrika_enabled = settings.ya_metrika_enabled;
|
||||||
@@ -56,6 +47,7 @@ export const useSettingsStore = defineStore('settings', {
|
|||||||
this.texts = settings.texts;
|
this.texts = settings.texts;
|
||||||
this.mainpage_blocks = settings.mainpage_blocks;
|
this.mainpage_blocks = settings.mainpage_blocks;
|
||||||
this.privacy_policy_link = settings.privacy_policy_link;
|
this.privacy_policy_link = settings.privacy_policy_link;
|
||||||
|
this.image_aspect_ratio = settings.image_aspect_ratio;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -16,13 +16,6 @@ class AppMetaInitializer {
|
|||||||
this.setMeta('theme-color', '#000000');
|
this.setMeta('theme-color', '#000000');
|
||||||
this.setMeta('msapplication-navbutton-color', '#000000');
|
this.setMeta('msapplication-navbutton-color', '#000000');
|
||||||
this.setMeta('apple-mobile-web-app-status-bar-style', 'black-translucent');
|
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) {
|
private setMeta(name: string, content: string) {
|
||||||
|
|||||||
@@ -14,11 +14,6 @@ describe('AppMetaInitializer', () => {
|
|||||||
|
|
||||||
const settings = {
|
const settings = {
|
||||||
app_name: 'Test App',
|
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);
|
metaInitializer = new AppMetaInitializer(settings);
|
||||||
@@ -43,14 +38,6 @@ describe('AppMetaInitializer', () => {
|
|||||||
expect(appNameMeta?.getAttribute('content')).toBe('Test App');
|
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 теги', () => {
|
it('должен создавать apple-touch-icon теги', () => {
|
||||||
metaInitializer.init();
|
metaInitializer.init();
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,9 @@ return [
|
|||||||
'app_icon' => null,
|
'app_icon' => null,
|
||||||
"theme_light" => "light",
|
"theme_light" => "light",
|
||||||
"theme_dark" => "dark",
|
"theme_dark" => "dark",
|
||||||
"app_debug" => false
|
"app_debug" => false,
|
||||||
|
'image_aspect_ratio' => '1:1',
|
||||||
|
'image_crop_algorithm' => 'cover',
|
||||||
],
|
],
|
||||||
|
|
||||||
'telegram' => [
|
'telegram' => [
|
||||||
|
|||||||
@@ -61,7 +61,12 @@ class ImageFactory
|
|||||||
return $this;
|
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'] = [
|
$this->modifications['resize'] = [
|
||||||
'width' => $width,
|
'width' => $width,
|
||||||
|
|||||||
@@ -34,14 +34,12 @@ class ProductsHandler
|
|||||||
$maxPages = (int) $request->json('maxPages', 10);
|
$maxPages = (int) $request->json('maxPages', 10);
|
||||||
$search = trim($request->get('search', ''));
|
$search = trim($request->get('search', ''));
|
||||||
$filters = $request->json('filters');
|
$filters = $request->json('filters');
|
||||||
$aspectRatio = $request->json('image_aspect_ratio', '1:1');
|
|
||||||
|
|
||||||
$languageId = $this->settings->config()->getApp()->getLanguageId();
|
$languageId = $this->settings->config()->getApp()->getLanguageId();
|
||||||
|
|
||||||
$response = $this->productsService->getProductsResponse(
|
$response = $this->productsService->getProductsResponse(
|
||||||
compact('page', 'perPage', 'search', 'filters', 'maxPages'),
|
compact('page', 'perPage', 'search', 'filters', 'maxPages'),
|
||||||
$languageId,
|
$languageId,
|
||||||
$aspectRatio,
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return new JsonResponse($response);
|
return new JsonResponse($response);
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ use Exception;
|
|||||||
use GuzzleHttp\Exception\ClientException;
|
use GuzzleHttp\Exception\ClientException;
|
||||||
use Openguru\OpenCartFramework\Http\Request;
|
use Openguru\OpenCartFramework\Http\Request;
|
||||||
use Openguru\OpenCartFramework\ImageTool\ImageFactory;
|
use Openguru\OpenCartFramework\ImageTool\ImageFactory;
|
||||||
use Openguru\OpenCartFramework\Router\Router;
|
|
||||||
use Openguru\OpenCartFramework\Telegram\TelegramService;
|
use Openguru\OpenCartFramework\Telegram\TelegramService;
|
||||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||||
|
|
||||||
@@ -15,18 +14,15 @@ class SettingsHandler
|
|||||||
{
|
{
|
||||||
private SettingsService $settings;
|
private SettingsService $settings;
|
||||||
private ImageFactory $image;
|
private ImageFactory $image;
|
||||||
private Router $router;
|
|
||||||
private TelegramService $telegramService;
|
private TelegramService $telegramService;
|
||||||
|
|
||||||
public function __construct(
|
public function __construct(
|
||||||
SettingsService $settings,
|
SettingsService $settings,
|
||||||
ImageFactory $image,
|
ImageFactory $image,
|
||||||
Router $router,
|
|
||||||
TelegramService $telegramService
|
TelegramService $telegramService
|
||||||
) {
|
) {
|
||||||
$this->settings = $settings;
|
$this->settings = $settings;
|
||||||
$this->image = $image;
|
$this->image = $image;
|
||||||
$this->router = $router;
|
|
||||||
$this->telegramService = $telegramService;
|
$this->telegramService = $telegramService;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,15 +32,8 @@ class SettingsHandler
|
|||||||
|
|
||||||
$appIcon = $appConfig->getAppIcon();
|
$appIcon = $appConfig->getAppIcon();
|
||||||
$hash = $this->settings->getHash();
|
$hash = $this->settings->getHash();
|
||||||
$icons = [];
|
|
||||||
|
|
||||||
if ($appIcon) {
|
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;
|
$appIcon = $this->image->make($appIcon)->resize(null, 64)->url('png') . '?_v=' . $hash;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -52,11 +41,6 @@ class SettingsHandler
|
|||||||
'app_name' => $appConfig->getAppName(),
|
'app_name' => $appConfig->getAppName(),
|
||||||
'app_debug' => $appConfig->isAppDebug(),
|
'app_debug' => $appConfig->isAppDebug(),
|
||||||
'app_icon' => $appIcon,
|
'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_light' => $appConfig->getThemeLight(),
|
||||||
'theme_dark' => $appConfig->getThemeDark(),
|
'theme_dark' => $appConfig->getThemeDark(),
|
||||||
'ya_metrika_enabled' => $this->settings->config()->getMetrics()->isYandexMetrikaEnabled(),
|
'ya_metrika_enabled' => $this->settings->config()->getMetrics()->isYandexMetrikaEnabled(),
|
||||||
@@ -68,42 +52,10 @@ class SettingsHandler
|
|||||||
'texts' => $this->settings->config()->getTexts()->toArray(),
|
'texts' => $this->settings->config()->getTexts()->toArray(),
|
||||||
'mainpage_blocks' => $this->settings->get('mainpage_blocks', []),
|
'mainpage_blocks' => $this->settings->get('mainpage_blocks', []),
|
||||||
'privacy_policy_link' => $this->settings->get('app.privacy_policy_link'),
|
'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
|
public function testTgMessage(Request $request): JsonResponse
|
||||||
{
|
{
|
||||||
$template = $request->json('template', 'Нет шаблона');
|
$template = $request->json('template', 'Нет шаблона');
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ use Openguru\OpenCartFramework\Cache\CacheInterface;
|
|||||||
use Openguru\OpenCartFramework\ImageTool\ImageFactory;
|
use Openguru\OpenCartFramework\ImageTool\ImageFactory;
|
||||||
use Openguru\OpenCartFramework\QueryBuilder\Builder;
|
use Openguru\OpenCartFramework\QueryBuilder\Builder;
|
||||||
use Openguru\OpenCartFramework\QueryBuilder\JoinClause;
|
use Openguru\OpenCartFramework\QueryBuilder\JoinClause;
|
||||||
use Openguru\OpenCartFramework\Support\Arr;
|
|
||||||
use RuntimeException;
|
use RuntimeException;
|
||||||
|
|
||||||
class BlocksService
|
class BlocksService
|
||||||
@@ -142,9 +141,7 @@ class BlocksService
|
|||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
$aspectRatio = Arr::get($block, 'data.image_aspect_ratio', '1:1');
|
$response = $this->productsService->getProductsResponse($params, $languageId);
|
||||||
|
|
||||||
$response = $this->productsService->getProductsResponse($params, $languageId, $aspectRatio);
|
|
||||||
|
|
||||||
$block['data']['products'] = $response;
|
$block['data']['products'] = $response;
|
||||||
|
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ class ProductsService
|
|||||||
/**
|
/**
|
||||||
* @throws ImageNotFoundException
|
* @throws ImageNotFoundException
|
||||||
*/
|
*/
|
||||||
public function getProductsResponse(array $params, int $languageId, string $aspectRatio): array
|
public function getProductsResponse(array $params, int $languageId): array
|
||||||
{
|
{
|
||||||
$page = $params['page'];
|
$page = $params['page'];
|
||||||
$perPage = $params['perPage'];
|
$perPage = $params['perPage'];
|
||||||
@@ -67,6 +67,9 @@ class ProductsService
|
|||||||
$maxPages = $params['maxPages'] ?? 50;
|
$maxPages = $params['maxPages'] ?? 50;
|
||||||
$filters = $params['filters'] ?? [];
|
$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);
|
[$imageWidth, $imageHeight] = ImageUtils::aspectRatioToSize($aspectRatio);
|
||||||
|
|
||||||
$customerGroupId = $this->settings->config()->getOrders()->getOcCustomerGroupId();
|
$customerGroupId = $this->settings->config()->getOrders()->getOcCustomerGroupId();
|
||||||
@@ -152,13 +155,13 @@ class ProductsService
|
|||||||
$productId = $item['product_id'];
|
$productId = $item['product_id'];
|
||||||
|
|
||||||
// Ограничиваем количество картинок для каждого товара до 3
|
// Ограничиваем количество картинок для каждого товара до 3
|
||||||
if (!isset($productsImagesMap[$productId])) {
|
if (! isset($productsImagesMap[$productId])) {
|
||||||
$productsImagesMap[$productId] = [];
|
$productsImagesMap[$productId] = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (count($productsImagesMap[$productId]) < 2) {
|
if (count($productsImagesMap[$productId]) < 2) {
|
||||||
$productsImagesMap[$productId][] = [
|
$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',
|
'alt' => 'Product Image',
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
@@ -172,54 +175,60 @@ class ProductsService
|
|||||||
}
|
}
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'data' => array_map(function ($product) use ($productsImagesMap, $imageWidth, $imageHeight, $currency) {
|
'data' => array_map(
|
||||||
$allImages = [];
|
function ($product) use ($productsImagesMap, $cropAlgorithm, $imageWidth, $imageHeight, $currency) {
|
||||||
|
$allImages = [];
|
||||||
|
|
||||||
$image = $this->image->make($product['product_image'])
|
$image = $this->image->make($product['product_image'], false)
|
||||||
->resize($imageWidth, $imageHeight)
|
->crop($cropAlgorithm, $imageWidth, $imageHeight)
|
||||||
->url();
|
->url();
|
||||||
|
|
||||||
$allImages[] = [
|
$allImages[] = [
|
||||||
'url' => $image,
|
'url' => $image,
|
||||||
'alt' => Str::htmlEntityEncode($product['product_name']),
|
'alt' => Str::htmlEntityEncode($product['product_name']),
|
||||||
];
|
];
|
||||||
|
|
||||||
$price = $this->priceCalculator->format($product['price'], $product['tax_class_id']);
|
$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'],
|
||||||
$special = false;
|
$product['tax_class_id']
|
||||||
$specialPriceNumeric = null;
|
|
||||||
if ($product['special'] && (float) $product['special'] >= 0) {
|
|
||||||
$specialPriceNumeric = $this->tax->calculate(
|
|
||||||
$product['special'],
|
|
||||||
$product['tax_class_id'],
|
|
||||||
$this->settings->config()->getStore()->isOcConfigTax(),
|
|
||||||
);
|
);
|
||||||
$special = $this->currency->format(
|
|
||||||
$specialPriceNumeric,
|
|
||||||
$currency,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (! empty($productsImagesMap[$product['product_id']])) {
|
$special = false;
|
||||||
$allImages = array_merge($allImages, $productsImagesMap[$product['product_id']]);
|
$specialPriceNumeric = null;
|
||||||
}
|
if ($product['special'] && (float) $product['special'] >= 0) {
|
||||||
|
$specialPriceNumeric = $this->tax->calculate(
|
||||||
|
$product['special'],
|
||||||
|
$product['tax_class_id'],
|
||||||
|
$this->settings->config()->getStore()->isOcConfigTax(),
|
||||||
|
);
|
||||||
|
$special = $this->currency->format(
|
||||||
|
$specialPriceNumeric,
|
||||||
|
$currency,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return [
|
if (! empty($productsImagesMap[$product['product_id']])) {
|
||||||
'id' => (int) $product['product_id'],
|
$allImages = array_merge($allImages, $productsImagesMap[$product['product_id']]);
|
||||||
'product_quantity' => (int) $product['product_quantity'],
|
}
|
||||||
'name' => Str::htmlEntityEncode($product['product_name']),
|
|
||||||
'price' => $price,
|
return [
|
||||||
'special' => $special,
|
'id' => (int) $product['product_id'],
|
||||||
'image' => $image,
|
'product_quantity' => (int) $product['product_quantity'],
|
||||||
'images' => $allImages,
|
'name' => Str::htmlEntityEncode($product['product_name']),
|
||||||
'special_numeric' => $specialPriceNumeric,
|
'price' => $price,
|
||||||
'price_numeric' => $priceNumeric,
|
'special' => $special,
|
||||||
'final_price_numeric' => $specialPriceNumeric ?: $priceNumeric,
|
'image' => $image,
|
||||||
'manufacturer_name' => $product['manufacturer_name'],
|
'images' => $allImages,
|
||||||
'category_name' => $product['category_name'],
|
'special_numeric' => $specialPriceNumeric,
|
||||||
];
|
'price_numeric' => $priceNumeric,
|
||||||
}, $products),
|
'final_price_numeric' => $specialPriceNumeric ?: $priceNumeric,
|
||||||
|
'manufacturer_name' => $product['manufacturer_name'],
|
||||||
|
'category_name' => $product['category_name'],
|
||||||
|
];
|
||||||
|
},
|
||||||
|
$products
|
||||||
|
),
|
||||||
|
|
||||||
'meta' => [
|
'meta' => [
|
||||||
'currentCategoryName' => $categoryName,
|
'currentCategoryName' => $categoryName,
|
||||||
|
|||||||
@@ -25,7 +25,6 @@ return [
|
|||||||
'health' => [HealthCheckHandler::class, 'handle'],
|
'health' => [HealthCheckHandler::class, 'handle'],
|
||||||
'ingest' => [TelemetryHandler::class, 'ingest'],
|
'ingest' => [TelemetryHandler::class, 'ingest'],
|
||||||
'heartbeat' => [TelemetryHandler::class, 'heartbeat'],
|
'heartbeat' => [TelemetryHandler::class, 'heartbeat'],
|
||||||
'manifest' => [SettingsHandler::class, 'manifest'],
|
|
||||||
'processBlock' => [BlocksHandler::class, 'processBlock'],
|
'processBlock' => [BlocksHandler::class, 'processBlock'],
|
||||||
'product_show' => [ProductsHandler::class, 'show'],
|
'product_show' => [ProductsHandler::class, 'show'],
|
||||||
'products' => [ProductsHandler::class, 'index'],
|
'products' => [ProductsHandler::class, 'index'],
|
||||||
|
|||||||
Reference in New Issue
Block a user