Блог Андряшина Виктора

Корзина для Тильды на отдельной странице

Модификации
Корзина для Тильды на отдельной странице
Всё что вам нужно сделать это создать страницу с кодом который представлен ниже, добавить на неё корзину, и сделать ссылки к ней на всём сайте.

Сложность: 4 из 5

Инструкция:

Создали страницу на которой будет отображаться корзина, назовем её просто "Корзина", адрес зададим "basket".

Последовательность блоков на странице:
  • Меню сайта
  • Заголовок, чтобы люди понимали куда они попали.
  • И 2 блока "Т123", понадобятся для добавления кода на страницу.

Результат того что должно получится у вас.

Ниже представлены коды для добавления на страницу и в настройки сайта. 

  • КОД 1 вставить в блок Т123 на странице корзины, где будет находиться корзина с товарами.
  • Второй код нужен что бы скрыть иконку корзины на всём сайте, поэтому добавляем его в настройки сайта → Ещё → HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD "Редактировать код" и туда прописываем его.
  • Настройка меню: его нужно делать через Зероблок, чтобы создать новую иконку корзины. В примере шаблона есть готовое меню. Можете использовать шаблон, только ссылки поменяйте на свои.
+ Создали ZeroBlock
+ Добавили в него элемент Image с иконкой корзины и 2 элемента Text с цифрой 0 (для количества товара) и знаком = (для суммы заказа)
+ Задали класс для текста с кол-вом и для иконки корзины cartcopy_elem
+ Задали класс для текста с ценой cartprice_elem
+ Создали блок с корзиной ST100
+ Добавили КОД 3 на страницу, в блок Другое - Т123

КОД 1:
<style>
.t706__body_cartwinshowed {
height: auto;
min-height: auto;
overflow: auto;
}
.t706__cartwin {
display: block;
position: static;
background: #fff;
overflow: unset;
opacity: 1 !important;
}
.t706__cartwin-content {
position: relative;
max-width: 1200px;
height: 100%;
padding: 40px 20px;
margin: 0 auto;
background: #fff;
overflow: unset;
}
@media (min-width: 960px) {
.t706__cartwin-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 960px) {
.t706__orderform {
max-width: 40%;
width: 100%;
margin-left: auto;
}
}
.t706__cartwin-close,
.t706__carticon {
display: none;
}
@media (min-width: 960px) {
.products-fixed-list {
position: -webkit-sticky;
position: sticky;
-ms-flex-item-align: start;
align-self: flex-start;
top: 20px;
max-width: 50%;
width: 100%;
}
}
.t706__form-upper-text {
padding-top: 0;
}
</style>
<script>
$(document).ready(function() {
setTimeout(function() {
t_onFuncLoad('tcart__openCart', function() {
tcart__openCart();
});
}, 1000);
$('.t706__cartwin-top, .t706__cartwin-products, .t706__cartwin-bottom').wrapAll('<div class="products-fixed-list"></div>');
$('.t706__orderform').append($('.t706__form-bottom-text'));
$('.t706__orderform').prepend($('.t706__form-upper-text'));
});
</script>

КОД 2:
<style>
.t706__carticon {
display: none;
}
</style>

КОД 3:
<style>
.blkElem{pointer-events:none; }
.cartcopyanim {
-webkit-animation: t706__pulse-anim 0.6s;
animation: t706__pulse-anim 0.6s;}
.cartcopy_elem .tn-atom , .cartprice_elem .tn-atom {display:none}
.cartcopy{cursor:pointer}
.t706__carticon {display: none !important;}
</style><script>
$( document ).ready(function() {
let hideMode = false; //Скрыть-Показать пустую корзину - true-false
$('.cartcopy_elem .tn-atom').addClass('cartcopy');
$('.cartprice_elem .tn-atom').addClass('cartcopyprice');
function chkNum(){
if(!hideMode) $('.cartcopy, .cartcopyprice').show();
let chCounter = window.tcart.total;
let chPrice = window.tcart.prodamount;
if (chPrice==0){
$('div[data-elem-type="text"] .cartcopyprice').html('');
if(hideMode) {$('.cartcopy, .cartcopyprice').hide()
}else{$('.cartcopy, .cartcopyprice').show()};
}else{
$('div[data-elem-type="text"] .cartcopyprice').html(chPrice+' руб');
if(hideMode) $('.cartcopy, .cartcopyprice').show();
};
$('div[data-elem-type="text"] .cartcopy').html(chCounter);
if(chCounter==0){ $('.cartcopy').addClass('blkElem');
}else{ $('.cartcopy').removeClass('blkElem'); };
if(chCounter==''){$('div[data-elem-type="text"] .cartcopy').html(0);}; };
setTimeout(function(){chkNum();}, 500);
$(".t706").on('DOMSubtreeModified', ".t706__carticon-counter", function() {
setTimeout(function(){chkNum();}, 300);
$('div[data-elem-type="image"] .cartcopy').addClass('cartcopyanim');
setTimeout(function(){ $('.cartcopy').removeClass('cartcopyanim');}, 1000);});
$('.cartcopy').click(function(e){e.preventDefault();tcart__openCart();});
});
</script>


Пример готовой страницы вы можете взять из шаблона "20632499", водить его нужно в поле ID в самом низу при создании новой странице.

Инструкция сделана при помощи сайтов:
https://mo-ti.ru/zerocart
https://michailozdemir.dev/cart-as-page