Loading...
Нолиму 5 лет — выиграй подписку на 5 лет 
Участвовать
Скопируйте промокод → вставьте при оплате → по окончании триала — 750 ₽/мес

3 дня полного доступа к Нолим за 100 ₽

Осталось:
00
20 000+ дизайнеров на Tilda работают с Нолим
Слайдеры · Меню · Анимации · Формы · 200+ модификаций
Скачать расширение
Поддержка
Поддержка
Модификации
Промпты
ИИ-инструменты
База знаний
Профиль
Подписка
Партнерка
Блог
Шаблоны
....
NLM010 • Время настройки: 2 минуты

Корзина в меню Zero Block на Тильде — количество и цена

Модификация поможет убрать корзину в меню сделанное в Зеро блоке, настроить показ цены и количества товаров в корзине.
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.
0
О платформе
Цены
0

Смотрите, как быстро установить модификацию

Инструкция

1. Создаёшь своё меню в Зеро-блок. Загружаешь в него иконку для корзины, и вставляешь два текстовых блока: первый будет отвечать за количество товаров, а второй за сумму заказа;

2. У элементов, которые будут отвечать за корзину, сумму заказа и количество товаров указываешь классы;

Что бы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class.

3. В генераторе указываешь:
  • «Класс для корзины» — Например, mycart
  • «Класс для цены» — Например, myprice
  • «Класс для кол-ва» — Например, mycount
  • «Символы до кол-ва», «Символы после кол-ва» - настройки для указания символов до/после количества. Например, скобка в положении до: (и в положении после:)
  • «Ссылка при пустой корзине» — Указываешь ссылку для пустой корзины (popup, якорная ссылка или ссылка на страницу с каталогом, например, #popup, внимание, не используй ссылку #opencart)
  • «Текст до цены» - Если нужно указываешь текст ДО цены
  • «Показывать количество при 0 товаров» - Настраиваешь показ количества при пустой корзине
  • «Показывать цену при 0 товаров» — Настраиваешь показ суммы при пустой корзине
  • «Показывать стандартный виджет корзины на экранах меньше 980px» — Да или нет.

4. Устанавливаешь блок корзины (ST100) на страницу;

5. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;

Имей в виду:

  • Для корректной работы модификации необходимо в настройках корзины убрать галочку в разделе «дополнительные настройки» напротив «Не сохранять товар в корзине»;
  • Там же, в настройках корзины, не нужно указывать значение 0 в поле «количество дней хранения товаров в корзине»;
  • Иконку с корзиной загрузите через шейп, как изображение она не будет работать;
  • Текст, который отвечает за сумму заказа, советуем включить выравнивание по правой стороне и ширина текстового элемента сделать с запасом, для того что бы сумма не переносилась на другую строчку;
  • Количество товаров можно сделать при помощи обычной кнопки. Задайте ей нужные размеры и цвет, после добавьте класс к ней;
  • Не включайте «Не показывать кнопку открытия виджета. Ссылка для открытия виджета: #opencart» внутри корзины;
  • Если у вас два меню в зеро блоке на странице, продублируйте к элементам в фиксированном меню те же настройки, что и для первого меню;
  • Ссылку для пустой корзины указывайте только в настройках модификации. Для иконки корзины в Зероблоке добавлять её не нужно.

Сгенерируйте код для своего сайта

Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Скопировать обычную ссылку
Копировать код
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Корзина в Zero Block Тильда — решение для кастомных интернет-магазинов

Стандартная корзина Tilda хорошо работает в обычных меню и блоках магазина. Но если меню собрано в Zero Block, хочется сохранить полный контроль над дизайном: поставить свою иконку, вывести счётчик товаров, показать сумму заказа и не добавлять стандартный ME-блок только ради корзины.

Модификация NLM010 от Nolim помогает встроить корзину в кастомное меню из Zero Block. Ты сам рисуешь внешний вид элемента, а модификация связывает его со стандартной корзиной Tilda.

Как установить за 5 минут

Сначала собери меню в Zero Block: добавь иконку корзины, текстовый элемент для количества товаров и, если нужно, отдельный текстовый элемент для суммы заказа. Иконку лучше загружать через shape — так она корректнее работает как кликабельный элемент.

Затем задай CSS-классы для элементов: отдельно для корзины, количества и цены. В генераторе Nolim укажи эти классы, настрой символы до и после количества, текст до цены и ссылку для пустой корзины. После этого добавь на страницу стандартный блок корзины ST100, вставь готовый код в T123 и опубликуй страницу.

Где используют корзину в Zero Block

Такая корзина нужна, когда шапка сайта полностью сделана в Zero Block: с нестандартной сеткой, анимацией, иконками, промо-плашкой, номером телефона, кнопками или сложной мобильной версией.

Чаще всего модификацию используют в интернет-магазинах одежды, косметики, декора, мебели, цифровых продуктов, курсов и небольших каталогов. Пользователь видит корзину прямо в фирменном меню, а магазин продолжает работать через стандартную систему Tilda.

Что можно вывести в меню

В Zero Block можно показать количество товаров, сумму заказа или оба значения сразу. Например, рядом с иконкой корзины можно вывести счётчик `(2)`, а в соседнем текстовом элементе — сумму `4 500 ₽`.

Если корзина пустая, можно настроить отдельное поведение: показывать или скрывать количество, показывать или скрывать цену, а при клике вести пользователя не в `#opencart`, а на каталог, попап или другую нужную страницу.

Чем это отличается от кастомизации корзины

Эта модификация не меняет внешний вид самого окна корзины. Она отвечает за другое: переносит корзину в меню Zero Block и помогает показать там количество товаров и сумму заказа.

Если нужно изменить цвета, фон, границы и иконки внутри стандартного окна корзины, подходит модификация для кастомизации ST100. Если нужно встроить корзину в своё меню, шапку или фиксированный Zero Block — нужна NLM010.

Что проверить после публикации

После установки добавь товар в корзину и проверь, обновляется ли количество, меняется ли сумма и открывается ли стандартная корзина по клику. Затем удали товары и проверь состояние пустой корзины: ссылка должна вести туда, куда ты указал в генераторе.

Отдельно проверь мобильную версию. Если на экранах меньше 980 px нужно оставить стандартный виджет корзины, включи эту настройку в генераторе. Если корзина должна работать только в кастомном меню, убедись, что иконка, счётчик и сумма не наезжают друг на друга и остаются кликабельными.

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

В Zero Block создай элемент для отображения корзины (иконку с счётчиком). В генераторе на nolim.cc/cart-zero-block укажи CSS-классы этих элементов: один класс для счётчика количества, другой для суммы. Скопируй код и вставь в блок «HTML-код». Теперь при добавлении товара счётчик обновляется автоматически.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.