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 @@ + + +