Концепция продукта - rees46/convention GitHub Wiki

Наши клиенты делятся на три группы по уровню интеграции платформы:

1. Нужно готовое решение
2. Я не программист, но хочу управлять дизайном
3. Я все сделаю сам

В качестве примера используется сервис “блок товарных рекомендаций”.

Человек просто хочет блоки товарных рекомендаций. В дизайне он не разбирается. Программировать не умеет. Его единственная задача: установить блок рекомендаций на сайт, чтобы он работал.

Для такого уровня интеграции мы разработали DIV-блоки.

Вставляешь на сайт в нужное место такой код:

<div class="rees46-recommend" data-recommender-block="dynamic" data-recommender-code="19b230ea9de97f76e72c27e4cc47b54f"></div>

И дальше JS SDK сама находит все блоки и рисует их в стандартном нашем дизайне. Который не супер красивый, но, как минимум, аккуратный и решает задачу клиента.

Клиент имеет свое чувство прекрасного и его не устраивает наш стандартны дизайн. Он хочет привести оформление блока к своему стилю. Но он все ещё не программист, хоть и знает немного CSS.

Интеграция блока выполняется так же, как и в первом случае: вставка DIV-блока, который сам отрисовывается с помощью JS SDK.

Но в редакторе блока рекомендаций есть:

1. Возможность изменить layout конкретного блока рекомендаций: https://app.rees46.ru/shops/1464/product_recommendations/20271/template
2. Изменить оформление компонентов блока рекомендаций: https://app.rees46.ru/shops/1464/style - создать свою тему или поредактировать существующую. Как в базовом редакторе: https://app.rees46.ru/shops/1464/themes/3256032679463748242/edit , так и в виде CSS: https://app.rees46.ru/shops/1464/themes/1434743899980562978/edit

Как правило это большие компании, у которых свой UI-кит, сайт на реакте и они все делают сами.

Для них мы предоставляем JS SDK с методами получения данных: https://reference.api.rees46.com/?javascript#request-product-recommendations

Например:

r46("recommend", "1fd1b3495137bc3c9299816026acf36f", {item: 100500, exclude: [3, 14, 159, 26535], category: 146, search_query: "To be or not to be", limit: 15, brands: ["Alas", "poor", "Yorick"], categories: [1, 146, 100500]}, function(response) {
  // the functionality of rendering a block of product recommendations
}, function(error) {
  // when something went wrong
});

Программист клиента делает запрос, получает ответ, сам его обрабатывает и рисует дизайны в любом интересном ему формате, в том числе добавляя нужную ему функциональность. Как тут добавление в корзину и навешивание разных бейджиков на товар в зависимости от имеющихся в ответе свойств: https://www.technodom.kz/

Здесь все сложнее. По сути нет решений для “Нужно готовое решение” и “Я не программист, но хочу управлять дизайном”.

С одной стороны, что точно делать нельзя: давать возможность оформлять блоками товарных рекомендаций мобильных приложений из личного кабинета платформы. Совершенно точно дизайном блока должен управлять программист мобильного приложения в момент разработки этого приложения. Дизайн делается дизайн-отделом компании клиента, далее программист верстает это и отдает в прод.

С другой стороны, готовые виджеты блоков рекомендаций помогут программисту решить задачу быстрее. Поэтому далее описание о том, как должно быть для тех же трех уровней интеграции:

Мы даем готовый компонент блока рекомендаций. У него есть свойства, типа ID блока, входящие параметры (содержимое корзины, текущая категория и прочие поддерживаемые входящие параметры из документации) https://reference.api.rees46.com/?javascript#request-product-recommendations

Программист вставляет UI-компонент блока рекомендаций в нужное место в приложении и далее наша iOS SDK или Android SDK (далее RN SDK и Flutter SDK) находит этот блок, берет входящие данные, делает запрос к API и рисует красивый блок: с каруселью, слайдером, плашечками и все такое.

Вариант, похожий на первый, но еще можно задать структуру и оформление блока и карточки товара:

1. По структуре:
   • Скрыть или показать определенные компоненты блока (например заголовок) или карточки товара (например зачеркнутую цену или бейдж со скидкой)
2. По оформлению:
   • Задать цвет фона всего блока или карточки товара
   • Размер и цвет заголовка блока
   • Размеры, цвета и шрифты отдельных элементов карточки товара

Это то, что делал Павел для iOS SDK. Там огромное кол-во параметров.

Программист задает эти параметры для блока каждого блока рекомендаций, т.к. оформление может меняться на разных экранах: смотри пример в Яндекс.Маркете - похожие товары в карточке товара или популярные товары в категории.

Но если все блоки должны быть одинаковы, нужна какая-то возможность задать общее оформление для всех блоков или для части блока. Может быть какой-то общий конфиг оформления, который потом передается параметром в каждый блок.

Это то, как работает сейчас. У нас мобильные SDK сейчас просто обертки над API. Делают запросы, получают ответы и передают это все в коллбэки для последующей обработки программистом.