Корзина в меню Zero Block
Как добавить иконку корзины в меню Zero Block, настроить показ цены и количества товаров при наведении
Пример корзины в Zero-Block
0
Стоимость товаров
0
Главная
Каталог
Попробуйте добавить товары:
SALE
Dining Chair by esteban+moreno
With a new design approach for flexible use: from a dinner for two, to a big celebration.
79
р.
200
р.
В корзину
Underwater wearable watches
An accessory for any occasion, from a nice dinner to an underwater swim.
90
р.
В корзину
Sac Marin Yellow black with straps
Marinetmarine store backpack. The Sac Marin can be worn as a backpack or as a bag over.
1080
р.
В корзину
HOT
Accessories by Ionna Vautrin
Marinetmarine store backpack. The Sac Marin can be worn as a backpack or as a bag.
120000
р.
В корзину
Инструкция
  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