VIAN COMMUNITY FREE

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

Инструкции
Инструкция работает и актуальна. Она расскажет как создать страницу корзины на Тильде через отдельную страницу. Обращаю внимание что инструкция не легкая, необходимы специальные знания чтобы ей воспользоваться. Если у вас какие то проблемы, вы всегда можете написать мне.

Инструкция

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: flex;
    }
    .t706__orderform {
      max-width: 40%;
      width: 100%;
      margin-left: auto;
    }
    .products-fixed-list {
      position: sticky;
      align-self: flex-start;
      top: 20px;
      max-width: 50%;
      width: 100%;
    }
  }
  .t706__cartwin-close,
  .t706__carticon {
    display: none;
  }
  .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 updateCartInfo() {
        if(!hideMode) $('.cartcopy, .cartcopyprice').show();
        let chCounter = window.tcart?.total || 0;
        let chPrice = window.tcart?.prodamount || 0;
        
        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);
        };
        
        // Добавляем анимацию при изменении
        if(chCounter > 0) {
            $('.cartcopy').addClass('cartcopyanim');
            setTimeout(function(){ 
                $('.cartcopy').removeClass('cartcopyanim');
            }, 1000);
        }
    }
    
    // Первоначальное обновление
    setTimeout(updateCartInfo, 500);
    
    // Обновляем при изменении корзины
    $(document).on('tilda:cart:updated', updateCartInfo);
    
    // Альтернативный способ отслеживания изменений
    setInterval(updateCartInfo, 1000);
    
    // Открытие корзины по клику
    $('.cartcopy').click(function(e) {
        e.preventDefault();
        tcart__openCart();
    });
});
</script>

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

Подвал аналогично меню должен повторяться на всем сайте, для этого:
  • создайте новую страницу
  • назовите ее "Подвал" и задайте ссылку "footer"
  • добавьте блок с корзиной ST100 - настройте ее по своему усмотрению
  • перейдите в "Настройки сайта → Шапка и подвал" и назначите страницу подвала.

4. Включаем библиотеку jQuery

Обязательно включите библиотеку jQuery. Сделать это можно в настройках сайта. Вкладка "Еще". Просто поставьте галочку и сохраните настройки.

Готово! Все настроено и должно работать. Если вы столкнулись с проблемами то можете приобрести шаблоны для быстрой настройки этой модификации.

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

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

Данные шаблоны вы можете использовать в своих проектах. Активировать их вы сможете при создании новой страницы, в самом низу списка есть кнопка "Указать ID шаблона", нажимаете ее и вводите номер шаблона.
Чтобы приобрести шаблоны перейдите в Магазин или свяжитесь со мной по форме в контактах, стоимость 299 ₽. Есть так же вариант с поддержкой и помощью по установке данных шаблонов за 1999 ₽.

Спасибо что пользуетесь моими инструкциями и кодом! Буду рад вашим комментариям по д этой статей, для меня важно мнение каждого!
2023-01-10 18:58