Создание нестандартных модификаций с помощью JavaScript API Tilda

#веб #тильда #хакинг #frontend

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

Ранее я уже упоминал, что сейчас часто работаю с Tilda, но больше не как с no-code конструктором сайтов, а как с набором готовых кубиков.

Под готовыми кубиками я подразумеваю не блоки «галерея GL21», «текст в раскрывающихся карточках TX16N» и т.д. — эти блоки часто модифицируют дизайнеры визуально с помощью CSS.

Я говорю про блоки, которые являются JavaScript API Tilda, которое открыто, но не документировано. Например, функции вроде:

Все это части большого набора функций, которые Tilda использует под капотом в своих готовых блоках и которые доступны на любой странице.

В своем последнем проекте, мне нужно было сделать кнопку «Купить в 1 клик». Обычно эта кнопка открывает заявку для ввода имени и телефона.

Однако стояла задача связать заявку из этой формы с товаром в каталоге товаров Tilda.

Особенность здесь в том, что это хотелось сделать в обход экрана с корзиной...

и вот тут разгорелся мой хакерский азарт

Через консоль браузера я выяснил формат отправки заявок, что позволило модифицировать форму. Оказывается за отправку товара вместе с формой отвечает атрибут data-formcart="y".

Информацию об этом я узнал из исходников Tilda, которые не сильно обфусцированы, а потому достаточно легко читаются после форматирования кода.

Далее с помощью доступного JavaScript API Tilda можно подключить к форме информацию о товаре и способе оплаты. Тем самым при отправке формы Tilda по сути создаст новый заказ и свяжет его с товаром, все это в обход стандартного интерфейса корзины. В итоге программно это выглядит вот так:

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

Кстати, под хакингом здесь я подразумеваю не взлом чужих компьютеров, а изначальный смысл данного термина: что-то вроде «увлечение изучением внутренних деталей компьютерных систем».

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