И вот еще одна из интересных и неожиданных задач с которой пришлось столкнутся.
Существует сайт на Тильда. На странице есть корзина. И форма оплаты с промокодом.
Ничего не предвещало, как говорится. Но вот один из промокодов дает 100% скидку на продукт. Но как оказалось, Тильда не совсем корректно ведет себя в таких случаях и после применения промокода с 100% скидкой продолжает перенаправлять клиента на форму оплаты с суммой 0.
Соответственно нужно было что-то придумать. Если применяется промокод и сумма платежа равна нулю, нужно сразу перенаправить пользователя на страницу благодарности. Если промокод не дает 100% скидки или пользователь и вовсе без промокода покупает, то необходимо перенаправить клиента на страницу с оплатой.
Реализация в лоб
Первое, что пришло в голову, это использовать отдельную кнопку для клиентов с промокодом. Однако глобально на погоду это не влияет, нужно все равно писать код. И все равно заказ который оформляется через корзину будет перенаправляется на страницу оплаты даже с суммой 0. Точно так же нет смысла создавать дубликаты страниц, так как в конечном итоге логика останется прежней.
Вмешиваемся в работу корзины Тильда
Новая идея заключалась в том, что бы попробовать вмешаться в работу корзины. Да и терять по сути было нечего, понятно, что данные условно бесплатных заказов и так и так теряются и не доходят до Тильды, а это с одной стороны развязывает руки в плане разнопланового вмешательства в корзину, с другой стороны было необходимо реализовывать какое-то внешнее хранилище данных с этой формы. В качестве внешнего хранилища был выбран GetCourse, не по тому, что это единственное возможное хранилище, а просто по тому, что у заказчика он был. Если возможности сохранять данные на GetCourse нет, то абсолютно не проблема организовать такое хранилище на базе Google Sheets и управлять всем с использованием Google Apps Script.
Первым делом было необходимо понять, как работать с промокодом. Для этого изначально я решил исследовать страницу Тильды на предмет чего-то связанного с промокодом, но внезапно наткнулся на некий обобщенный вывод информации о сумме покупки после применения промокода. Этот блок не появляется, если промокод не применен, но активен после активации промокода.
На текущем этапе задача свелась к поиску спана с классом t706__cartwin-totalamount, если этот класс появлялся в HTML-структуре страницы далее необходимо было отследить значение указанное в этом спане. Когда и если это значение становилось равно нулю можно выполнять дополнительные функции. В случае, если пользователь промокод не применял, то скрипт соответственно никак не реагирует, позволяя Тильде перенаправит пользователя на страницу оплаты. Но если значение становится равным нулю, скрипт собирает сведения о UTM-метках, считывает значение пользовательских полей (имя, почта, номер тлф) и отправляет эту информацию другому скрипту, который передает полученную информацию в внешнее хранилище.
Остается только каким-то образом заблокировать конструктору Тильда перенаправить пользователя на страницу оплаты. Так как независимо от наличия промокода или суммы оплаты потенциальный клиент в любом из возможных сценариев будет вынужден нажать на кнопку «Оформить заказ», то следственно можно было бы попробовать переназначить обработчик нажатия кнопки. Вместо штатного события onSubmit которое срабатывает при нажатии на кнопку и передает данные формы в Tilda и перенаправляет пользователя на страницу оплаты, я решил использовать событие onClick со своим обработчиком. Этот обработчик при срабатывание собирает и передает данные, а так же делает перенаправление пользователя сразу на страницу благодарности.
|
1 2 3 4 5 |
if (document.getElementsByClassName('t706__cartwin-totalamount')[0].innerText === '0') { document.getElementsByClassName('t-form__submit')[0].addEventListener('click', function () { fetch(completteURL()); window.location.href = "https://domain.tld/thanks"; }); |
В строках кода выше и заключена вся хитрость. Просто в интервальном обработчике происходит проверка поля спана t706__cartwin-totalamount на равенство нулю, и если это так, то используя функцию addEventListener переназначим обработчик клика по кнопке. И здесь внутри уже нового обработчика вызываем функцию fetch в которой вызывается функция completteURL() которая собирает UTM-метки и пользовательские данные. Затем все эти данные передаются на внешнее хранилище.
Это и всё?
Основной целью статьи было описание одного из возможных методов, как можно вмешаться в работу Tilda и реализовать свою механику работы с заказом и промокодом. О внешних хранилищах, API GetCourse и прочем мы поговорим в будущих статьях.
А пока можно посмотреть, что вообще из этого получилось.
