Как сделать корзину на Тильде за 3 шага + в Zero Block

В этой статье я расскажу, как сделать корзину на Тильде за 3 шага. Также мы рассмотрим, что делать, когда корзина нужна на всем сайте, а не на одной странице. А в завершении я покажу, как установить корзину в меню через Zero Block.

В Тильде я работаю с 2019 года, поэтому мои инструкции помогут вам быстрее сделать базовые настройки корзины и перейти к первым продажам.

Содержание

Для каких целей нужна корзина
Когда корзина не будет работать
Шаг 1: Создание корзины
Шаг 2: Добавление товаров
«Карточки»
«Товары»
Шаг 3: Внешний вид
Единая корзина на всех страницах в Тильде
Как сделать корзину в меню из Зеро блока

Для каких целей нужна корзина

Корзина – это один из важных элементов при создании интернет-магазина в Тильде. Применяется в тех случаях, когда у вас на странице продается более 3 товаров или услуг.

Можно привести аналогию с обычным продуктовым магазином. Потенциальный клиент «гуляет» по вашему сайту в поисках интересного продукта. А когда находит его, то временно складывает его в корзину. Ему не нужно тут же бежать на кассу. Клиент оплатит все одним платежом и после того, как пройдется по всем отделам.

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

Настроить корзину на Тильде сможет любой пользователь. В этом нет ничего сложного. Главное – следуйте моим инструкциям и рекомендациям.

Когда корзина не будет работать

За время своей работы в Тильде был один проект, в котором не удалось применить инструмент: «Корзина». Мой клиент продавал онлайн курсы. Курсов было много, поэтому создание интернет-магазина было бы кстати.

В чем оказалась загвоздка? Оплатить продукт из корзины можно только через привязанные платежные системы в Тильде. Это и логично. Ведь общая сумма товара суммируется, а значит, вы не можете прикрепить к корзине ссылку на оплату со стороннего сервиса. Например, как вы это делаете, если у вас одна единица.

Но все не так плохо! Тильда сотрудничает более с 60 платежными системами. И, скорее всего, ваш будет в этом списке. Но моему клиенту не повезло. Сервис, через который он принимал оплаты, был слишком старый. Поэтому я был обязан вас об этом предупредить.

Как мы вышли из это ситуации? Было найдено решение. Я создал отдельную страницу с каталогом авторских курсов, но без корзины. К каждой карточке продукта было добавлено по 2 кнопки: «Подробнее» и «Купить».

Первая вела на отдельную страницу с подробным описанием курса.

Вторая переводила клиента сразу на страницу оплаты через сторонний сервис.

Шаг 1: Создание корзины

Авторизируемся в своем аккаунте Tilda;
Выбираем нужным нам проект;
Переходим на страницу или создаем новую;
Нажимаем добавить блок → категория «Магазин» → блок ST100 «Корзина с формой заказа»;

Переходим в «Контент» блока корзины. Здесь важно настроить «Поля для ввода». Это те данные которые клиент будет указывать при оформлении заказа. Например, вам важно знать: ФИО, Телефон, E-mail и Вариант доставки.

В поле с телефоном рекомендую выбирать: «Автоматическая маска с кодом страны». Смотрится современнее и у человека появится возможность выбрать код страны из списка.

В разделе «Дополнительно» важно изменить «Текст кнопки». Например: оплатить. Остальные поля заполняйте по своему усмотрению.

Про настройки внешнего вида мы поговорим в третьем шаге.

Шаг 2: Добавление товаров

Чтобы наша корзина работала, необходимо добавить на страницу Тильды блок с карточками товара. Например, ST300 или ST320N. Добавление продуктов делятся на 2 типа: через «Карточки» или через «Товары». Мы поговорим про каждый из них.

«Карточки»

Добавление продукта через карточки означает, что мы указываем характеристики прямо из блока, в разделе «Контент». Подходит тем, у кого не так много разных категорий или вам нужно вставить ссылку в кнопку.

Если захотите продавать продукт с разных страниц Тильды, вам придется каждый раз указывать характеристики этого товара.

Как настроить «Карточки»:

Добавляем блок ST300 или его аналоги.
Переходим в «Контент».
Добавляем наши товары в карточки.
Загружаем изображение.
Указываем заголовок товара, описание, стоимость, дополнительные параметры.
Сохранить и закрыть.

В колонке ТЕКСТ информация видна, только если вы переводите человека в «Подробнее о товаре». А оттуда товар добавляется только в корзину.

«Товары»

Добавление продуктов и услуг через инструмент «Товары» на отдельной вкладке. Имеет больше настроек, а именно:

Отдельная карточка с продуктом.
Добавление артикула.
Возможность прописывать количество на складе. После покупки вычитается автоматически.
Разбивка товара по категориям. Например: фрукты, техника, одежда.
Снять товар со страницы одним ползунком.
Редактирование товара автоматически отображается на всех страницах, где он размещен.
И т.д.

Как подключить инструмент товары:

выбираем нужный нам лендинг;
переходим в настройки сайта;
вкладка «Еще»;
пролистываем вниз до раздела «Подключаемые модули»;
и нажимаем подключить.

После подключения вам автоматически создадут 3 тестовых продукта. Их можно удалить сразу или внести в них изменения.

Как добавить продукт:

Чтобы добавить новый продукт, нажимаем на оранжевую кнопку «Добавить» и указываем название. Далее мы видим много полей для заполнения. Все перечислять не буду. Только сделаю акцент на некоторые и для чего они нужны.

Поле «Текст» – показывается только в Popup окне. То есть если при нажатии на ваш продукт вы выбрали «Подробнее о товаре».

Артикул – необходим для сверки в бухгалтерии.

Количество – при каждой покупке автоматически вычитается из этого значения. Как только товара станет 0, он перестанет показываться в магазине.

Варианты товара – позволяет внести дополнительные характеристики: цвет, размер, комплектация, материал и т.д.

Характеристики – позволяет указать бренд, габариты, вес или указать свои.

Размещаем на странице:

Добавляем новый блок на страницу ST310N или его аналоги.
Удаляем стандартные карточки.
Ниже находим раздел «Выводить товары из каталога». Выбираем созданный нами раздел или все.
Сохранить и закрыть.

Товары автоматически добавятся к нам на страницу. Останется только настроить внешний вид блока и опубликовать лендинг.

Шаг 3: Внешний вид

В этом разделе я расскажу, как сделать корзину в черно-белом стиле в Тильде. Это решение отлично подойдет для лендингов со светлым фоном. Пример блока ST100.

Настраиваем раздел «Стиль корзины»:

Размер – стандартный;
Цвет иконки и числа – #fafafa;
Цвет кружка – #111111;
Цвет кружка под числом – #b40a1b;
Тень – 10px;
Лейбл текст – #fafafa;
Лейбл фон – #111111.

Далее «Стиль полей для ввода»:

Текст – #fafafa;
Фон и цвет бордюра – #111111;
Радиус скругления – 9px.

Раздел «Кнопки»:

Текст – #fafafa;
Фон – #b40a1b;
Радиус скругления – 9px;
Тень – 10px;
Насыщенность – Normal;
Фон при наведении – #111111;
Текст при наведении – #fafafa;
Тень при наведении – 20px.

Остальные настройки без изменений.

Единая корзина на всех страницах в Тильде

Чтобы корзина отображалась на всех лендингах, необходимо добавить блок на отдельную страницу с Header или Footer. После всех настроек обязательно переопубликуйте все лендинги на конкретном сайте.

То же самое правило работает для блока «Избранное».

Как сделать корзину в меню из Зеро блока

Создаем новый Zero Block на странице Тильды.
Выбираем добавить новый элемент Image и загружаем в него иконку корзины.
Создаем два элемента Text. У одного прописываем 0 – будет отображаться количество товаров. У другого знак «=» – для выведения общей суммы заказа.
Для текста с количеством и для нашей корзины нужно прописать класс cartcopy_elem.
А для текста с ценой ставим класс cartprice_elem.

После указанных настроен создаем на странице блок с корзиной ST100. Как работать с этим блоком, читайте выше.

И последнее. Размещаем на страницу блок T123 и вставляем в него HTML код:

<style>
.blkElem{pointer-events:none; }
.cartcopyanim {
-webkit-animation: t706__pulse-anim 0.6s;
animation: t706__pulse-anim 0.6s;}
.cartcopy_elem .tn-atom , .cartprice_elem .tn-atom {display:none}
.cartcopy{cursor:pointer}
.t706__carticon {display: none !important;} 
</style>
<script>
$( document ).ready(function() {
   let hideMode = false; //Скрыть-Показать пустую корзину - true-false
   $('.cartcopy_elem .tn-atom').addClass('cartcopy');
   $('.cartprice_elem .tn-atom').addClass('cartcopyprice');
   function chkNum(){
   if (window.tcart === undefined) { return; }
   if(!hideMode) $('.cartcopy, .cartcopyprice').show();   
   let chCounter = window.tcart.total;
   let chPrice = window.tcart.prodamount;
   if  (chPrice==0){
        $('div[data-elem-type="text"] .cartcopyprice').html(''); 
        if(hideMode) {$('.cartcopy, .cartcopyprice').hide()
        }else{$('.cartcopy, .cartcopyprice').show()};
   }else{ 
       $('div[data-elem-type="text"] .cartcopyprice').html(chPrice+' руб'); 
          if(hideMode) $('.cartcopy, .cartcopyprice').show();
   };
   $('div[data-elem-type="text"] .cartcopy').html(chCounter);
   if(chCounter==0){ $('.cartcopy').addClass('blkElem');
   }else{ $('.cartcopy').removeClass('blkElem'); }; 
   if(chCounter==''){$('div[data-elem-type="text"] .cartcopy').html(0);}; };
       setTimeout(function(){chkNum();}, 500);
   $(".t706").on('DOMSubtreeModified', ".t706__carticon-counter", function() {
       setTimeout(function(){chkNum();}, 300);
   $('div[data-elem-type="image"] .cartcopy').addClass('cartcopyanim');    
   setTimeout(function(){ $('.cartcopy').removeClass('cartcopyanim');}, 1000);});
   $('.cartcopy').click(function(e){e.preventDefault();tcart__openCart();});
});	
</script>

Вот мы и рассмотрели как сделать корзину на Тильде. Благодарю за прочтение!