Свои карточки товаров в zero block tilda + всплывающее окно Popup
Введение
Создание карточки товара в Zero Block — это простой процесс, который в основном зависит от ваших индивидуальных предпочтений. В этой статье мы покажем пример оформления и настройки карточки товара. После этого мы поместим её во всплывающее окно, которое будет открываться при клике на кнопку.
Как создать свои карточки товаров в zero block
Процесс создания карточки товара в zero block простой, но в большинстве зависит от ваших конкретных предпочтений. В этой статье мы приведем небольшой пример того, как можно оформить и настроить карточку товара. Затем, мы поместим её во всплывающее окно и будем вызывать кликом на кнопку:
- Создайте zero block.
- Удалите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите в zero block изображение вашего товара.
Мы создали зеро блок с изображением товара и кнопкой, которая будет открывать всплывающее окно с более подробной информацией о товаре.
- Создайте еще один zero block.
- Удалите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- В настройках кнопки измените текст внутри кнопки по желанию, например: Подробнее.
- Во вкладке «LINK» в поле «URL» введите «#popupzero».
- Сохраните изменения и выйдите из зеро блока.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите в zero block одно или несколько изображений вашего товара.
- Добавьте название вашего товара, дайте ему описание и укажите цену.
- Нажмите на кнопку «+» и выберите «Add Button».
- В настройках кнопки измените текст внутри кнопки по желанию, например: Купить.
- Во вкладке «LINK» в поле «URL» введите «#order:название вашего товара =700».
- Сохраните изменения и выйдите из зеро блока.
Как поместить свои карточки товаров в zero block в Popup
В предыдущей главе мы разработали базовую карточку товара в zero block для интернет-магазина на Tilda. Теперь давайте рассмотрим, как легко вставить эту карточку товара в всплывающее окно (Popup).
- Нажмите на кнопку «+» или «Все блоки».
- Пропишите в поиске «BF503» и добавьте popup блок.
- Нажмите на кнопку «Контент» в блок «BF503».
- В поле «Ссылка на popup» пропишите «#popupzero».
- Удалите изображение, заголовок, описание и уберите все галочки с социальных сетей.
- Зайдите в настройки этого блока и измените ширину на 100%.
- Нажмите на кнопку «+» или «Все блоки» и добавьте блок «Т123».
- Нажмите на кнопку «Контент» в блоке «Т123» и вставьте код.
- Нажмите на кнопку «Настройки» в зеро блоке с карточкой товара и скопируйте его ID.
- Вернитесь в «Контент» блока «Т123» и вставьте скопированный ID в строку, которая начинается с «var ZeroPopID».
- Точно также скопируйте ID блока «BF503» и вставьте в строку, которая начинается с «var PopWindID».
Если вы следовали нашей инструкции и сделали все правильно, то, после публикации страницы вы увидите изображение вашего товара с кнопкой «подробнее». При нажатии на эту кнопку откроется всплывающее окно, которое будет содержать карточку товара с подробным описанием и кнопкой купить. Все, что вам останется сделать – добавить стандартную корзину. Для этого:
- Нажмите на кнопку «+» или «Все блоки».
- Пропишите в поиске «ST100» и добавьте блок «Корзина с формой заказа»
- Нажмите на кнопку «Настройки» в блоке «ST100» и уберите голочку с пункта «Открывать корзину после выбора товара».
- Сохраните изменения и опубликуйте страницу.