Редизайн и интеграция

Сделали редизайн магазина стоматологических товаров по макетам из Figma. Подключили amoCRM для приема заявок с файлами и автоматической синхронизации скидок клиентов.

Краткая информация

  • Проект DentalStuff.ru
  • Платформа InSales
  • Макеты 15 экранов Figma
  • Интеграции amoCRM API
  • Хостинг Timeweb с SSL

Что нужно было сделать

Клиент принес готовый дизайн из Figma и попросил сделать редизайн. Плюс нужна была интеграция с amoCRM: формы для заявок и синхронизация скидок между системами.

Переезд на другую платформу не рассматривался — все делали на текущем InSales. В макете было 15 экранов: главная, каталог, карточка товара, страницы контента.

Новая тема по макетам

Сверстали адаптивный сайт. Для каждого экрана два варианта изображений — для телефонов и для десктопа.

  • Промо-слайдер — можно загрузить мобильную и десктопную версию картинки, настроить кнопку перехода.
  • Меню с иконками — подтягивает первое изображение из товара категории, есть кнопка "Ещё товары".
  • Категории на главной — виджет, где админ может создать блок с картинкой, заголовком и ссылкой.
  • Баннеры категорий — настроили доп. поля для мобильных баннеров, десктопные загружаются через стандартное изображение.
  • Сопутствующие и похожие товары — выводятся плиткой во вкладках.
  • Статус наличия — показывает "В наличии" или "Мало" в зависимости от порога, который можно настроить в категории.
  • Единый раздел контента — блог, события и новости объединили в один раздел с фильтром по категориям.

Форма с загрузкой файла

Сделали pop-up форму, где можно загрузить фото и оставить контакты. Форма отправляет данные в amoCRM и создает там лид.

Как это работает

  • Написали скрипт для загрузки файла
  • Настроили авторизацию через API amoCRM
  • Форма создает лид с именем и телефоном
  • Файл прикрепляется к лиду автоматически
  • Если что-то пошло не так — повторная попытка и запись в лог

Клиенты могут загрузить фото для подбора стоматологических товаров или поиска аналога. Удобно когда не знаешь точное название.

Синхронизация скидок

Когда клиент оформляет заказ, InSales отправляет webhook. Скрипт получает размер скидки из InSales и сравнивает с той, что в amoCRM.

Если скидка в InSales выше — обновляем в amoCRM. Так накопительная скидка всегда актуальная в обеих системах.

Добавили защиту от сбоев: если запрос не прошел — пытаемся еще раз. Все операции записываются в логи.

Что использовали

  • Платформа: InSales
  • API: InSales API + amoCRM API
  • Бэкенд: PHP
  • Хостинг: Timeweb с SSL-сертификатом
  • Шаблоны: Liquid + внешние обработчики

Чем можем помочь

Делаем редизайн по вашим макетам из Figma, разрабатываем темы с нуля для InSales. Настраиваем интеграции с CRM, складскими системами, маркетинговыми сервисами. Напишите нам — обсудим вашу задачу и найдем решение.

Теги

InSales Figma amoCRM API Webhook API интеграция Адаптивная верстка