+

Делаем двухшаговую корзину с чекаутом в Тильде

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

Функционал и предназначение
Скрипт добавляет кнопки "Вернуться к покупкам" и "Оформить заказ", тем самым разделяя покупку на 2 шага:
  • Первый шаг — ознакомление с содержимым корзины
  • Второй шаг — само оформление и покупка товара
Скрипт будет полезен в корзинах с большим количеством полей с целью экономии пространства, упрощения пользовательского опыта и интерфейса.
Пользуйтесь на здоровье =)

Установка
  1. Добавить скрипт в T123
  2. Поставить лайк внизу страницы

$(document).ready(function(){
  $('.t706__cartwin-bottom').after('<div class="butwrap"><button class="cback t-submit" onclick="tcart__closeCart()" style="background-color:whitesmoke !important; color: black !important;margin-bottom:10px;'+$('.t706 .t-submit').attr('style')+'">Продолжить покупки</button><button class="ccheck t-submit" style="'+$('.t706 .t-submit').attr('style')+'">Оформить заказ</button><button class="ccart t-submit" style="padding: 0;text-align: left;">← в корзину</button></div>')
  
  $('.ccart, .t-form__inputsbox').hide()
  $('.t706__carticon, .ccart, [href="#order"]').on('click', function(){
    $('.ccart, .t-form__inputsbox').hide()
    $('.ccheck, .cback, .t706__cartwin-products, .t706__cartwin-bottom').show()
  })
  
  $('.ccheck, .ccheck').on('click', function(){
    $('.ccheck, .cback, .t706__cartwin-products, .t706__cartwin-bottom').hide()
    $('.ccart, .t-form__inputsbox').show()
  })
})
Made on
Tilda