Свой способ доставки в корзине Тильды: как устроен виджет Ozon изнутри

В корзине Тильды есть встроенные службы доставки — СДЭК, Почта России, Яндекс Доставка и другие, — но Ozon среди них нет. Есть ещё вариант «свои пункты выдачи», но пункты в нём вводятся вручную по городам с координатами: для десятков тысяч пунктов Ozon это не подходит, а цену и заказ в Ozon такой вариант всё равно не даст. Подробнее — в статье службы доставки в Тильде.

Поэтому доставка Ozon состоит из двух частей:

• виджет — скрипт в «HTML-коде для вставки внутрь head», который работает в браузере покупателя внутри штатной корзины;
• сервис — сервер, где хранятся ключи Ozon и справочник пунктов, считается цена и создаются отправления после оплаты.

Виджет корзину не заменяет: итог, оплату, письма и заявки по-прежнему делает Тильда.

В простом режиме поле «Доставка» блока ST100 — это обычные радиокнопки. У каждой значение вида «Название = цена», а цена дополнительно хранится в атрибуте, из которого Тильда берёт число для итога.

Вариант «Ozon — пункт выдачи» создаёт владелец магазина в настройках блока, а виджет находит его по началу названия. Свою радиокнопку виджет намеренно не добавляет: сервер Тильды не знал бы о таком варианте, а скрипты корзины не повесили бы на неё свои обработчики. С вариантом, созданным в настройках, Тильда работает как с любым своим.

Пока виджет не загрузился и сервис не подтвердил, что способ включён, вариант Ozon скрыт стилем из того же кода в head. Поэтому покупатель никогда не увидит Ozon, который не может работать.

Когда покупатель выбрал пункт и сервис вернул цену, виджет:

1. записывает цену в значение варианта и в атрибут цены;
2. вызывает штатную функцию пересчёта доставки корзины;
3. Тильда сама заново собирает объект доставки (название и цену) и перерисовывает итог: товары со скидками плюс доставка.

Это тот же путь, которым пользуются встроенные службы Тильды: они тоже пишут цену в атрибут варианта и вызывают ту же функцию. На живой корзине Тильды мы проверили, что цена из виджета попадает в доставку и в итог, а строку доставки и адрес пункта под ней Тильда рисует сама — и на компьютере, и на экране шириной 375 пикселей.

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

Обёртки сделаны так, чтобы не навредить корзине:

• исходная функция Тильды всегда вызывается первой и с теми же аргументами;
• ошибка внутри виджета перехватывается и не доходит до кода Тильды;
• есть защита от повторного входа, чтобы пересчёт не зациклился.

Вес и размеры посылки виджет берёт из данных товаров в корзине: у товара в Тильде есть вес в граммах и габариты из карточки. Если их нет, сервис подставит значения по умолчанию из настроек магазина.

Заблокировать кнопку оформления атрибутом disabled бесполезно: Тильда снимает блокировку при каждой перерисовке корзины. Зато клик по кнопке Тильда обрабатывает на уровне блока, а виджет слушает клик на уровне документа в фазе перехвата — то есть раньше. Нажатие Enter в форме Тильда превращает в такой же клик, поэтому он тоже проходит через проверку.

Если выбран вариант Ozon, виджет пропускает отправку формы только когда:

• выбран пункт выдачи;
• номер телефона российский;
• цена свежая и, если номер уже введён, посчитана по номеру покупателя.

Иначе отправка останавливается, а покупатель видит, что сделать: выбрать пункт, исправить номер или подождать пересчёта. Пустой телефон виджет оставляет штатной проверке обязательных полей Тильды. На живой корзине мы проверили, что перехват срабатывает раньше обработчика Тильды и лишних запросов к серверу форм не уходит.

Тильда отправляет на свой сервер все поля формы, включая скрытые, кроме отключённых и тех, чьё имя начинается с tildadelivery-. Отдельно уходят данные корзины: сумма, товары и доставка с названием и ценой, плюс ограниченный набор ключей доставки — номер, адрес и название пункта и другие.

Виджет пользуется обоими каналами:

• скрытые поля ozon_point_id, ozon_point_address, ozon_quote_id — номер пункта, адрес и номер расчёта цены;
• ключи пункта в данных доставки — их виджет дописывает прямо перед отправкой, так же как это делают встроенные службы;
• запасной путь: после успешной отправки формы Тильда сообщает номер заказа (это событие описано в справке Тильды), и виджет передаёт сервису связку «номер заказа — расчёт». Если скрытые поля по какой-то причине не дойдут, сервис всё равно поймёт, какой пункт и какую цену выбрал покупатель.

Браузер покупателя знает только публичный идентификатор магазина. Всё остальное — на сервере:

Подробнее о второй половине пути — в статье вебхук Тильды.

Главное правило: из-за Ozon или сервиса оформление заказа в Тильде не должно ломаться.

• Сервис недоступен — вариант Ozon остаётся скрытым, остальные способы доставки работают.
• Ozon не ответил — а так бывает примерно с одним запросом из 10–20, — виджет показывает понятное сообщение, покупатель может повторить или выбрать другой способ.
• Тильда изменила код корзины — виджет проверяет, что нужные функции и объекты на месте, и при сомнениях скрывает вариант, а не ломает корзину. Скрипты корзины Тильды обновляются часто, поэтому перед каждым выпуском виджета мы сверяем их с тем, на чём он проверен.
• Обновления виджета загружаются с сервера сервиса, поэтому переопубликовывать сайт ради них не нужно.

В коде корзины Тильды есть обычный, мобильный и полноэкранный режимы, а также двухэтапная корзина. При смене режима корзина собирается заново, поэтому виджет проверяет свои элементы при каждой перерисовке. Вариант Ozon и выбор пункта работают во всех режимах корзины.