Точки встраивания JS-модулей

JS-модули могут встраиваться в выделенные для этого точки интерфейса системы, добавляя свои элементы с дополнительной функциональностью.

Ниже указаны страницы системы, в которых доступны точки встраивания. Кликая по страницам, вы можете увидеть точки встраивания на этих страницах и доступные объекты с необходимыми данными.

В разных точках доступен разный набор данных. Данные реактивные, т.е. изменения применяются ко входным объектам при их изменении в интерфейсе (в частности в формах, например, форме заказа, форме клиента и т.п.). Некоторые поля мутабельные, то есть их можно изменять в JS-приложении и эти изменения применятся к форме. Такие поля в справочнике отмечены как readonly: false.

Для получения объекта из контекста и полей из объекта, используйте функции из @retailcrm/embed-ui/index.d.ts, например:

import {
    useOrderCardContext,
    useSettingsContext,
    useField,
} from '@retailcrm/embed-ui'

const order = useOrderCardContext()
const address = useField(order, 'delivery.address')

const settings = useSettingsContext()
const locale = useField(settings, 'system.locale')

Карта target-ов

По ссылке можно визуально посмотреть, в каким местах располагаются target-ы, что представлены в справочнике.

Карта target-ов карточки заказа

Справочник target-ов и их context-ов

ID	Описание
	Страница клиента
	Страница с формой создания/редактирования заказа
	Страница с формой создания/редактирования заказа в чатах

Таргеты	Расположение	Коды пользовательских контекстов
`customer/card:phone` Виджет для элемента списка телефонов клиента	Сразу после номера телефона в списке	`customer`
`customer/card:communications.after` Виджет для дополнения секции коммуникаций в левой колонке страницы клиента.	Сразу под краткой сводкой, в секции коммуникаций	`customer`
`customer/card:inWork.before` Виджет для элемента обращений	В начале блока "В работе" в карточке клиента	`customer`
`customer/card:inWork.after` Виджет для элемента обращений	В конце блока "В работе" в карточке клиента	`customer`

Таргеты	Расположение	Коды пользовательских контекстов
`order/card:common.before` Виджет для секции с основными данными	Начало секции, над полями ввода	`order`
`order/card:common.after` Виджет для секции с основными данными	Конец секции, под полями ввода	`order`
`order/card:customer.before` Виджет для секции с данными клиента	Начало секции, над полями ввода	`order`
`order/card:customer.after` Виджет для секции с данными клиента	Конец секции, под полями ввода	`order`
`order/card:customer.email` Виджет для поля ввода email клиента	Сразу после поля ввода	`order`
`order/card:customer.phone` Виджет для поля ввода телефона клиента	Сразу после поля ввода	`order`
`order/card:list.before` Виджет для списка позиций заказа	Начало секции, над полями ввода	`order`
`order/card:list.after` Виджет для списка позиций заказа	Начало секции, под списком	`order`
`order/card:store.before` Виджет для секции с данными склада	Начало секции, над полями ввода	`order`
`order/card:dimensions.before` Виджет для секции с данными габаритов и веса	Начало секции, над полями ввода	`order`
`order/card:delivery.before` Виджет для секции с данными доставки	Начало секции, над полями ввода	`order`
`order/card:delivery.after` Виджет для секции с данными доставки	Конец секции, под полями ввода	`order`
`order/card:delivery.address` Виджет для поля ввода адреса доставки	Под полем ввода адреса	`order`
`order/card:payment.before` Виджет для секции с данными по оплате	Начало секции, над полями ввода	`order`
`order/card:comment.manager.before` Виджет для блока "Комментарии оператора"	Начало секции, над полем ввода	`order`

Таргеты	Расположение	Коды пользовательских контекстов
`order/mg:list.before` Виджет для блока "Состав заказа"	Начало секции, над списком товарных позиций	`order`
`order/mg:list.after` Виджет для блока "Состав заказа"	Конец секции, сразу после списка товарных позиций и до полей ввода скидки, выбора привилегии и т.п.	`order`
`order/mg:delivery.before` Виджет для блока "Доставка"	Начало секции, над полем ввода	`order`
`order/mg:delivery.after` Виджет для блока "Доставка"	Конец секции, под полями ввода	`order`
`order/mg:payment.before` Виджет для блока "Оплата"	Начало секции, над полем ввода	`order`
`order/mg:payment.after` Виджет для блока "Оплата"	Конец секции, после списка оплат, контролов и пользовательских полей	`order`

Поле	Тип	Описание	Только для чтения
`id`	`number\|null`	ID клиента	`Да`
`externalId`	`string`	Внешний ID клиента	`Да`
`email`	`string`	Email клиента	`Да`
`phones`	`Array<string>`	Список телефонов клиента	`Да`

Использование

import { useContext } from '@retailcrm/embed-ui-v1-contexts/remote/customer/card'
const customer = useContext()

Поле	Тип	Описание	Только для чтения
`value`	`string`	Телефон клиента	`Да`
`index`	`number`	Порядковый номер телефона в списке	`Да`

Использование

import { useContext } from '@retailcrm/embed-ui-v1-contexts/remote/customer/card-phone'
const phone = useContext()

Поле	Тип	Описание	Только для чтения
`id`	`number\|null`	Идентификатор заказа в CRM	`Да`
`externalId`	`string\|null`	Идентификатор заказа во внешней системе источника	`Да`
`type`	`string\|null`	Код типа заказа	`Да`
`site`	`string\|null`	Код магазина, к которому относится заказ	`Да`
`number`	`string\|null`	Отображаемый номер заказа	`Да`
`country`	`string\|null`	Символьный код страны	`Да`
`currency`	`string`	Символьный код валюты	`Да`
`customer.id`	`number\|null`	ID клиента	`Да`
`customer.externalId`	`string\|null`	Внешний ID клиента	`Да`
`customer.type`	`"customer"\|"customer_corporate"`	Тип клиента	`Да`
`customer.lastName`	`string\|null`	Фамилия клиента	`Нет`
`customer.firstName`	`string\|null`	Имя клиента	`Нет`
`customer.patronymic`	`string\|null`	Отчество клиента	`Нет`
`customer.phone`	`string\|null`	Телефон клиента	`Нет`
`customer.email`	`string\|null`	Email клиента	`Нет`
`company.contragentType`	`"enterpreneur"\|"legal-entity"\|"individual"`	Тип юридического лица	`Да`
`company.certificateNumber`	`string\|null`	Номер свидетельства	`Нет`
`company.certificateDate`	`string\|null`	Дата свидетельства	`Нет`
`company.OGRN`	`string\|null`	ОГРН контрагента	`Нет`
`company.OGRNIP`	`string\|null`	ОГРНИП	`Нет`
`company.name`	`string\|null`	Название компании	`Нет`
`company.legalName`	`string\|null`	Полное наименование компании	`Нет`
`company.legalAddress`	`string\|null`	Адрес регистрации компании	`Нет`
`company.INN`	`string\|null`	ИНН контрагента	`Нет`
`company.KPP`	`string\|null`	КПП контрагента	`Нет`
`company.OKPO`	`string\|null`	ОКПО контрагента	`Нет`
`company.BIK`	`string\|null`	БИК контрагента	`Нет`
`company.bank`	`string\|null`	Банк контрагента	`Нет`
`company.bankAddress`	`string\|null`	Адрес банка контрагента	`Нет`
`company.corrAccount`	`string\|null`	Корреспондентский счет контрагента	`Нет`
`company.bankAccount`	`string\|null`	Расчетный счет контрагента	`Нет`
`items`	`Array<>`	Список товарных позиций заказа	`Да`
`delivery.address`	`string\|null`	Адрес доставки	`Нет`
`discount.amount`	`number`	Размер одноразовой скидки в валюте заказа	`Нет`
`discount.percent`	`number`	Процент одноразовой скидки	`Нет`
`discount.total`	`number`	Общая скидка по заказу	`Да`
`status`	`string`	Статус заказа	`Да`

Использование

import { useContext } from '@retailcrm/embed-ui-v1-contexts/remote/order/card'
const order = useContext()

Поле	Тип	Описание	Только для чтения
`changePriceTypeByPriority`	`boolean`	Изменять тип цены для товара в заказе, при изменении количества товара	`Да`
`changePriceTypeIfUnavailable`	`boolean`	Изменять тип цены для товара в заказе, при изменении количества товара	`Да`
`defaultUnit`	`string\|null`	Единица измерения количества по-умолчанию	`Да`
`duplicatesAllowed`	`boolean`	Возможность добавлять в заказ одинаковые торговые предложения как разные позиции	`Да`
`quantityIsFractional`	`boolean`	Целое или дробное количество товара	`Да`
`priceEditable`	`boolean`	Возможность редактировать цену товарных позиций	`Да`
`productsRemoveAllowed`	`boolean`	Возможность удалять товарные позиции из заказа	`Да`
`productsMarkingEnabled`	`boolean`	Возможность работы с маркированными товарами	`Да`
`propertiesToShow.additional`	`Array<string>`	Дополнительные поля товаров, выводимые в списке товарных позиций	`Да`
`propertiesToShow.base`	`Array<string>`	Базовые поля товаров, выводимые в списке товарных позиций	`Да`
`purchasePriceEditable`	`boolean`	Возможность редактирования закупочных цен в списке товарных позиций	`Да`
`purchasePriceVisible`	`boolean`	Отображать закупочные цены в списке товарных позиций	`Да`
`reserveDeliveryNoteEditable`	`boolean`	Возможность редактирования номера накладной при бронировании товаров	`Да`
`reserveInvoiceEditable`	`boolean`	Возможность редактирования номера счет-фактуры при бронировании товара	`Да`
`reserveShipmentDateEditable`	`boolean`	Возможность редактирования даты отгрузки при бронировании товара	`Да`
`reserveTelephonyEnabled`	`boolean`	Доступность телефонии при бронировании товара	`Да`
`showArticle`	`boolean`	Отображать артикул	`Да`
`showPriceTypes`	`boolean`	Работа с типами цен	`Да`
`useStores`	`boolean`	Работа со складами	`Да`
`useReserve`	`boolean`	Работа с бронированием	`Да`

Использование

import { useContext } from '@retailcrm/embed-ui-v1-contexts/remote/order/card-settings'
const orderSettings = useContext()

Поле	Тип	Описание	Только для чтения
`image.workers`	`Array<string>`	Список host-ов image preview workers для построения URL уменьшенных или обрезанных изображений.	`Да`
`system.locale`	`"en-GB"\|"es-ES"\|"ru-RU"`	Текущая локаль системы	`Да`
`system.routing`	`RoutingData`	Данные для js-маршрутизатора symfony	`Да`

Использование

import { useContext } from '@retailcrm/embed-ui-v1-contexts/remote/settings'
const settings = useContext()

Поле	Тип	Описание	Только для чтения
`id`	`number\|null`	ID пользователя	`Да`
`email`	`string`	Email пользователя	`Да`
`firstName`	`string\|null`	Имя пользователя	`Да`
`lastName`	`string\|null`	Фамилия пользователя	`Да`
`patronymic`	`string\|null`	Отчество пользователя	`Да`
`photo`	`string\|null`	Фото пользователя	`Да`
`groups`	`Array<string>`	Символьные коды групп, в которых состоит пользователь	`Да`
`permissions`	`Array<string>`	Символьные коды доступных пользователю разрешений	`Да`
`isAdmin`	`boolean`	Указывает, имеет ли пользователь права администратора	`Да`
`isManager`	`boolean`	Указывает, имеет ли пользователь права менеджера	`Да`

Использование

import { useContext } from '@retailcrm/embed-ui-v1-contexts/remote/user/current'
const user = useContext()

Действие	Аргументы	Возвращает
`createItem` Создает и добавляет новую товарную позицию в заказ	`input`:	`Promise<number>`
`changeItemPrice` Изменяет значение цены товарной позиции	`index`: `number` `amount`: `number`	`Promise<void>`
`changeItemPriceType` Изменяет значение типа цены товарной позиции, изменяет цену, если новый тип цены не пуст	`index`: `number` `code`: `string\|null`	`Promise<void>`
`changeItemDiscount` Изменяет значение скидки товарной позиции	`index`: `number` `discount`: `{ amount: number\|undefined, percent: number\|undefined }`	`Promise<void>`
`changeItemQuantity` Изменяет количество товарной позиции	`index`: `number` `quantity`: `number`	`Promise<void>`
`changeItemStatus` Изменяет статус товарной позиции по указанному идентификатору	`index`: `number` `statusCode`: `string`	`Promise<void>`
`removeItem` Удаляет товарную позицию из заказа	`index`: `number`	`Promise<void>`

Поле	Тип	Описание
`productId`	`number`	Идентификатор товара или услуги
`offerId`	`number`	Идентификатор торгового предложения
`priceAmount`	`number`	Значение цены в валюте заказа
`priceTypeCode`	`string`	Символьный код типа цены
`quantity`	`number`	Количество товарной позиции

Поле	Тип	Описание
`L`	`number\|null`	Длина
`W`	`number\|null`	Ширина
`H`	`number\|null`	Высота

Поле	Тип	Описание
`type`	`"bonus_charge"\|"loyalty_event"\|"loyalty_level"\|"manual_order"\|"manual_product"\|"personal"\|"round"`	Тип скидки
`amount`	`number`	Размер скидки

Поле	Тип	Описание
`amount`	`number`	Количество
`currency`	`string`	Символьный код валюты

Поле	Тип	Описание
`id`	`number`	Идентификатор
`name`	`string`	Наименование
`image`	`string\|null`	URL изображения
`dimensions`		Размеры товара L - длина, W - ширина, H - высота
`weight`	`\|null`	Вес
`article`	`string\|null`	Артикул
`barcode`	`string\|null`	Штрих-код
`properties`	`Array<>`	Массив пользовательских свойств
`unit`	`string\|null`	Единица измерения количества, если не указана (null), будет указано "шт."
`purchasePrice`	`\|null`	Закупочная цена, значение + валюта

Поле	Тип	Описание
`id`	`number\|null`	Идентификатор
`index`	`number`	Временный идентификатор на время редактирования заказа
`type`	`"PRODUCT"\|"SERVICE"`	Тип товарной позиции - товар или услуга
`product`	`\|null`	Выбранный товар или услуга
`offer`	`\|null`	Торговое предложение для выбранного товара или услуги
`properties`	`Array<>`	Массив пользовательских свойств
`quantity`	`number`	Количество товарной позиции
`purchasePrice`	`\|null`	Закупочная цена, значение + валюта
`initialPrice`	`\|null`	Цена товара/SKU (в валюте объекта)
`priceType`	`\|null`	Тип цены
`bonusesChargeTotal`	`number`	Количество списанных бонусов
`bonusesCreditTotal`	`number`	Количество начисленных бонусов
`discounts`	`Array<>`	Массив скидок, примененных к товарной позиции
`discountTotal`	`number`	Итоговая денежная скидка на единицу товара c учетом всех скидок на товар и заказ (в валюте объекта)
`vatRate`	"none"\|number \| `${number}`	Ставка НДС
`vatSum`	`number`	Сумма НДС
`comment`	`string`	Комментарий
`status`	`\|null`	Статус

Поле	Тип	Описание
`id`	`number`	Идентификатор
`code`	`string`	Символьный код
`name`	`string`	Наименование
`isCancel`	`boolean`	Отменяет ли статус товарную позицию

Поле	Тип	Описание
`id`	`number`	Идентификатор
`code`	`string`	Символьный код
`name`	`string`	Наименование
`title`	`string`	Заголовок
`default`	`boolean`	Является ли тип типом цены по-умолчанию
`currency`	`string`	Символьный код валюты (USD/EUR/...)

Поле	Тип	Описание
`id`	`number`	Идентификатор
`type`	`"PRODUCT"\|"SERVICE"`	Тип - товар или услуга
`name`	`string`	Наименование
`image`	`string\|null`	URL изображения
`article`	`string\|null`	Артикул
`manufacturer`	`string\|null`	Наименование производителя
`markable`	`boolean`	Необходимость маркировки
`groups`	`Array<>`	Группы, в которые входит данный товар или услуга
`unit`	`string\|null`	Единица измерения количества, если не указана (null), будет указано "шт."
`url`	`string\|null`	Ссылка на страницу товара/услуги в магазине

Поле	Тип	Описание
`code`	`string`	Символьный код
`name`	`string`	Наименование
`value`	`string`	Значение

Поле	Тип	Описание
`value`	`number`	Значение веса
`unit`	`'grams'\|'kilograms'\|'tons'`	Единица измерения

Благодарим за отзыв.

Была ли статья полезна?

Нет

Да

Предыдущая статья

Локальная разработка и тестирование JS-модулей в песочнице

Локальный запуск страниц и виджетов JS-модулей RetailCRM в v1-sandbox, настройка контекста и тесты с Vitest и Playwright.

Следующая статья

Создание собственных страниц JS-модулей

Собственные страницы JS-модулей позволяют открыть полноценный экран внутри CRM, добавить пункт меню и объединить страницы с target-виджетами.

Скопировать ссылку на статью Скопировано Точки встраивания JS-модулей Скопировать ссылку на статью Скопировано

Карта target-ов

Справочник target-ов и их context-ов

Точки встраивания JS-модулей