Инструменты для интеграции
Помимо «голого» REST API, у OneCatalog есть готовые UI-инструменты, которые ускоряют интеграцию с вашим сайтом, CRM или 1С. Они доступны на отдельном поддомене tools.onecatalog.ru .
OneCatalog Picker
Picker — встраиваемый виджет для выбора товара из каталога OneCatalog. Открывается во всплывающем окне, пользователь ищет/фильтрует плитку, и при подтверждении выбора отдаёт в ваш сайт идентификатор товара (public_id) и базовые данные — название, изображение, бренд.
Когда пригодится
- Заполнение каталога интернет-магазина по «нашим» SKU без копирования вручную
- Подбор материалов в калькуляторе ремонта / CRM-карточке клиента
- Привязка позиций к заявкам у дилеров и B2B-партнёров
- Выбор плитки для 3D-визуализатора или конфигуратора
Демо
Открытое демо доступно по ссылке: tools.onecatalog.ru/index.html . Откройте в новой вкладке, чтобы поиграться с поиском, фильтрами и выбором.
Встраивание
Вариант 1. Открыть Picker в новой вкладке
Самый простой способ — без JS, как обычная ссылка с возвратом по postMessage или редиректом на ваш return_url:
<a
href="https://tools.onecatalog.ru/index.html?api_key=YOUR_KEY&return_url=https://yoursite.ru/picked"
target="_blank"
rel="noopener"
>
Выбрать товар из OneCatalog
</a>Вариант 2. Встроить как iframe
<iframe
src="https://tools.onecatalog.ru/index.html?api_key=YOUR_KEY&embed=1"
width="100%"
height="600"
style="border:0; border-radius:12px;"
loading="lazy"
></iframe>
<script>
// Picker сообщает о выборе через postMessage
window.addEventListener('message', (event) => {
if (event.origin !== 'https://tools.onecatalog.ru') return
if (event.data?.type === 'onecatalog:picked') {
const product = event.data.product
// product.public_id, product.menutitle, product.images_urls и т.д.
console.log('Выбран товар:', product)
}
})
</script>Вариант 3. Подключить готовый JS-сниппет
<script src="https://tools.onecatalog.ru/picker.js" defer></script>
<button id="pick-btn">Выбрать товар</button>
<script>
document.getElementById('pick-btn').addEventListener('click', () => {
// TODO: точное имя метода уточняется
OneCatalog.Picker.open({
apiKey: 'YOUR_KEY',
onSelect: (product) => {
console.log('Selected:', product.public_id, product.menutitle)
},
onClose: () => { /* ... */ },
})
})
</script>Возвращаемые поля товара
Picker возвращает урезанный объект ApiProduct — те же поля, что и GET /products/{id}/:
{
"public_id": "PRD-CRX-039",
"menutitle": { "ru": "Cersanit Calacatta", "en": "Cersanit Calacatta" },
"article": "CC-300",
"brand": { "id": 5, "menutitle": { "ru": "Cersanit" } },
"images_urls": {
"min": "https://cdn.onecatalog.ru/.../min.jpg",
"middle": "https://cdn.onecatalog.ru/.../middle.jpg",
"max": "https://cdn.onecatalog.ru/.../max.jpg"
}
}Полную карточку товара можно дозапросить уже через основной API по public_id.
Другие инструменты
Picker — первый, но не единственный инструмент на tools.onecatalog.ru. Туда же планируется добавить:
- Генератор feed-файла (YML / CSV) под Яндекс.Маркет и Wildberries
- Конвертер артикулов между производителями
- Builder для embed-витрин на JS
- Просмотр оригиналов изображений в максимальном разрешении
Если какой-то из этих инструментов вам нужен сейчас — напишите на hello@onecatalog.ru и мы подсветим приоритет в roadmap.