Как сделать корзину на сайте

Создание корзины

Корзина на сайте - удобная функция, которая позволяет покупателю интуитивно двигаться по этапам оформления заказа. С помощью этого функционала пользователи могут одним кликом добавить интересующий товар в форму заказа и мгновенно перейти к заполнению контактной информации. Также корзина может предоставлять покупателю дополнительную информацию о суммарной стоимости товара, автоматически рассчитывать скидку и предоставить возможность выбора варианта доставки.

В этой инструкции мы по шагам разберем процесс создания корзины

• Выбор иконки для корзины
• Создание кнопки корзины
• Добавление окна оформления заказа
• Настройка полей в корзине
• Установка кнопки добавления товара
• Изменение дизайна корзины
• Создание кнопки для оплаты

Пример работы Пеперони - 649 руб.
В корзину

Всё самое необходимое для продаж на сайте

Онлайн-оплата

Сформирует покупателю ссылку для онлайн-оплаты на итоговую сумму заказа

Скидки и промо-коды

Рассчитает покупателю размер скидки от суммы заказа или по промо-коду

Варианты доставки

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

Уведомление в Telegram

Отправит сообщение о заказе в ваш личный чат телеграм или в вашу рабочую группу.

Статусы заказов

Покажет покупателю историю его покупок и текущий статус каждого из его заказов.

Поддержка сервиса

Поможет в установке и настройке индивидуального дизайна

Присоединяйтесь к нам в Telegram
@EasyNetShop_support

Шаг 1: Выбор иконки для корзины

Для создания кнопки потребуется изображение символа корзины в любом графическом формате. Эту картинку нужно будет загрузить на сервер и проверить её доступность через браузер, указав её URL в строке адреса. Например:

 <img src="https://lk.easynetshop.ru/box/cart_default.svg">

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

1. Поместить изображение внутрь блока DIV и указать у этого блока id="easynetshop-cart"

   <div id="easynetshop-cart">
       <img src="https://lk.easynetshop.ru/box/cart_default.svg">
   </div>

2. Настроить CSS-стили для элемента

   <style>
   #easynetshop-cart {
     background-color: #dddddd;
     width:40px; 
     height:40px;
     padding:10px;
   }
   </style> 

Шаг 3: Добавление окна оформления заказа

1. Скопируйте установочный код виджета из раздела Установка корзины. Пример (демо):

   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
   <script defer src="//lk.easynetshop.ru/frontend/v5/test.js"></script>
   <link href="//lk.easynetshop.ru/frontend/v5/test.css" rel="stylesheet">
   

2. Вставьте код в шаблоне вашего сайта или в коде отдельной страницы
3. Обновите страницу и проверьте отображение окна корзины при нажатии на кнопку Корзины

Шаг 4: Настройка полей в корзине

Настройки корзины производятся в личном кабинете сервиса в разделе Основные настройки

1. Установите адрес почты, на который будут отправляться заказы
2. Укажите адреса сайтов с которых в корзину можно автоматически добавлять товары
3. Настройте список полей для заполнения покупателем в форме заказа

Шаг 5: Установка кнопки добавления товара

1. Перейти в раздел Каталог товаров
2. Указать количество новых товаров и добавить их в список каталога
3. Перейти в режим редактирования товара, заполнить его основные параметры (название, стоимость, изображение)
4. После сохранения получить код для кнопки автоматического добавления товара в корзину
5. Вставьте полученный код на страницу вашего сайта

   <button class="btn-ens-action btn-ens-style" data-rel="4a9f99dc105">Купить</button>

Шаг 6: Изменение дизайна корзины

При создании корзины на основе готового скрипта от сервиса Простой магазин отдельной страницы на сайте не формируется. Вместо этого содержимое заказа для покупателя выводится на любой из существующий страниц через выпадающее окно. В нём присутствуют 3 основных блока: содержание заказа [1], поля для заполнения покупателем [2] и активные элементы для управления заказом [3].

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

 <style> 
	.easynetshop-gotocart, /* Кнопка перехода в корзину */ 
	.easynetshop-goorder, /* Кнопка возврата к заказу */ 
	.easynetshop-doorder /* Кнопка отправки заказа */ 
	{
    	background-color: #ffdb26; /* Цвет фона */ 
    	border-color: #c3a820; /* Цвет границы */ 
	}
</style> 

Для установки стилей этой кнопки при наведении или выделении можно добавить:

 <style> 
	.easynetshop-gotocart:hover, .easynetshop-gotocart:active, /* Кнопка перехода в корзину (при наведении) */ 
	.easynetshop-goorder:hover, .easynetshop-goorder:active, /* Кнопка возврата к заказу (при наведении) */ 
	.easynetshop-doorder:hover, .easynetshop-doorder:active  /* Кнопка отправки заказа (при наведении) */ 
	{
    	background-color: #ffdb26; /* Цвет фона */
    	border-color: #c3a820; /* Цвет границы */ 
	}
</style> 

Шаг 7: Создание кнопки для оплаты

При успешном оформлении заказа корзина может сформировать для покупателя ссылку на платежный сервис, который будет принимать платежи. В такой платежной ссылке будет автоматически передан номер заказа и сумма к оплате. Покупателю останется только указать реквизиты карты и завершить процедуру. Пример подключения платежного сервиса (на примере сервиса Т-Банка):

• Установить на странице сайта виджет платежной системы:

  <script src="https://securepay.tinkoff.ru/html/payForm/js/tinkoff_v2.js"></script>

• Активировать дополнительную функцию "Универсальная форма подтверждения заказа", которая позволяет задавать шаблон сообщения для покупателя об успешном заказе.
• Разместить на странице сайта в шаблоне сообщения об успешном заказе кнопку перехода к оплате, например:

  <div id="easynetshop-custom-orderfinalform">
   Спасибо! Вы успешно оформили заказ №{%zakaz%} на сумму {%itogo%} руб.<br>
   Информация о деталях заказа направлена на вашу почту: {%email%}
   <form onsubmit="pay(this); return false;">
    <input class="tinkoffPayRow" type="hidden" name="terminalkey" value="Код магазина в системе Т-Банка">
    <input class="tinkoffPayRow" type="hidden" name="frame" value="true">
    <input class="tinkoffPayRow" type="hidden" name="language" value="ru">
    <input class="tinkoffPayRow" type="hidden" name="amount" value="{%itogo%}">
    <input class="tinkoffPayRow" type="hidden" name="order" value="{%zakaz%}" >
    <input class="tinkoffPayRow" type="hidden" name="description" value="Заказ {%zakaz%} в Название магазина">
    <input class="tinkoffPayRow" type="hidden" name="email" value="{%email%}">
    <input class="tinkoffPayRow" type="submit" value="Оплатить">
   </form>
  </div>