Инструкция работает и актуальна. Она расскажет как создать страницу корзины на Тильде через отдельную страницу. Обращаю внимание что инструкция не легкая, необходимы специальные знания чтобы ей воспользоваться. Если у вас какие то проблемы, вы всегда можете написать мне.
Инструкция
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;
}
.body {
overflow: auto !important;
}
</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>Готово! Все настроено и должно работать. Если вы столкнулись с проблемами то можете приобрести шаблоны для быстрой настройки этой модификации.
4. Включаем библиотеку jQuery
Обязательно включите библиотеку jQuery. Сделать это можно в настройках сайта. Вкладка "Еще". Просто поставьте галочку и сохраните настройки.
Если пропадает скрол
Бывает что при настройке данной модификации пропадает скрол на странице корзины. Код ниже решает эту проблема, добавьте его в CSS.
body {
overflow: auto !important;
}Шаблоны - Корзина, Меню и Подвал
Для удобства вы можете воспользоваться созданными шаблонами. Я создал 3 страницы которые вы можете скопировать в любой свой проект. Корзина, меню и подвал соответственно. Они помогут вам быстро включить страницу на отдельной странице, останется просто указать шапку и подвал в настройках сайта. Ну и допилить меню и подвал в дизайнерском стиле под ваши нужды, потому что у всех они разные. Знание "Zero Block" обязательно.
Данные шаблоны вы можете использовать в своих проектах. Активировать их вы сможете при создании новой страницы, в самом низу списка есть кнопка "Указать ID шаблона", нажимаете ее и вводите номер шаблона.
Данные шаблоны вы можете использовать в своих проектах. Активировать их вы сможете при создании новой страницы, в самом низу списка есть кнопка "Указать ID шаблона", нажимаете ее и вводите номер шаблона.
Чтобы приобрести шаблоны перейдите в Магазин или свяжитесь со мной по форме в контактах, стоимость 299 ₽. Есть так же вариант с поддержкой и помощью по установке данных шаблонов за 999 ₽.
Спасибо что пользуетесь моими инструкциями и кодом! Буду рад вашим комментариям по д этой статей, для меня важно мнение каждого!
