NLM010 • Время настройки: 2 минуты
Корзина в меню Zero Block на Тильде — количество и цена
Модификация поможет убрать корзину в меню сделанное в Зеро блоке, настроить показ цены и количества товаров в корзине.
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Ваша корзина пуста
Перейдите в каталог, чтобы выбрать товары и оформить покупку.
Смотрите, как быстро установить модификацию
Инструкция
1. Создаёшь своё меню в Зеро-блок. Загружаешь в него иконку для корзины, и вставляешь два текстовых блока: первый будет отвечать за количество товаров, а второй за сумму заказа;
2. У элементов, которые будут отвечать за корзину, сумму заказа и количество товаров указываешь классы;
Что бы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class.
3. В генераторе указываешь:
4. Устанавливаешь блок корзины (ST100) на страницу;
5. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;
Имей в виду:
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 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Корзина в Zero Block Тильда — решение для кастомных интернет-магазинов
Стандартная корзина Tilda хорошо работает в обычных меню и блоках магазина. Но если меню собрано в Zero Block, хочется сохранить полный контроль над дизайном: поставить свою иконку, вывести счётчик товаров, показать сумму заказа и не добавлять стандартный ME-блок только ради корзины.
Модификация NLM010 от Nolim помогает встроить корзину в кастомное меню из Zero Block. Ты сам рисуешь внешний вид элемента, а модификация связывает его со стандартной корзиной Tilda.
Модификация NLM010 от Nolim помогает встроить корзину в кастомное меню из Zero Block. Ты сам рисуешь внешний вид элемента, а модификация связывает его со стандартной корзиной Tilda.
Как установить за 5 минут
Сначала собери меню в Zero Block: добавь иконку корзины, текстовый элемент для количества товаров и, если нужно, отдельный текстовый элемент для суммы заказа. Иконку лучше загружать через shape — так она корректнее работает как кликабельный элемент.
Затем задай CSS-классы для элементов: отдельно для корзины, количества и цены. В генераторе Nolim укажи эти классы, настрой символы до и после количества, текст до цены и ссылку для пустой корзины. После этого добавь на страницу стандартный блок корзины ST100, вставь готовый код в T123 и опубликуй страницу.
Затем задай CSS-классы для элементов: отдельно для корзины, количества и цены. В генераторе Nolim укажи эти классы, настрой символы до и после количества, текст до цены и ссылку для пустой корзины. После этого добавь на страницу стандартный блок корзины ST100, вставь готовый код в T123 и опубликуй страницу.
Где используют корзину в Zero Block
Такая корзина нужна, когда шапка сайта полностью сделана в Zero Block: с нестандартной сеткой, анимацией, иконками, промо-плашкой, номером телефона, кнопками или сложной мобильной версией.
Чаще всего модификацию используют в интернет-магазинах одежды, косметики, декора, мебели, цифровых продуктов, курсов и небольших каталогов. Пользователь видит корзину прямо в фирменном меню, а магазин продолжает работать через стандартную систему Tilda.
Чаще всего модификацию используют в интернет-магазинах одежды, косметики, декора, мебели, цифровых продуктов, курсов и небольших каталогов. Пользователь видит корзину прямо в фирменном меню, а магазин продолжает работать через стандартную систему Tilda.
Что можно вывести в меню
В Zero Block можно показать количество товаров, сумму заказа или оба значения сразу. Например, рядом с иконкой корзины можно вывести счётчик `(2)`, а в соседнем текстовом элементе — сумму `4 500 ₽`.
Если корзина пустая, можно настроить отдельное поведение: показывать или скрывать количество, показывать или скрывать цену, а при клике вести пользователя не в `#opencart`, а на каталог, попап или другую нужную страницу.
Если корзина пустая, можно настроить отдельное поведение: показывать или скрывать количество, показывать или скрывать цену, а при клике вести пользователя не в `#opencart`, а на каталог, попап или другую нужную страницу.
Чем это отличается от кастомизации корзины
Эта модификация не меняет внешний вид самого окна корзины. Она отвечает за другое: переносит корзину в меню Zero Block и помогает показать там количество товаров и сумму заказа.
Если нужно изменить цвета, фон, границы и иконки внутри стандартного окна корзины, подходит модификация для кастомизации ST100. Если нужно встроить корзину в своё меню, шапку или фиксированный Zero Block — нужна NLM010.
Если нужно изменить цвета, фон, границы и иконки внутри стандартного окна корзины, подходит модификация для кастомизации ST100. Если нужно встроить корзину в своё меню, шапку или фиксированный Zero Block — нужна NLM010.
Что проверить после публикации
После установки добавь товар в корзину и проверь, обновляется ли количество, меняется ли сумма и открывается ли стандартная корзина по клику. Затем удали товары и проверь состояние пустой корзины: ссылка должна вести туда, куда ты указал в генераторе.
Отдельно проверь мобильную версию. Если на экранах меньше 980 px нужно оставить стандартный виджет корзины, включи эту настройку в генераторе. Если корзина должна работать только в кастомном меню, убедись, что иконка, счётчик и сумма не наезжают друг на друга и остаются кликабельными.
Отдельно проверь мобильную версию. Если на экранах меньше 980 px нужно оставить стандартный виджет корзины, включи эту настройку в генераторе. Если корзина должна работать только в кастомном меню, убедись, что иконка, счётчик и сумма не наезжают друг на друга и остаются кликабельными.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
В Zero Block создай элемент для отображения корзины (иконку с счётчиком). В генераторе на nolim.cc/cart-zero-block укажи CSS-классы этих элементов: один класс для счётчика количества, другой для суммы. Скопируй код и вставь в блок «HTML-код». Теперь при добавлении товара счётчик обновляется автоматически.
Да. Модификация умеет выводить как количество товаров, так и общую сумму заказа. Ты задаёшь отдельный CSS-класс для каждого параметра в своём Zero Block, и данные из стандартной корзины Tilda автоматически попадают в нужные элементы.
Стандартная корзина Tilda привязана к конкретным системным классам и элементам ME-блоков. Zero Block — это изолированная среда с произвольными классами. Модификация Nolim создаёт мост между системой магазина Tilda и твоими кастомными элементами в Zero Block.
Было: дизайнер сделал полностью кастомное меню из Zero Block, но корзина Tilda не работала в нём — пришлось добавлять стандартный ME-блок, который ломал единство дизайна.
Стало: после установки модификации Nolim корзина Тильды стала частью кастомного меню. Дизайн сохранился, функционал работает — заказы идут через стандартную систему Tilda.
Стало: после установки модификации Nolim корзина Тильды стала частью кастомного меню. Дизайн сохранился, функционал работает — заказы идут через стандартную систему Tilda.