Главная
→
Модификации
→
Корзина на отдельной странице

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

Данная модификация добавляет возможность разместить корзину на отдельной странице сайта на тильде

Код 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.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    t_onFuncLoad('tcart__openCart', function() {
      tcart__openCart();
    });
  }, 1000);

  var cartTop = document.querySelector('.t706__cartwin-top');
  var cartProducts = document.querySelector('.t706__cartwin-products');
  var cartBottom = document.querySelector('.t706__cartwin-bottom');
  var productsFixedList = document.createElement('div');
  productsFixedList.classList.add('products-fixed-list');
  cartTop.parentNode.insertBefore(productsFixedList, cartTop);
  productsFixedList.appendChild(cartTop);
  productsFixedList.appendChild(cartProducts);
  productsFixedList.appendChild(cartBottom);

  var orderForm = document.querySelector('.t706__orderform');
  var formBottomText = document.querySelector('.t706__form-bottom-text');
  var formUpperText = document.querySelector('.t706__form-upper-text');
  orderForm.appendChild(formBottomText);
  orderForm.insertBefore(formUpperText, orderForm.firstChild);
});
</script>

Код 2 -- Иконка корзины

Скрипт для иконку корзины в меню, которая будет показывать количество и суммы добавленных товаров.

добавьте "Zero Blok"
добавьте в него элемент "Image" или "shape" с иконкой корзины, прописав этому элементу ссылку "/basket"
добавьте элемент "Text" с цифрой "0" - для количества товара, задайте ему класс "cartcopy_elem".
добавьте элемент "Text" со знаком "=" -для суммы заказа, задайте ему класс "cartprice_elem" (при необходимости конечно)

Можно и без него. Достаточно просто указать где-либо ссылку на страницу с корзиной

<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.addEventListener('DOMContentLoaded', function() {
  let hideMode = false; // Скрыть-Показать пустую корзину - true-false
  document.querySelectorAll('.cartcopy_elem .tn-atom').forEach(function(element) {
    element.classList.add('cartcopy');
  });
  document.querySelectorAll('.cartprice_elem .tn-atom').forEach(function(element) {
    element.classList.add('cartcopyprice');
  });

  function chkNum() {
    if (!hideMode) {
      document.querySelectorAll('.cartcopy, .cartcopyprice').forEach(function(element) {
        element.style.display = 'block';
      });
    }

    let chCounter = window.tcart.total;
    let chPrice = window.tcart.prodamount;

    if (chPrice === 0) {
      document.querySelector('div[data-elem-type="text"] .cartcopyprice').innerHTML = '';
      if (hideMode) {
        document.querySelectorAll('.cartcopy, .cartcopyprice').forEach(function(element) {
          element.style.display = 'none';
        });
      } else {
        document.querySelectorAll('.cartcopy, .cartcopyprice').forEach(function(element) {
          element.style.display = 'block';
        });
      }
    } else {
      document.querySelector('div[data-elem-type="text"] .cartcopyprice').innerHTML = chPrice + ' руб';
      if (hideMode) {
        document.querySelectorAll('.cartcopy, .cartcopyprice').forEach(function(element) {
          element.style.display = 'block';
        });
      }
    }

    document.querySelector('div[data-elem-type="text"] .cartcopy').innerHTML = chCounter;

    if (chCounter === 0) {
      document.querySelector('.cartcopy').classList.add('blkElem');
    } else {
      document.querySelector('.cartcopy').classList.remove('blkElem');
    }

    if (chCounter === '') {
      document.querySelector('div[data-elem-type="text"] .cartcopy').innerHTML = 0;
    }
  }

  setTimeout(function() {
    chkNum();
  }, 500);

  document.querySelector(".t706").addEventListener('DOMSubtreeModified', function(event) {
    if (event.target.classList.contains('t706__carticon-counter')) {
      setTimeout(function() {
        chkNum();
      }, 300);
      document.querySelector('div[data-elem-type="image"] .cartcopy').classList.add('cartcopyanim');
      setTimeout(function() {
        document.querySelector('.cartcopy').classList.remove('cartcopyanim');
      }, 1000);
    }
  });

  document.querySelector('.cartcopy').addEventListener('click', function(event) {
    event.preventDefault();
    tcart__openCart();
  });
});
</script>

Код 3 -- Скрыть стандартную корзину

Скрывает стандартную иконку корзину. Рекомендуется размещать в футере

<style>
.t706__carticon {
display: none;
}
</style>