Tilda PublishingПодписка

Как добавить корзину в Zero Block или в меню в Tilda Publishing. Своя корзина в zero block.

Введение

Своя корзина в zero block или в меню? Zero Block – это продуманный инструмент для создания собственных блоков в Tilda Publishing. Одним из важных элементов любого сайта является навигационное меню, которое позволяет пользователям легко перемещаться по сайту. Очень удобно, когда все необходимые кнопки и ссылки находятся в одном меню, например иконка корзины.

суммарная стоимость товаров в корзине
кнопка очистить корзину

В этой стать вы научитесь создавать свою собственную корзину товаров в конструкторе сайтов Тильда и помещать её в навигационное меню, сделанное из zero block. Кроме иконки корзины, мы добавим:

  1. Общую стоимость всех товаров
  2. Кнопку «Очистить корзину», которая удаляет из корзины все добавленные в нее товары

Как сделать свою иконку корзины товаров с счётчиком в zero block

Как сделать свою иконку корзины товаров в zero block

Чтобы сделать свою корзину в тильде, выполните несколько простых шагов:

  1. Создайте zero block
  2. Нажмите на кнопку «Редактировать блок»
  3. Удалите стандартный контент
  4. Настройте вид и высоту блока по своему усмотрению
  5. Нажмите на кнопку «+» и выберите пункт «Add Image»
  6. Загрузите заранее подготовленную иконку для вашей корзины в zero block
  7. Расположите иконку в нужном вам месте
  8. Нажмите правой кнопкой мыши на вашу иконку и выберите «Add CSS Class Name»
  9. В появившемся поле введите класс «show-basket»
  10. После этого нажмите на кнопку «+» и выберите пункт «Add HTML»
  11. Откройте html элемент и скопируйте в него первую часть скрипта (скрипт вы найдете в конце статьи)
  12. Этот скрипт создает счетчик добавленных товаров в вашу корзину. В этом коде вы можете изменить внешний вид счетчика по своему усмотрению
  13. Расположите этот html элемент там, где у вас должен находиться счетчик
  14. Если вам нужно отобразить рядом с корзиной суммарную стоимость всех товаров, добавленных в корзину, то создайте еще один html элемент
  15. Скопируйте в этот html элемент вторую часть скрипта (скрипт вы найдете в конце статьи)
  16. Расположите этот html элемент там, где у вас должна показываться суммарная стоимость всех товаров в корзине
  17. Сохраните изменения и закройте зеро блок

Своя корзина в zero block. Добавление и изменение стандартного функционала магазина

Итак, создали свою иконку корзины. Но она не будет работать без добавления стандартной корзины в Tilda Publishing. Поэтому, следуйте следующим инструкциям:

  1. В главном меню вашей страницы нажмите на кнопку «Все блоки».
  2. Найдите пункт «Магазин».
  3. Добавьте блок «ST100. Корзина с формой заказа».
  4. Добавьте любой блок с карточкой товара.
  5. Из пункта «Другое» добавьте блок «T123. HTML-код».
  6. Нажмите на кнопку «Контент».
  7. Скопируйте третью часть скрипта и вставьте в блок html:

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку

Сохраните изменения и опубликуйте страницу. Ваша собственная корзина в zero block готова!

Заключение

Добавление корзины в Zero Block или в меню в Tilda Publishing может значительно улучшить пользовательский опыт и увеличить конверсию вашего сайта. Благодаря этой функции ваши посетители могут легко и быстро выбирать, и заказывать продукты или услуги прямо на вашем сайте. Кроме того, вы можете интегрировать платежные системы для облегчения процесса оплаты.

Аналогичным образом вы можете сделать свою иконку избранных товаров в zero block. Подробнее об этом вы можете узнать в одной из наших статей или на нашем YouTube канале.

Один комментарий к “Как добавить корзину в Zero Block или в меню в Tilda Publishing. Своя корзина в zero block.

Добавить комментарий