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

Плюсы для Вас:
  • оговоренный срок исполнения
  • честный отзыв о выполненной работе
  • надежность выполнения заказа
  • мотивация исполнителя на качество
Форма связи
Отправляя форму, вы даете согласие на обработку персональных данных.
Блог Андряшина Виктора

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

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

Сложность: 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