Как добавить корзину в Zero Block или в меню в Tilda Publishing. Своя корзина в zero block.
Введение
Где разместить корзину — в Zero Block или в меню? Zero Block — это мощный инструмент для создания кастомных блоков в Tilda Publishing. Одним из ключевых элементов сайта является навигационное меню, которое помогает пользователям быстро ориентироваться на страницах. Очень удобно, когда все важные кнопки и ссылки собраны в одном меню, например, иконка корзины.
В этой статье вы узнаете, как создать собственную корзину товаров в конструкторе сайтов Tilda и разместить её в навигационном меню, созданном с помощью Zero Block. Кроме иконки корзины, мы добавим:
- Общую стоимость всех товаров
- Кнопку «Очистить корзину», которая удаляет из корзины все добавленные в нее товары
Как сделать свою иконку корзины товаров с счётчиком в zero block
Чтобы сделать свою корзину в тильде, выполните несколько простых шагов:
- Создайте zero block
- Нажмите на кнопку «Редактировать блок»
- Удалите стандартный контент
- Настройте вид и высоту блока по своему усмотрению
- Нажмите на кнопку «+» и выберите пункт «Add Image»
- Загрузите заранее подготовленную иконку для вашей корзины в zero block
- Расположите иконку в нужном вам месте
- Нажмите правой кнопкой мыши на вашу иконку и выберите «Add CSS Class Name»
- В появившемся поле введите класс «show-basket»
- После этого нажмите на кнопку «+» и выберите пункт «Add HTML»
- Откройте html элемент и скопируйте в него первую часть скрипта (скрипт вы найдете в конце статьи)
- Этот скрипт создает счетчик добавленных товаров в вашу корзину. В этом коде вы можете изменить внешний вид счетчика по своему усмотрению
- Расположите этот html элемент там, где у вас должен находиться счетчик
- Если вам нужно отобразить рядом с корзиной суммарную стоимость всех товаров, добавленных в корзину, то создайте еще один html элемент
- Скопируйте в этот html элемент вторую часть скрипта (скрипт вы найдете в конце статьи)
- Расположите этот html элемент там, где у вас должна показываться суммарная стоимость всех товаров в корзине
- Сохраните изменения и закройте зеро блок
Своя корзина в zero block. Добавление и изменение стандартного функционала магазина
Итак, создали свою иконку корзины. Но она не будет работать без добавления стандартной корзины в Tilda Publishing. Поэтому, следуйте следующим инструкциям:
- В главном меню вашей страницы нажмите на кнопку «Все блоки».
- Найдите пункт «Магазин».
- Добавьте блок «ST100. Корзина с формой заказа».
- Добавьте любой блок с карточкой товара.
- Из пункта «Другое» добавьте блок «T123. HTML-код».
- Нажмите на кнопку «Контент».
- Скопируйте третью часть скрипта и вставьте в блок html.
- Сохраните изменения и опубликуйте страницу. Ваша собственная корзина в zero block готова!