feat: add product interaction mode selector with three scenarios

- Add ItemToggleButton component for 3-way toggle in admin panel
- Add product_interaction_mode setting with options: order, manager, browser
- Add manager_username setting for Telegram manager contact
- Remove store_enabled setting, replaced with product_interaction_mode
- Create migration to automatically migrate store_enabled to product_interaction_mode
- Update Product.vue to handle all three interaction modes
- Update Dock.vue to show cart button only when product_interaction_mode is 'order'
- Rename 'Магазин' tab to 'Витрина' in admin panel
- Remove 'Разрешить покупки' option (now controlled via product_interaction_mode)
- Set default product_interaction_mode to 'browser'
- Update StoreDTO to remove enableStore field
- Update SettingsHandler to return product_interaction_mode instead of store_enabled
This commit is contained in:
2025-12-25 18:02:38 +03:00
parent 22ddc3043d
commit ecf4df363d
13 changed files with 228 additions and 29 deletions

View File

@@ -15,7 +15,7 @@
</li>
<li :class="{active: route.name === 'store'}">
<RouterLink :to="{name: 'store'}">Магазин</RouterLink>
<RouterLink :to="{name: 'store'}">Витрина</RouterLink>
</li>
<li :class="{active: route.name === 'texts'}">

View File

@@ -0,0 +1,51 @@
<template>
<SettingsItem :label="label">
<template #default>
<SelectButton
:modelValue="model"
:options="options"
optionLabel="label"
optionValue="value"
:allowEmpty="false"
@update:modelValue="updateValue"
/>
</template>
<template #help>
<slot/>
</template>
</SettingsItem>
</template>
<script setup>
import {computed} from "vue";
import SettingsItem from "@/components/SettingsItem.vue";
import SelectButton from "primevue/selectbutton";
const model = defineModel();
const props = defineProps({
items: {
type: Object,
default: {},
},
label: {
type: String,
default: '',
},
});
const options = computed(() => {
return Object.entries(props.items).map(([value, label]) => ({
value,
label,
}));
});
function updateValue(newValue) {
model.value = newValue;
}
</script>
<style scoped>
</style>

View File

@@ -36,10 +36,11 @@ export const useSettingsStore = defineStore('settings', {
},
store: {
enable_store: true,
feature_coupons: true,
feature_vouchers: true,
show_category_products_button: true,
product_interaction_mode: 'browser',
manager_username: null,
},
orders: {

View File

@@ -1,11 +1,22 @@
<template>
<ItemBool label="Разрешить покупки" v-model="settings.items.store.enable_store">
<p>Если опция <strong>включена</strong> пользователи смогут оформлять
заказы прямо в Telegram-магазине. <br>
Если <strong>выключена</strong> оформление заказов будет недоступно. Вместо кнопки «Добавить
в корзину» пользователи увидят кнопку «Перейти к товару», которая откроет страницу товара на
вашем сайте. В этом режиме Telecart работает как каталог.</p>
</ItemBool>
<ItemToggleButton
label="Сценарий взаимодействия с товаром"
v-model="settings.items.store.product_interaction_mode"
:items="productInteractionOptions"
>
<p>Выберите, что будет происходить при нажатии на кнопку товара:
<br><strong>Создание заявки / заказа</strong> Пользователи смогут добавить товар и оформить заявку на покупку прямо в Telegram. Заказ фиксируется в OpenCart, а дальнейшая работа с клиентом происходит вручную.
<br><strong>Кнопка связи с менеджером</strong> пользователи увидят кнопку для связи с менеджером в Telegram. Менеджера можно указать в поле "Username менеджера" ниже.
<br><strong>Открытие товара на сайте</strong> кнопка откроет страницу товара на основном сайте OpenCart во внешнем браузере.</p>
</ItemToggleButton>
<ItemInput
label="Username менеджера"
v-model="settings.items.store.manager_username"
placeholder="@username"
>
<p>Укажите username (например, @username) для связи с менеджером. Это может быть личный аккаунт или группа, куда покупатели могут писать. Используется только при выборе режима "Кнопка связи с менеджером".</p>
</ItemInput>
<ItemBool label="Промокоды" v-model="settings.items.store.feature_coupons">
<p>
@@ -31,6 +42,8 @@
import {useSettingsStore} from "@/stores/settings.js";
import ItemBool from "@/components/Settings/ItemBool.vue";
import ItemSelect from "@/components/Settings/ItemSelect.vue";
import ItemInput from "@/components/Settings/ItemInput.vue";
import ItemToggleButton from "@/components/Settings/ItemToggleButton.vue";
import ItemProductsSelect from "@/components/Settings/ItemProductsSelect.vue";
import ItemCategoriesSelect from "@/components/Settings/ItemCategoriesSelect.vue";
@@ -42,5 +55,11 @@ const mainpage_categories_options = {
featured: 'Избранные категории (задать в поле ниже)',
};
const productInteractionOptions = {
order: 'Создание заявки / заказа',
manager: 'Кнопка связи с менеджером',
browser: 'Открытие товара на сайте',
};
const userToken = window.TeleCart.user_token;
</script>