От автора: если вам нужно увеличить средний чек в интернет-магазине, то одно из наиболее простых и логичных решений, которые приходят в голову, — это создание онлайн-корзины для покупателя. С ее помощью человек сможет приобрести не один товар, а сразу несколько за раз. Решение кажется банальным, однако, многие предприниматели до сих пор не пришли к нему. Прочитайте эту статью, если хотите узнать, как сделать корзину на сайте интернет-магазина быстро и правильно.
В любом более-менее крупном обычном магазине посетителю на входе предлагается специальная тара, куда он сможет складывать свои покупки. Еще в ХХ в. это решение было введено для клиентов не только для удобства переноса товаров, но и для стимулирования совершения как можно большего числа покупок. Согласитесь, как-то глупо зайти в магазин, взять корзину и переносить в ней одну маленькую пачку чипсов? Обязательно, так или иначе, добросишь чего-нибудь запить.
Примерно таким же образом действует и корзина в интернет-магазине. Она значительно упрощает процесс приобретения нескольких товарных позиций и увеличивает средний чек. Разумеется, фактор «давления» на покупателя существенно ниже по сравнению с офлайн-точками за счет отсутствия физической необходимости переносить товар и ходить с пустой тарой перед другими людьми, однако, он все же присутствует.
Находитесь на самом старте создания онлайн-проекта? Тогда лучше начните с базовых курсов по разработке интернет-магазина. Уже более-менее знаете толк в этой теме? Тогда переходим непосредственно к созданию веб-корзины для сайта.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Пошаговая инструкция по созданию корзины
Существуют разные версии корзин, однако, мы рассмотрим разработку классического модуля для интернет-магазинов, созданного на базе PHP. Как правило, его размещают на видном месте — в шапке сайта в правом верхнем углу. Маленькая корзина представляет собой своеобразный индикатор, показывающий, сколько товаров, и на какую сумму вы собираетесь приобрести.
Итак, пошаговая инструкция по тому, как создать корзину для интернет-магазина:
1. Откройте файл под названием header.php. Он находится в корневой папке вашего сайта. Далее вставьте в верстку базовые значения нашей будущей корзины:
|
1 2 3 4 |
<div class="smalcart"> <strong>Товаров в корзине:</strong><?=$smal_cart['cart_count']?> шт. <br/><a href=''>Оформить заказ</a> </div> |
В данном случае используется содержимое массива $smal_cart. Он станет доступен в основном шаблоне интернет-магазина несколько позже. Для этого потребуется провести еще ряд определенных действий.
2. Чтобы корзина обладала простым и гармоничным видом, добавьте в файл style.css следующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#header .smalcart { float: right; height: 55px; padding: 10px; padding-left: 15px; margin: 10px; border: 1px solid gray; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #E6DEEA; } |
После этого уже можете взглянуть на визуальные изменения во внешнем виде интернет-магазина.
3. Теперь нам с вами нужно углубиться в системную структуру корзины. В связи с тем, что модуль корзины не является отдельной страницей, дополнительный контроллер под нее можно не создавать. Внешний вид уже отображен в шаблоне, поэтому разработку views не делаем. Ограничимся лишь проработкой параметра model.
Для этого зайдите в папку application, а затем в models. После этого создайте файл с названием cart.php. В него добавляете следующее содержание:
|
1 2 3 4 5 6 7 8 9 10 |
class Application_Models_Cart { function addToCard($id, $count=1) { $_SESSION[‘cart’][$id]=$_SESSION['cart'][$id]+$count;return true; } function delFromCart($id, $count=1){} function clearCart(){} } |
Эта модель позволить обновлять данные, содержащиеся в содержимом модуля корзины. Пока что хватит лишь функции добавления товара, однако, на будущее необходимо разработать специальные интерфейсы, чтобы была возможность удалить определенный товар или же очистить корзину целиком.
Информация о товарах в корзине будет содержаться в массиве $_SESSION. Он представляет собой ассоциативный массив, в котором ключами являются ID продукции, а значением — количество товаров, добавленных в корзину. Стратегия минимализма позволит упростить процесс передачи информации в cookies.
Таким образом, мы получили готовую базу Application_Models_Cart. Теперь необходимо ее активировать.
4. Перед этим давайте еще внесем изменения в атрибут href для более правильной работы модуля:
|
1 |
<a href="/catalog?in-cart-product-id=<?=$item['id']?>">В корзину</a> |
Теперь ссылка будет иметь следующий вид: //примерсайта.ru/catalog?in-cart-product-id=1
При нажатии на эту ссылку система mvc перенаправит руководство в раздел application/controllers/catalog.php. В свою очередь, здесь мы тоже внесем небольшие поправки.
5. Вставьте следующий код для нужного нам сценария:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class Application_Controllers_Catalog extends Lib_BaseController { function index() { if($_REQUEST['in-cart-product-id']) { $scart=new Application_Models_Cart; $cart->addToCart($_REQUEST[‘in-cart-product-id’]); Lib_SmalCart::getInstance()->setCartData(); header('Location: /catalog'); exit; } $model=new Application_Models_Catalog $items =| $model->>getList(); $this->Items=$Items; } } |
В принципе, на этом можно остановиться. Основа нашего модуля корзины для интернет-магазина готова. Единственное что — давайте еще отдельно заострим внимание на строке Lib_SmalCart::getInstance()->setCartData(), которая была указана в представленном выше коде. Слабо разбирающиеся в ООП люди явно не поймут, в чем заключается ее основная роль в общей структуре, поэтому давайте разберем каждый отдельный кусочек кода:
Lib_SmalCart — позволяет создать модуль класса SmalCart, который расположен в разделе lib.
getInstance() — с помощью этой команды происходит вызов каждой отдельной функции. Основная ее задача — отсеять повторные попытки образования экземпляра того же класса.
setCartData() — позволяет упорядочить информацию о продуктах из корзины и записать сессию в cookies. В свою очередь, это гарантирует пользователям сохранение данных о заказе даже при случайных переходах на другие сайты или вовсе при закрытии страницы браузера.
Чтобы иметь более четкое представление касательно работы корзины, снова откройте файл в разделе lib под названием smalcart.php. После проделанных ранее операций все основные точки соприкосновения станут уже более понятны и логичны. Стоит отметить, что, если cookies будут отключены, тогда механизм работать должным образом не сможет. Связано это с тем, что передача идентификатора сессии осуществляется как раз-таки благодаря этим cookies.
Кстати, если вы профессионально решили заниматься созданием интернет-магазинов или же сайтов разных направленностей, тогда рекомендуем ознакомиться с этим 30-дневным курсом. В нем содержатся фундаментальные знания по разработке адаптивных онлайн-проектов с целью их дальнейшей монетизации. Если хотите на один или даже несколько уровней повысить свою квалификацию, тогда обязательно изучите приведенный выше курс.
Ну как вам? Материал был полезен, и чтение прошло не зря? Тогда поделитесь статьей со своими друзьями и коллегами в социальных сетях. Быть может, кто-то из них как раз не может найти качественное решение этой проблемы.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Спасибо, что читаете наши статьи. С каждым разом мы стараемся преподнести контент в еще более интересном и полезном ключе. Всего доброго, до новых встреч!
Комментарии (1)