МЕНЮ
Я использую файлы cookie для обеспечения наилучшего взаимодействия с сайтом.
Хорошо!
VIAN COMMUNITY FREE

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

Модификации
Примеры сайтов для вдохновения:
ASKA - магазин одежды
Nheaven - магазин одежды
Астара - шашлычная в Казани
Art-Pin - магазин бижутерии 

Инструкция расскажет как создать страницу корзины на Тильде через отдельную страницу. Обращаю ваше внимание что при использовании инструкции необходимы умения пользоваться "Zero Block".

Инструкция


1 - Создаем страницу для корзины


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

Добавляем на нее следующие блоки:
  • Заголовок, чтобы люди понимали куда они попали.
  • Блок "Т123", и скопировали туда КОД 1 - это и будет будущая корзина.

КОД 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. Настраиваем меню


Ваше меню должно повторяться на всем сайте сразу. Для этого:

  • создайте новую страницу
  • назовите ее "Меню" и задайте ссылку "header"
  • добавьте "Zero Blok"
  • добавьте в него элемент "Image" или "shape" с иконкой корзины, прописав этому элементу ссылку "/basket"
  • добавьте элемент "Text" с цифрой "0" - для количества товара, задайте ему класс "cartcopy_elem".
  • добавьте элемент "Text" со знаком "=" -для суммы заказа, задайте ему класс "cartprice_elem" (при необходимости конечно)
  • добавьте КОД 2 в блок "Т123"
  • перейдите в "Настройки сайта → Шапка и подвал" и назначите страницу меню как шапку.

КОД 2
<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>


3. Настраиваем подвал


Подвал аналогично меню должен повторяться на всем сайте, для этого:

  • создайте новую страницу
  • назовите ее "Подвал" и задайте ссылку "footer"
  • добавьте на нее блок "Т123", с скопируйте туда КОД 3
  • добавьте блок с корзиной ST100
  • перейдите в "Настройки сайта → Шапка и подвал" и назначите страницу подвала.

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


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

Если вы выполнили все инструкции правильно значит у вас 100% получится реализовать корзину на отдельной странице. Но если вы столкнулись с проблемами тогда я предлагаю использовать мои готовые шаблоны.

Есть 3 страницы которые вы можете скопировать в любой свой проект. Корзина, меню и подвал соответственно. Они помогут вам быстро включить страницу на отдельной странице, останется просто указать шапку и подвал в настройках сайта. Ну и допилить меню и подвал в дизайнерском стиле под ваши нужды, потому что у всех они разные. Знание "Zero Block" обязательно.


Шаблоны страниц Корзины, Меню и Подвала


Данные шаблоны вы можете использовать в своих проектах, VIAN COMMUNITY PLUS дает вам полное право на это. Номера шаблонов вы сможете ввести при создании новой страницы, в самом низу списка есть кнопка "Указать ID шаблона", нажимаете ее и вводите номер шаблона.

Корзина - 30669254
Меню - 30669300
Подвал - 30669337

Шаблоны страниц Корзины, Меню и Подвала
Шаблоны страниц Корзины, Меню и Подвала

Спасибо что воспользовались моими шаблонами.