Как сделать корзину на лендинге
Оформление корзины на сайте, или как не мешать клиентам сделать заказ
Большая конкуренция привела к тому, что уже мало эстетично представить товары и добавить кнопку «Купить». Важно организовать легкий и быстрый способ оформления заказа, чтобы клиент не оставил корзину с товарами. О том, как это правильно сделать, поговорим ниже.
Если ваш сайт предлагает только услуги (сайты доставки не в счёт) или вы работаете в промышленном сегменте, то, возможно, вам не нужна корзина на сайте. В остальных же случаях она обязательна.
Ссылку на корзину лучше всего располагать в шапке сайта и рядом давать краткую информацию о количестве добавленных товаров и сумме заказа.
Основные элементы корзины
Для начала определим, что же должна содержать страница (или страницы) корзины.
Заголовок. Как бы это банально ни звучало, но обязательно укажите название страницы, чтобы сориентировать пользователя.
Понятный заголовок на странице корзины:
Не сразу ясно, что это страница корзины:
Таблица с товарами. Лучше оформлять список товаров виде таблицы, так как такой вариант легче воспринимается.
В таблице необходимо добавить:
Пример корзины с заполненной таблицей:
В данной таблице нет возможности выбрать количество товара:
Форму для ввода промокода. Если на вашем сайте предусмотрены промокоды, то данную форму можно разместить под таблицей с товарами.
Итоговая стоимость заказа. Эту информацию можно размещать как под таблицей с товарами, так и после формы заказа.
Например, можно показывать итоговую стоимость внизу страницы после того, как клиент выбрал способ доставки, который будет включен в эту сумму:
Форма заказа. Можно разместить как на странице с корзиной, так и на отдельной странице. Хотя все-таки рекомендуем второй вариант, так как при настройке целей будет лучше видно, на каком шаге уходят клиенты.
В форме нужно запросить следующую информацию:
Пример формы заказа:
Форма регистрации/авторизации. Если на вашем сайте есть личный кабинет, то на странице заказа следует предложить зарегистрироваться или авторизироваться, но всегда нужно давать возможность сделать заказ без регистрации. Так вы не отпугнете новых пользователей.
В этом примере пользователю ненавязчиво предлагают оформить личный кабинет позже:
Подробнее о том, какими должны быть формы на сайте, можно узнать в нашей предыдущей статье.
Частые ошибки
Теперь, когда мы понимаем, что должно быть на странице корзины, обсудим основные проблемы, с которыми сталкиваются пользователи.
Нельзя перейти на страницу корзины. Отображение списка товаров в виде выпадающего меню или во всплывающем окне неудобно. Обязательно создаем отдельную страницу.
Сложно найти ссылку на корзину. Расположение кнопки в непривычном месте, например, под боковым меню явно доставит проблем пользователям при ее поиске. Как уже говорилось выше, лучше всего добавить ссылку на корзину в шапке сайта.
Неявное добавление товара в корзину. Лучше всего выводить всплывающее окно с предложением перейти в корзину или продолжить покупки, чтобы пользователь заметил его.
Заметное всплывающее окно после добавления товара в корзину:
Изменение названия не сразу заметно, как и сама кнопка:
Нельзя сделать заказ без регистрации. Всегда должна быть возможность сделать «быстрый заказ», а зарегистрировать пользователя можно позже.
Нет информации о наличии товара. Если на вашем сайте часть товаров доступна только под заказ, пользователя стоит предупредить об этом как в карточке товара, так и на странице корзины.
Пример отображения статусов в корзине:
Не отображаются этапы заказа. Если вы разделили процесс заказа по шагам, то укажите и в виде меню, чтобы сориентировать пользователя. Процесс заказа должен быть прозрачным:
В форме заказа слишком много полей для ввода. Подробная форма для адреса, запрос дополнительных телефонов, контактных лиц и т.д. нужно убирать, чтобы не отталкивать клиентов.
Например, ввод адреса можно заменить одним полем с картой:
После отправки данных формы ничего не происходит. Покажите сообщение в виде всплывающего окна, а лучше на отдельной странице. В сообщении следует указать, что заказ оформлен и что пользователю делать дальше: ждать звонка/письма, перейти в личный кабинет чтобы проверить статус заказа, ожидать sms-сообщения из пункта выдачи и т.д.
Пример сообщения после отправки данных формы заказа:
Дополнительные советы по корзине
И предлагаем еще немного улучшить процесс заказа, проработав следующие пункты.
Автоматическое обновление цены. Не нужно заставлять пользователя дополнительно нажимать кнопки «Обновить» после изменения количества товаров.
Добавление товара в избранное. Если у вас есть такой раздел, то стоит напомнить о нем на странице корзины. На случай, если пользователь пока думает над покупкой.
Изменение характеристик товаров на странице корзины. Например, пользователь решил изменить размер выбранной обуви или цвет гаджета, позвольте ему сделать это прямо в корзине.
Пример изменения размера и цвета выбранной блузки:
Добавляйте возможность вернуть удаленный товар. Быть может, пользователь удалил его случайно.
Добавляйте информацию об акциях для выбранных товаров, особенно, если эти акции мотивируют добавить больше товаров.
Пример размещения информации об акции:
На странице корзины можно допродать сопутствующие или похожие товары. Например, предложите напитки и салаты к заказу пиццы:
Вот основные советы, которые помогут сделать корзину для сайта понятнее и удобнее. После внесения изменений обязательно вставайте на место клиента и пробуйте сделать заказ. Это поможет заметить очевидные недочеты и наверняка сократит количество отказов от покупки.
Если нашли на своем сайте ошибки в оформлении корзины и не знаете, как их исправить – оставьте заявку тут (сначала оценим сложность работ и только потом выставим счет).
Если хотите, чтобы мы проверили верно ли настроены цели метрики и какие ошибки мешают посетителям именно вашего сайта покупать больше – закажите экспресс-аудит корзины.
Одностраничный магазин с корзиной на Phalcon + AngularJS + Zurb Foundation
Введение
Всем привет! Завтра у меня дедлайн по проекту, который я делаю для местной Камчатской компании по доставки еды. И поэтому у меня есть две причины написать эту статью, первая — прокрастинация перед дедлайном, а вторая — я не нашёл на Хабре какого-либо обучающего мануала по написанию корзины товаров на AngularJS.
Я нашёл статью на стороннем блоге, которая частично помогла мне решить пару задач, которые стояли передо мной. Но оформление статьи оставляло желать лучшего, да и за 5 лет я уже отвык от кода в блокноте, без подсветки синтаксиса, поэтому нужно было как-то структурировать и сделать более читабельной эту полезную информацию.
Почему был выбран формат одностраничного магазина?
Кто-то из вас, наверное уже знает, что на Камчатке существует проблема с интернетом, так как наш полуостров ещё не связан с материком оптоволокном, и весь поток идёт через единственную вышку. К концу 2015 года планируется завершить работы по прокладке оптоволокна по дну Охотского моря, и возможно у нас появится наконец-то стабильный и быстрый интернет.
И соответственно чтобы исключить потери клиентов, переходящих по разным категориям блюд, из-за нестабильного канала, была выбрана подобная модель. То есть человеку достаточно один раз загрузить сайт и получить всю необходимую информацию, и сделать заказ.
Так же такой формат позволил избежать хранения товаров корзины в сессиях, localStorage или же в базе данных. Так как мы точно знаем, что человек никуда не уйдёт с этой страницы, мы храним данные корзины в объекте javascript. Ещё одним плюсом стало уменьшение времени заказа, так как нет нужды перемещаться по категориям, и загружать новые страницы. И так как позиций блюд не слишком много, нам даже не пришлось делать Ajax-подгрузку данных при нажатии на категорию, всё подгружалось из кеша базы данных.
База данных
После того, как был готов и свёрстан дизайн одностраничного сайта, пришло время создать структуру базы данных категорий и товаров. Это наверно самый быстрый и самый простой этап, учитывая наши потребности и направленность на простоту работы системы и взаимодействия с пользователями. У меня уже был набросок админки на Phalcon PHP Framework, поэтому поправить его для работы с двумя таблицами category и products, не составило особого труда.
Таблица category 
Таблица products 
Вот так выглядит админка сайта
Получаем категории и блюда из базы данных
Для работы с базой данных использовалась стандартная ORM система фреймворка Phalcon, если вы с ней не работаете, можете пропустить этот раздел, он для общего развития, чтоб дальше было понятно откуда ноги растут, точнее откуда и как берутся блюда на сайте.
В основном контроллере IndexController.php в модуле frontend, я написал функцию, которая сформирует данные нужным нам образом и выведет их на единственную нашу страницу.
Возможно есть более изящные решения этой задачи, но у нас не будет больше 200 посетителей за день, и мы подключим кеширование запросов к базе данных, и в принципе не будет такой сильной нагрузки, тем более это Phalcon — «Самый быстрый PHP фреймворк». Но вопрос сейчас не о производительно и оптимизации, это пока рано, главное что пора выводить товар на странице.
Кому доверить рендеринг товаров на странице? AngularJS или Phalcon?
Сначала я реализовал всё на AngularJS, ну это было как-то изящнее и красивее, но потом задумался о СЕО-оптимизации, и индексации поисковыми системами, и подумал что лучше наверно не рисковать, и рендеринг доверить нашему старому доброму любимому PHP.
Приводить код выводящий товары на странице я тут не буду, как из соображений величины этого кода, так и из этических соображений, всё таки это продукт нашего заказчика. Да и думаю, кто читает Хабр знает как пользоваться функцией foreach в php.
Ну ладно, покажу как я выводил категории блюд, а там уже по примеру каждый разберётся и с товарами.
Выглядит это всё дело очень и очень аппетитно.
Добавление товара в корзину
Нажимая на категорию, внизу открывается таб с блюдами из этой категории. Возможно кто-то из вас уже не может смотреть на эти аппетитные картинки, но для продолжения описания работы одностраничного магазина, мне просто необходимо показать вам, как выглядит карточка товара на сайте. Смотрите.
Так, а теперь вытирайте слюни с клавиатуры, и поехали дальше, смотреть как же работает основной функционал добавления в корзину и высчитывания конечной суммы заказа.
В основном для понимания основы вам нужно видеть только этот отрезок кода, который выводит кнопку «Добавить» с полем, куда можно ввести количество штук блюда.
Как видно из исходного кода, функция addCart() выполняет добавление данных в объект javascript, давайте посмотрим исходный код на AngularJS.
И соответственно код.
Кстати, функция ng-cloak просто выручает в условиях Камчатского интернета, если её не использовать, пока человек будет ждать загрузку страницы, ему будет видна пустая корзина со страшными символами. Для тех кто не знаком с AngularJS, укажу на несколько ключевых моментов.
Это нужно, чтобы показывать корзину, только в случае если в ней есть товары.
Этот код выводит конечную сумму заказа, форматируя число, и убирая копейки, которые могут получится, при высчитывании 10% скидки, например в случае самовывоза.
У меня часто возникала задача удалить элемент ассоциативного массива, я каждый раз забывал как это делать, и обращался к Google, но надеюсь после этой публикации я наконец-то запомню, а те кто не знал, узнают.
А что, кто-то рассчитывал что будет больше кода? Можно кстати даже в одну строчку написать. Но не будем изгаляться, нам главное читабельность кода. И наверно последнюю функцию которую я хочу привести в этой статье — это подсчёт конечной суммы заказа. Он был выполнен исходя из условий и способов доставки.
Чем объяснять откуда растут цифры, я просто покажу блок с информацией о доставке, а вы уже сами разгадаете откуда появились разные цифры в коде. Тем более у каждого эти данные будут разные, и будет разное количество районов, поэтому не вижу смысла заострят на этом внимание, тем более статья и так уже получилась достаточно объёмная.
Послесловие
Главная задача моего поста решена, теперь на Хабре есть материал, о том как сделать добавление товаров в корзину и подсчёт суммы заказа на AngularJS, а в интернете есть хорошо оформленный материал об этом, который дополнит запись из стороннего блога, ссылку на который я привёл в начале статьи. Ну а так же, я уже достаточно прокрастинировал, поэтому пора приступать снова к работе, и заканчивать отправку заказа нашему заказчику. Надеюсь статья поможет таким же как я. Если у вас всё же возникнут вопросы по приведённому исходному коду, или что-то будет не понятно, я с удовольствием отвечу в комментариях. К сожалению опыт работы с AngularJS всего пол года, поэтому чем смогу, тем помогу. Спасибо за ваше внимание.
Обновление
Спасибо всем за комментарии, я постарался исправить недочёты и описал проделанную работу в следующей публикации — «Одностраничный магазин на Phalcon PHP + AngularJS. Работа над ошибками».
Как сделать товарный лендинг, который продает?
Попав на ваш сайт eCommerce, потенциальный клиент может взять курс на совершение покупки, а может незамедлительно ретироваться. Если с ресурсом или товарным лендингом что-то не так, вы рискуете потерять значительную часть покупателей раньше, чем те успеют попасть в воронку продаж.
Подобный сценарий вас не устраивает? В таком случае вам стоит провести «диагностику» сайта, и при необходимости «отремонтировать механизмы», отвечающие за уровень конверсии.
Согласно модели поведения Фогга, вероятность совершения человеком того или иного действия определяется как:
мотивация * сложность действия * триггер
А вот как это выглядит в графической форме:
Если уровень мотивации высок, но на пути к цели встречаются серьезные препятствия, человек будет испытывать раздражение. Если действие является простым, но мотивация к его выполнению практически отсутствует, человеку будет скучно.
Американский интернет-магазин Staples отправляет новым клиентам электронные письма, предлагая ознакомиться с ассортиментом. Так пользователи получают мотивацию к действию. Перейдя по ссылке в письме, человек попадает на товарный лендинг. Описание продукта, без сомнений, является одним из самых эффективных инструментов для мотивации потребителей.
Безусловным преимуществом Staples является простота оформления заказа. Для того, чтобы совершить покупку, нужно знать только пароль. Пара кликов — и товар уже в пути.
Как сделать интернет-магазин дружелюбнее к пользователям?
Прежде чем человек оформит заказ, он должен добавить товар в корзину. Позаботьтесь о том, чтобы сделать это было максимально просто.
Кнопка «добавить в корзину»
Вы уже определились с цветом, формой и размером кнопки, позволяющей добавить товар в корзину? Прекрасно. Но не забудьте обеспечить обратную связь: сделайте так, чтобы нажавший на кнопку пользователь сразу же получал сигнал (в виде текста или графической отметки), подтверждающий совершение действия.
Взгляните на product page компании Threadless:
А теперь посмотрите, что происходит после того, как в корзину добавляется тот или иной товар:
Посередине товарной страницы открывается окно корзины, позволяя человеку убедиться в том, что он стал на шаг ближе к своей цели. Помимо прочего, окно содержит анимацию, которая играет роль своеобразного магнита для внимания пользователей. Впрочем, назвать эту корзину эталонной все же нельзя: после добавления товара соответствующая кнопка остается активной, что может смущать покупателей.
В интернет-магазине Ralph Lauren появляющееся после добавления товара окно исчезает спустя несколько секунд:
«Но почему бы не оставить окно корзины открытым?» — спросите вы.
Все дело в том, что в большинстве случаев посетитель интернет-магазина намеревается сделать только одну покупку. Таким образом, «положив» продукт в корзину, он не собирается изучать остальной ассортимент. Все, что ему нужно — как можно скорее оформить заказ.
Итак, пользователь добавил товар в корзину. Что должно произойти дальше?
Вы можете показать подтверждение совершенного действия и оставить человека на той странице, где он находится, либо отправить клиента прямиком на страницу оформления заказа.
Избрав первый путь, вы увеличиваете шансы на то, что клиент пополнит свой список покупок. Однако при этом растет риск того, что человек так и не доберется до страницы оформления заказа.
При втором варианте действий вы направляете посетителя прямо к «кассе». Вероятность того, что он уйдет от вас с пустыми руками, снижается. Но вместе с тем падают и ваши шансы продать что-то, кроме уже выбранного клиентом товара.
Amazon переправляет пользователя, добавившего продукт в корзину, на соответствующую страницу, которая помимо необходимой информации содержит также несколько upsell-предложений:
Выбирая ту или иную стратегию, вы должны ориентироваться на потребности вашей целевой аудитории. При этом необходимо помнить: ваша задача состоит не только в том, чтобы увеличить количество заключаемых сделок, но и в том, чтобы максимизировать доходность каждой покупки.
Чего люди хотят от сайта eCommerce?
Если вы стремитесь к тому, чтобы пользователи чувствовали себя комфортно, дайте им две вещи:
1. Необходимую информацию
У покупателя не должно возникать проблем, когда он хочет узнать, какие товары уже находятся в его корзине, сколько единиц того или иного продукта он включил в список, во сколько обойдется доставка и т. д.
Удобная система добавления (удаления) товаров и возможность выбрать способ оплаты дают покупателям ощущение полного контроля над ситуацией, что повышает уровень доверия с их стороны.
Корзина компании US Auto Parts полностью соответствует этим требованиям:
Страница содержит название, изображение и цену товара. Клиент без труда может добавить продукт в корзину или удалить его оттуда. Возможные способы оплаты указаны, внешний вид кнопки призыва к действию также не вызывает нареканий. Словом, у этой страницы есть все, чтобы генерировать прибыль.
В Gilt решили сделать ставку на простоту:
Придерживаясь принципов минимализма, многим компаниям удается добиваться весьма впечатляющих результатов. Впрочем, если говорить о представленной выше странице, следует отметить один недостаток, а именно дизайн всплывающего окна, диссонирующий с внешним видом остальных элементов сайта.
Визуальная иерархия
Хотите быть уверены в том, что покупателю не составит труда отыскать кнопку перехода к оформлению заказа? Возможно, вам стоит снабдить страницу сразу двумя такими кнопками (расположив одну из них выше корзины, а другую — ниже). Фирма 1800 Flowers поступила именно так:
Помимо двух кнопок перехода к оформлению покупки, также обращает на себя внимание кнопка, позволяющая оплатить заказ с помощью PayPal. Предложив клиентам различные способы оплаты, вы можете значительно облегчить им жизнь (но не перестарайтесь — чрезмерное количество вариантов заставит покупателей тратить слишком много времени на их изучение).
Поле для ввода бонусного кода
Представьте ситуацию: посетитель интернет-магазина видит на своем экране довольно крупное поле, в которое можно ввести код для получения скидки:
Проблема заключается в том, что у человека нет этого кода. Как он поступит в сложившейся ситуации? Возможно, он попробует отыскать заветный код на просторах Всемирной паутины. Если же его усилия не принесут успеха, вы можете попросту потерять клиента.
Разочаровать покупателя — самый надежный способ спровоцировать его на то, чтобы «бросить» корзину, так и не совершив покупку.
Вместо поля для ввода бонусного кода можно использовать текстовую ссылку. У обладателей кода едва ли возникнут проблемы с тем, чтобы найти ему применение.
Не скрывайте своих достоинств
Ваш интернет-магазин может похвастаться уникальной системой скидок, молниеносной доставкой и отзывчивой службой поддержки? Было бы странно с вашей стороны не напомнить об этом посетителям. Компания Asos, к примеру, заявляет о своих достоинствах без ложной скромности:
Не трогайте «брошенные корзины»
Человек, зашедший в супермаркет и набравший целую тележку продуктов, не может оставить ее там, чтобы вернуться через пару дней и уже тогда оплатить покупки. Однако представители электронной коммерции вполне могут предоставить клиентам такую возможность. Продукты, лежащие в виртуальной корзине, никогда не испортятся, а потому нет никакой необходимости возвращать товары из «брошенных корзин» обратно на «полки».
Человек ушел, так и не оформив заказ? Отправьте ему email с напоминанием и убедитесь в том, что корзина ждет своего хозяина в том виде, в каком он ее оставил.
Не заставляйте пользователей подписываться на вашу рассылку
Возможно, во времена становления электронной коммерции просить у покупателя указать email перед оформлением заказа и было хорошей идеей. Однако с тех пор реалии рынка успели сильно измениться. Каждый четвертый отказ от покупки происходит по причине чрезмерного желания представителей eCommerce заполучить адрес электронной почты клиента. Людям не нравится, когда на них давят.
Признанный специалист в области проектирования пользовательского опыта Джаред Спул (Jared Spool) приводит пример:
«Одна из компаний, работающих в сфере eCommerce, теряла огромные деньги из-за неудачной формы оформления заказа. Форма была предельно проста, и включала в себя два поля (для адреса электронной почты и пароля), две кнопки («вход в систему» и «регистрация»), а также одну ссылку (служившую для восстановления пароля). В чем же была проблема?
Дело в том, что компания просила новых покупателей, добравшихся до этапа оформления заказа, зарегистрироваться на сайте. В обмен на предоставленную информацию люди могли получить возможность совершать покупки по упрощенной схеме. Взаимовыгодная сделка, верно?
Оказалось, что покупатели думали иначе. В ходе тестирования юзабилити сайта выяснилось, что принудительная регистрация откровенно раздражает пользователей. Люди не желают строить взаимоотношения с интернет-магазином — они просто хотят купить то, что им нужно.
Как правильно организовать процесс регистрации?
Работа с вернувшимися и новыми клиентами
Ваш интернет-магазин посетил человек, который уже делал у вас покупки раньше? В таком случае, вам стоит предоставить ему возможность авторизоваться без лишних сложностей. А что делать с новым клиентом? Можете предложить ему создать аккаунт до совершения покупки, а можете отложить этот вопрос до момента, когда заказ будет оплачен.
Веб-сайт Diamond Candles и вовсе создает аккаунты самостоятельно. Информация обо всех покупках, которые человек сделал в статусе незарегистрированного пользователя, сохраняется на сайте. Таким образом, если в итоге этот человек все-таки создаст аккаунт, он сможет ознакомиться с полной историей своих заказов.
Nana Macs предлагает за регистрацию скидку в 5%:
Этап оформления заказа
Терять покупателя, который уже «открыл кошелек», весьма неприятно. Вы должны позаботиться о том, чтобы добравшийся до стадии оформления заказа клиент не встретил на завершающем участке своего пути никаких препятствий.
Начните с простых вопросов
Большинство людей знает свой адрес, в то время как реквизиты кредитной карты помнят далеко не все. Предложите покупателю сначала те поля, заполнение которых не потребует лишних усилий.
Пример страницы, созданной в соответствии с данным принципом:
Если человек сомневается, что информация, которую он предоставит интернет-магазину, будет использована строго по назначению, он вряд ли станет иметь с ним дело.
Заключение
Вы убеждены в том, что можете сделать ваш сайт eCommerce эффективнее, но не знаете, с чего начать? Попробуйте взять в качестве точки отсчета процесс оформления заказа и перейти к товарным лендингам.