Корзина в меню Zero Block
Как добавить иконку корзины в меню Zero Block, настроить показ цены и количества товаров при наведении
Пример корзины в Zero-Block
0
Стоимость товаров
0
Попробуйте добавить товары:
Инструкция
  1. Создаём Zero Block
  2. В зеро блок добавляем элементы:
  • Иконку корзины (при нажатии на неё будет открываться корзина)
  • Текст или кнопку, которая будет отвечать за кол-во товаров в корзине
  • Текст или кнопку, которая будет показывать сумму корзины
См. скриншот
3. Присваиваем CSS классы элементам:
  • Иконке корзины, класс "mycart"
  • Тексту или кнопке, которая будет отвечать за кол-во товаров в корзине, класс "mycount"
  • Тексту или кнопке, которая будет показывать сумму корзины, класс "myprice"
Задаём CSS класс элементам
4. Добавляем ссылки и текст:
  • Иконке корзины, ссылку (URL) "#opencart"
  • Тексту или кнопке, которая будет отвечать за кол-во товаров в корзине, задаём текст "0"
  • Тексту или кнопке, которая будет показывать сумму корзины, задаём текст "0"

*Вместо нуля скрипт при добавлении товаров сам пропишет кол-во товаров и цену
Задаём ссылку элементу корзины #opencart
Задаём текст элементам "0"
5. Добавляем на страницу блок ST100 (корзина)
Корзину настраиваем как угодно, главное, НЕ НУЖНО ВЫКЛЮЧАТЬ ВИДИМОСТЬ КОРЗИНЫ.

Скрипт сам скроет иконку корзины, поэтому скрывать иконку корзины не нужно.
Настройки корзины
6. Добавляем HTML код на страницу, в блок Другое - Т123
HTML код в блок T123


<!-- КОРЗИНА В МЕНЮ ZERO BLOCK -->
<!-- Блок представлен сайтом https://sitebelov.ru/ - Инструкции: https://sitebelov.ru/cartinthezeroblockmen -->

<style>
.mycart{height: inherit;cursor: pointer;}.t706__carticon-wrapper,.t706__carticon{display: none;}.ninjaElem{pointer-events: none;}
.cartcopyanim{-webkit-animation: t706__pulse-anim 0.6s;animation: t706__pulse-anim 0.6s;}

	</style>
	<script>$(document).ready(function()
{var hideMode= false;var counthide= 0;var pricehide= 0;function chkNum()
{let chCounter= window.tcart.total;let chPrice= window.tcart.prodamount;if(chPrice== 0){if(counthide== 1){$(".mycount").hide();}else{$(".mycount").show();}if(pricehide== 1)
{$(".myprice").hide();}else{$(".myprice").show();}$(".myprice .tn-atom").html("" + " 0" + window.tcart.currency_txt_r);}else{$(".myprice")
.show();$(".mycount").show();}$(".mycount .tn-atom").html(chCounter);if(chCounter== 0){$(".myprice .tn-atom")
.addClass("ninjaElem");}else{$(".myprice .tn-atom").removeClass("ninjaElem");}if(chCounter== ""){$(".mycount .tn-atom").html("0");}}$(".mycart .tn-atom").click(function(e){e.preventDefault();
if(window.tcart.total== 0){$('[href="#opencart"]')[0].click();}else{tcart__openCart();}});setTimeout(function(){chkNum();if($(".myprice .tn-atom")
.text()== "Click to order"){$(".myprice .tn-atom").text("");}},550);$(".t706").on("DOMSubtreeModified",".t706__carticon-counter",function(){setTimeout(function(){chkNum();},300);$(".mycart .tn-atom")
.addClass("cartcopyanim");setTimeout(function(){$(".mycart .tn-atom").removeClass("cartcopyanim");},1000);});$(".t706")
.on("DOMSubtreeModified",".t706__carticon-text",function(){var textprice= $(".t706 .t706__carticon-text").text().replace("= ","");$(".myprice .tn-atom")
.text("" + textprice);let chPrice= window.tcart.prodamount;if(chPrice== 0){$(".myprice .tn-atom").html("" + "0" + window.tcart.currency_txt_r);}});});
	</script>


Made on
Tilda