diff --git a/README.md b/README.md
index 82c1b3b..cc0a3c7 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,8 @@
UiScrollbar,
UiTag,
UiTransition,
- CrmYandexMap
+ CrmYandexMap,
+ CrmPlacement
```
Более подробно познакомиться с этими компонентами можно на [витрине](https://design.retailcrm.tech/omnica-vue3/index.html).
@@ -61,6 +62,13 @@
## API Ядра в карточке заказа
+```javascript
+api.getPlacement
+```
+Возвращает информацию о placement (места встраивания компонентов приложения в интерфейс CRM).
+Метод принимает 2 параметра - имя плейсмента и название скоупа.
+Возвращает массив объектов вида {id, context}, где id - идентификатор точки монтирования, context - специфическая информация для текущего placement.
+
```javascript
api.getCustomerEmail
```
@@ -104,6 +112,15 @@ api.parseDeliveryAddress
Стили должны быть модульными
+## Монтирование компонентов в интерфейсе хостового приложения
+Для монтирования компонентов используется компонент ```CrmPlacement```. В него следует обернуть компоненты приложения, которые должны быть смонтированы в конкретной точке хостового приложения.
+Компонент имеет обязательный входной параметр ```placementId``` - идентификатор точки монтирования.
+
+Для того, чтобы получить список доступных точек монтирования, нужно вызвать метод ```api.getPlacement(placementName, scopeName)```, который вернет массив объектов вида {id, context}, где
+id - идентификатор точки монтирования, context - объект с информацией, специфичной для данной точки.
+
+Например, для плеймента ```customer-phone```, контекст будет вида ```{ phone: string }```.
+
## В удаленном приложении нужно описать используемые компоненты
```typescript
const CrmYandexMap = defineRemoteComponent('CrmYandexMap', [
@@ -121,7 +138,6 @@ export { UiButton, UiModalWindow, CrmYandexMap }
```javascript
[{
entrypoint: 'extension-url',
- placement: 'delivery-address',
scope: 'order-card',
stylesheet: 'stylesheet-url',
uuid: '1'
@@ -174,7 +190,9 @@ make zip-archive
# Пример удаленного приложения на основе @omnicajs/vue-remote
-## Описание примера
+## Описание примеров
+
+### 1. Адрес доставки на карте
Пример представляет собой модальное окно с интерактивной картой от Яндекса. Маркер можно перетаскивать и тем самым изменять адрес.
Используется JavaScript API Яндекс Карт и Геокодер версии 3.0. При первоначальной отрисовке позиционирование маркера происходит
@@ -182,6 +200,10 @@ make zip-archive
ближайший адрес к текущим координатам. При нажатии кнопки "Выбрать", происходит заполнение или обновление адреса в поле
"Адрес".
+### 2. Кнопки перехода в мессенджеры
+
+Пример позволяет добавить рядом с номером телефона клиента на странице заказа и клиента кнопки перехода в мессенджеры по этому номеру.
+
## Запуск
### Начальное развертывание
@@ -210,12 +232,13 @@ make zip-archive
```javascript
extensionsInit([{
entrypoint: 'http://localhost:3000/extension/62aa8145-ed53-4862-b28f-f1bc6b36a3a3',
- placement: 'delivery-address',
- scope: 'order-card',
+ scope: ['order-card', 'customer-card'],
stylesheet: 'http://localhost:3000/extension/62aa8145-ed53-4862-b28f-f1bc6b36a3a3/stylesheet',
uuid: '1'
}])
```
-В секции "Отгрузка и доставка" под полем "Адрес" должна появиться кнопка "На карте". При клике на кнопку открывается модальное окно с картой.
+На странице заказа в секции "Отгрузка и доставка" под полем "Адрес" должна появиться кнопка "На карте". При клике на кнопку открывается модальное окно с картой.
Для работы карты нужен api ключ.
+
+Рядом с номером телефона клиента должны появиться кнопки перехода в мессенджеры.
diff --git a/src/components/index.ts b/src/components/index.ts
index 148ea20..68ea752 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,8 +16,11 @@ const CrmYandexMap = defineRemoteComponent('CrmYandexMap', [
'change': (address: string) => void,
})
+const CrmPlacement = defineRemoteComponent('CrmPlacement')
+
export {
UiButton,
UiModalWindow,
CrmYandexMap,
+ CrmPlacement,
}
diff --git a/src/extension.js b/src/extension.js
index ce821a5..21578e8 100644
--- a/src/extension.js
+++ b/src/extension.js
@@ -10,7 +10,7 @@ import {
createRemoteRenderer,
} from '@omnicajs/vue-remote/remote'
-import VExtension from '@/extension/VExtension.vue'
+import VApp from '@/extension/VApp.vue'
const endpoint = createEndpoint(fromInsideIframe())
@@ -21,6 +21,7 @@ const createApp = async (channel, component, props) => {
'UiModalWindow',
'UiModalWindowSurface',
'CrmYandexMap',
+ 'CrmPlacement',
],
})
@@ -36,12 +37,13 @@ const createApp = async (channel, component, props) => {
let onRelease = () => {}
endpoint.expose({
- async run (channel, api) {
+ async run (channel, api, scope) {
retain(channel)
retain(api)
- const app = await createApp(channel, VExtension, {
+ const app = await createApp(channel, VApp, {
api,
+ scope,
})
onRelease = () => {
diff --git a/src/extension/VExtension.vue b/src/extension/AddressExtension.vue
similarity index 100%
rename from src/extension/VExtension.vue
rename to src/extension/AddressExtension.vue
diff --git a/src/extension/CustomerPhoneExtension.vue b/src/extension/CustomerPhoneExtension.vue
new file mode 100644
index 0000000..c10f0d5
--- /dev/null
+++ b/src/extension/CustomerPhoneExtension.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
diff --git a/src/extension/VApp.vue b/src/extension/VApp.vue
new file mode 100644
index 0000000..3467bf9
--- /dev/null
+++ b/src/extension/VApp.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+
+
+