Click to order
Cart
Total: 
Имя
Телефон
Payment method

Как добавить иконки к платёжным системам в корзине Tilda

Как выполнили данный пример:
1. Создали корзину
2. К корзине подключено 3 платёжные системы Наличные, ЯД, Банковские карты
3. Добавили скрипт на страницу

Скрипт вставляется в блок ДРУГОЕ►Т123

В скрипте прописали ссылки на иконки
https://clck.ru/EZdRC
https://clck.ru/EZdRP
https://clck.ru/EZdRa

<style>
/*Ширина иконок*/
 img.paycash { width: 80px;}
 img.payyamoney { width: 80px;}
 img.paycreditcard {width: 80px;}
/*Положение переключателей*/
.t-radio__wrapper-payment .t-radio__indicator {
    margin-top: -20px !important;
}
/*Стили блока с обводкой*/
.t-radio__wrapper-payment .t-radio__control{
    color:transparent;
    box-shadow: 0px 0px 2px 0px #ffda45 inset;
    border-radius: 30px;
    padding: 6px 0px 6px 30px;
    width: 94%;
    transition: all 0.7s cubic-bezier(0, 0, 0.8, 1.0);
}
/*Стили блока с обводкой при наведении*/
.t-radio__wrapper-payment .t-radio__control:hover{
    box-shadow: 0px 0px 17px 0px #ffda45 inset;
}
/*Стиль для надписи*/
span.paylabel {
    color: #222222;
    position: absolute;
    top: 14px;
    margin-left: 6px;
}
</style>

<script>
    $( document ).ready(function() {
//Добавляем иконки к нужным переключателям
   $('<img class="payicon paycash" src="https://clck.ru/EZdRC" imgfield="img"><span class="paylabel">Наличные</span>').insertAfter('.t-radio__wrapper-payment .t-radio__indicator:eq(0)');
   $('<img class="payicon payyamoney" src="https://clck.ru/EZdRP" imgfield="img"><span class="paylabel">Электронные деньги</span>').insertAfter('.t-radio__wrapper-payment .t-radio__indicator:eq(1)');
   $('<img class="payicon paycreditcard" src="https://clck.ru/EZdRa" imgfield="img"><span class="paylabel">Банковская карта</span>').insertAfter('.t-radio__wrapper-payment .t-radio__indicator:eq(2)');
});
</script>
Made on
Tilda