Свои карточки товаров в zero block tilda + всплывающее окно Popup

agadzhango 21.04.202329.10.2023 Комментариев нет

1 999

Содержимое

1 Вступление
2 Как создать свои карточки товаров в zero block
3 Как поместить свои карточки товаров в zero block в Popup
4 Заключение

Вступление

Конструктор сайтов Tilda — это мощный инструмент, который позволяет создавать качественные интернет-магазины и лендинги без необходимости писать код. В Tilda уже есть стандартные карточки товаров, но для того, чтобы выделиться среди конкурентов, можно создать свои уникальные карточки с помощью Zero Block Tilda. В этой статье мы рассмотрим, как сделать свои карточки товаров в Zero Block Tilda и добавить их во всплывающее окно popup. Сначала мы рассмотрим процесс создания карточек товаров, а затем перейдем к добавлению их в popup.

Как создать свои карточки товаров в 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» и вставьте туда следующий код:

<style>
  .shirina{
   background:none !important; right: 0 !important;left: 0 !important;}  
  .parpadding{padding:0 !important;}
  .tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup , .t-form-success-popup { z-index: 9999999 !important; }
  </style>
<script>
$( document ).ready(function() {
var ZeroPopID = '#rec288543986';//ID Zero
var PopWindID = '#rec288544167';//ID PopUp окна BF503

   $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID)).parent(".t-popup").addClass("parpadding");
   $('a[href^="#popupzero"]').click(function(e) {e.preventDefault();
   setTimeout(function(){window.dispatchEvent(new Event('resize')); }, 10);
   });
   $(document).on('click','a[href="#close"], '+ZeroPopID+' .t396__filter',function(e){e.preventDefault();t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""));});
   $(ZeroPopID).delegate(".t-submit", "click", function(){
   setTimeout(function(){if($(ZeroPopID+" .t-form").hasClass("js-send-form-success")){t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""))}}, 1000);});
});  
</script>

Нажмите на кнопку «Настройки» в зеро блоке с карточкой товара и скопируйте его ID.
Вернитесь в «Контент» блока «Т123» и вставьте скопированный ID в строку, которая начинается с «var ZeroPopID».
Точно также скопируйте ID блока «BF503» и вставьте в строку, которая начинается с «var PopWindID».

Если вы следовали нашей инструкции и сделали все правильно, то, после публикации страницы вы увидите изображение вашего товара с кнопкой «подробнее». При нажатии на эту кнопку откроется всплывающее окно, которое будет содержать карточку товара с подробным описанием и кнопкой купить. Все, что вам останется сделать – добавить стандартную корзину. Для этого:

Нажмите на кнопку «+» или «Все блоки».
Пропишите в поиске «ST100» и добавьте блок «Корзина с формой заказа»
Нажмите на кнопку «Настройки» в блоке «ST100» и уберите голочку с пункта «Открывать корзину после выбора товара».
Сохраните изменения и опубликуйте страницу.

Итак, мы с вами создали свою карточку товара во всплывающем окне и привязали её к корзине!

Заключение

В заключение можно сказать, что создание своих уникальных карточек товаров в Zero Block Tilda не только позволит выделиться среди конкурентов, но и поможет улучшить пользовательский опыт в интернет-магазине. Также добавление всплывающих окон pop up может увеличить конверсию и помочь привлечь внимание посетителей к определенному продукту или акции. Tilda предоставляет множество инструментов для создания качественных сайтов и лендингов, а создание своих уникальных карточек и использование pop up — это дополнительный инструмент, который поможет сделать ваш интернет-магазин более привлекательным для клиентов. Надеемся, что эта статья была полезной и поможет вам в создании качественного интернет-магазина.

Читайте еще: Как сделать свою иконку для корзины в меню на Tilda

Видео урок по этой теме тут