Flamio.ru

Работа и деньги
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Корзина на сайт

Как с помощью CSS и JavaScript создать пользовательский интерфейс корзины интернет-магазина

В этом руководстве мы создадим корзину для сайта с использованием HTML и CSS3 . При этом мы применим Google Fonts ( шрифт « Roboto » ).

Шаг 1: Создадим HTML-структуру.

Сначала нужно создать контейнер div , который мы назовем « .shopping-cart ».

Внутри него у нас будет заголовок и три пункта, которые будут содержать:

  • Кнопку « Удалить » и кнопку « Добавить в избранное »;
  • Изображение товара;
  • Название и описание товара;
  • Кнопки, с помощью которых можно задавать количество товара;
  • Итоговую цену.

Убедитесь, что при создании корзины для сайта на PHP вы подключили шрифт, который мы используем в этом руководстве. Теперь добавим основные стили для раздела body :

После этого создадим корзину с размерами 750 на 423 пикселя и зададим для нее стили. Обратите внимание, что мы используем flexbox , поэтому устанавливаем для свойства display значение flex , а для flex-direction – column . Потому что по умолчанию для flex-direction установлено значение row :

Теперь создадим первый элемент корзины для сайта на JavaScript , который будет названием товара. Для этого изменим значение высоты на 60 пикселей и зададим несколько основных стилей. Следующие три элемента — это товары в корзине. Для каждого из них мы установим высоту 120 пикселей и display: flex :

Мы задали основные стили. Теперь по порядку установим стили для товаров. Первыми элементами являются кнопки « Удалить » и « Добавить в избранное ».

Мне всегда нравилась анимация кнопок-сердечек Twitter . Я думаю, что она будет отлично смотреться в скрипте корзины для сайта:

Мы устанавливаем класс « is-active » при нажатии кнопки, чтобы анимировать ее с помощью jQuery , но об этом подробнее в следующем разделе:

Следующий элемент скрипта корзины для сайта HTML — это изображение товара, для которого нужно задать поле справа 50 пикселей:

Далее нужно задать стили для количества приобретаемого товара: кнопки для увеличения и уменьшения количества. Сначала мы создадим CSS корзины покупок для сайта, а затем заставим его работать с помощью JavaScript :

Полная стоимость товаров:

Также реализуем функцию адаптивности корзины для HTML сайта , добавив следующие строки кода:

Это все, что касается CSS .

JavaScript

Перед тем, как сделать корзину на сайте , создадим анимацию сердечек, которая будет запускаться, когда пользователь нажимает на них:

Теперь заставим работать кнопки количества приобретаемого товара:

И это наша окончательная версия корзины товаров для сайта :

Руководство завершено! Надеюсь, оно вам понравилось, и вы узнали что-то новое. Если у вас есть вопросы, напишите об этом в комментариях!

Данная публикация представляет собой перевод статьи « How to Create a Shopping Cart UI using CSS & JavaScript » , подготовленной дружной командой проекта Интернет-технологии.ру

Что такое корзина интернет-магазина

14 ноября 2017 Опубликовано в разделах: Азбука терминов. 17752

Простой пример: когда вы ходите по гипермаркету, то в руках носите корзинку, в которые складываете понравившиеся товары. На кассе вы можете за них расплатиться, и при этом становитесь их полноценным хозяином. В Интернете на сайтах, которые занимаются продажами, существуют подобные корзинки.

Бывает, что посетитель приходит в интернет-магазин, но уходит без покупок, зачастую бросая наполненную интернет-корзину. Причина этого часто кроется в непонятных ее функциях и сложностях при оформлении. Рассмотрим правила оформления идеальной веб-корзины на сайте.

Корзина заказов для сайта — как ее оформить

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

  • Расположение — в шапке сайта, идеально — в правом верхнем углу.
  • Иконка — интуитивно понятная, похожая на корзинку или сумку.
  • Иконка не должна быть похожа на баннер — подобные изображения “фильтруются” взглядом пользователя.
  • В верхнем углу интернет-магазина рядом с иконкой отображается количество товаров, которые лежат в корзине, и их общая стоимость.
  • Если в интернет-корзину добавлен хотя бы один товар — ее значок меняется на другой, уведомляющий, что в ней есть товар.

Примеры неудачно размещенных корзин

Веб-корзины, как таковой, нет. Есть какой-то личный кабинет, функции которого не понятны. Реализация подобного механизма покупки оттолкнет многих потенциальных клиентов.

Корзинка расположена не на привычном месте, к тому же она представлена в виде крупного навязчивого баннера — возможно, включится, “баннерная” слепота пользователя. К тому же, выглядит это довольно некрасиво.

Корзинка незаметная, так как нет иконки. Зато есть непонятная иконка “воронка”, которая отвлекает внимание от заказа.

Интернет-корзина на главной странице не отображается, и появляется только в момент выбора платка.

Механизм корзины — основные функции

После того, как посетитель выберет необходимые изделия, он должен перейти в интернет-корзину и оформить заказ.

Иконка в правом верхнем углу:

  • Картинка должна быть интуитивно понятной: корзинка, тележка, сумка и т.п. Не каждый человек поймет жест поднятого вверх пальца (“Ok”) или утвердительно кивающего человечка как приглашение к покупке.
  • Иконка должна быть доступной на всех страницах сайта и находиться на одном и том же месте.
  • В веб-корзине покупатель может работать с изделиями: просматривать, изменять варианты и количество, удалять, добавлять.
  • Корзина должна выдавать стоимость каждого товара отдельно, а также общую сумму товара.
  • Если магазин работает со скидочными купонами — то у посетителя должна быть возможность ввести код купона и увидеть цену изделий со скидками.
Читать еще:  Трафик из соцсетей на сайт

Как правильно реализовать функционал корзины

Приглашение к покупке:

  • Кнопка покупки рядом с товаром должна указывать на действие: “заказать”, “купить” и т.п. Если она содержит текст типа “хочу” — то это может быть интерпретировано, как обычное пожелание, но никак не покупка.
  • Если кнопка совершения покупки не содержит текст — она должна быть заметной, крупной и иметь понятную иконку.
  • Кнопка “Купить” должна размещаться на всех страницах сайта, где представлен продукт: как на блоках с кратким описанием (сам каталог), так и при переходе на страницу товара.
  • Если человек пытается положить в корзину товар, который там уже есть — то кнопка “купить” должна меняться на “товар уже в корзине”.
  • В самой корзине человек не должен запутаться. К примеру, если он желает увеличить количество изделий, то простые кнопки “+” и “-” должны помочь ему в решении данного вопроса.
  • Человек в любой момент должен иметь возможность вернуться из механизма заказа в сам интернет-магазин.
  • Кнопка возврата должна быть заметной и яркой.
  • Хорошим функционалом будет указание стоимости доставки прямо в корзине.
  • После оформления заказа “вежливый” интернет-магазин всегда благодарит своего покупателя.
  • Информацию о возврате покупок желательно продублировать в момент заказа.
  • Уместным виджетом является показ сопутствующих изделий и функция “откладывания” понравившегося товара.
  • Если человек не совершил покупку вчера, и пришел на сайт “сегодня” — в корзине должен остаться выбранный товар.

Запрос данных покупателя

Заполнение формы с данными

Длинные анкеты отрицательно влияют на факт совершения покупки, и принудительная подписка ее срывает. Двадцать полей формы, трудная каптча, подтверждение пароля по e-mail, несколько сменяющихся страниц влекут за собой “бегство” покупателя из корзины. Ваших конкурентов в Интернете очень много, а времени у покупателей мало. Поэтому покупатель уйдет от вас в тот интернет-магазин, который не будет требовать от него расширенных адресных данных.

Главный принцип — минимум полей

  • Если вы осуществляете продажи только по России — не заставляйте покупателей выбирать страну.
  • Возможно, разные адреса покупателя и доставки не нужны. Запрашивайте один адрес.
  • Если необходим ввод простых данных — не утруждайте покупателя выбором из готовых вариантов. Иногда проще такие данные ввести вручную. К примеру, проще написать “Воронеж”, чем выбирать город из длинного списка предложенных вариантов.
  • Не подписывайте человека принудительно на вашу рассылку.

Подписка на рассылку

Каждому продавцу хочется получить больше сведений о клиенте и подписать его на email-рассылку. Потом полученные данные можно использовать для уведомления об акциях, скидках и других интересных предложениях магазина. К сожалению, некоторые интернет-магазины подписывают покупателей на рассылку принудительно, причем, в письмах не предусмотрен функционал отписки от рассылки. Данные действия наказываются хостерами. Перед тем, как подписать человека на рассылку, магазин должен получить его осознанное согласие, а в каждом письме должна быть ссылка отписки от рассылки.

Виды покупок в интернет-магазине

На странице оформления следует создать три уровня покупки по сложности:

  • Быстрый — вводится e-mail или телефон, и вся дальнейшая работа происходит с менеджером. Если реализована возможность покупки в один клик — то посетитель не должен испытывать трудности, связанные с вводом лишних данных. К примеру, он может выбрать только 1 товар, нажать “купить в 1 клик”, и автоматически перейти к форме заказа.
  • Новый пользователь — после предложения регистрации предлагаются поля для ввода: ФИО, адрес, емейл, телефон, способы оплаты и доставки.
  • Зарегистрированный пользователь — человек входит под своим логин-паролем, и все его данные подставляются в форму автоматически.

Длительное отсутствие ответа менеджера интернет-магазина покупатели оценивают как оскорбление и неуважение к его времени. Поэтому необходимо предусмотреть моментальное уведомление менеджера о заказе. Это позволит ему мгновенно связаться с покупателем и подтвердить заказ.

Корзина покупателя на jQuery.

Плагин jqCart.

Когда писал предыдущую статейку на эту тему, которая преследовала цель всего лишь показать абстрактный пример реализации корзины покупателя, то не думал, что она породит такое количество вопросов и просьб, посыпавшихся и в самом блоге, и на мою почту, и т.д. Собственно, поэтому и решил написать этот плагинчик «jqCart«, но хочу сразу подчеркнуть несколько моментов:

  1. Хоть код и оформлен в виде плагина, но плагином его можно назвать с большой натяжкой. Да и вообще, в этом направлении, на мой взгляд, сделать плагин полностью универсальным — достаточно сложно;
  2. Писа́лся плагин на скорую руку, поэтому достаточно сыроват, хотя и вполне рабочий;
  3. На данный момент, код не документированный;
  4. Планирую ли я его дорабатывать? Да, но при достаточном количестве свободного времени;

Итак, для работы плагина требуется библиотека jQuery >= 1.8, которая должна быть подключена до подключения самого плагина. Работать должно во всех современных браузера и, по идее, даже в IE8. Проблема для старых «осликов», может заключаться только в применяемых CSS-свойствах и версии jQuery (напомню, что jQuery 2.x — не поддерживает Internet Explorer 6, 7, и 8). Данные передаются на сервер с помощью Ajax и поэтому, я крайне рекомендую использовать кодировку для файлов UTF-8 без BOM!

Читать еще:  Форма оплаты для сайта

В кнопках («Добавить в корзину»), должены быть прописаны следующие data-атрибуты:

  1. data-id — ID товара
  2. data-title — Наименование товара
  3. data-price — Цена товара
  4. data-img — URL фото товара (опционально)

Все значения вышеуказанных data-атрибутов, принимают участие при формировании окна корзины. Можно добавлять дополнительные data-атрибуты, значения которых будут отправлены с остальными данными в обработчик. Ключи в полученном массиве на сервере, будут соответствовать имени атрибута после «data-«, т.е. значение атрибута «data-somevalue», будет в массиве под ключем «somevalue» Тег для кнопки и её расположение на странице — значения не имеет.

В архиве найдете пример обработчика (handler.php) с подготовкой и отправкой письма на почту. В конце обработчика, обязательно должен быть ответ клиенту в формате JSON.

Где переменная $send_ok — булевое значение (true/false), в зависимости от результата обработки заказа. Если это будет отправка на почту, то можно так:

Ахтунг! В обработчике я не делал фильтрацию данных, поэтому внимательно и тщательно их обрабатывайте перед использованием, а особенно, если вы собираетесь записывать данные в БД!

  • Данные распределены по разным data-атрибутам кнопки
  • Добавлена возможность отображения фото товара в корзине
  • Добавлен параметр currency для вывода в корзине валюты рядом со стоимостью и ценой
  • Добавлена возможность передавать на сервер дополнительные данные, которые берутся из пользовательских data-атрибутов кнопки
  • Добавлена опция visibleLabel. Показывать ярлык при пустой корзине
  • Добавлена опция openByAdding. Автоматически открывать корзину при добавлении товара
  • Добавлена кнопка вывода заказа на печать
  • Исправлен расчет сумм с плавающей точкой

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

Правильная корзина товаров для сайта

В настоящее время ни один интернет-магазин не сможет обойтись без корзины, в которую посетители будут добавлять желаемые товары. В неком роде, корзина на сайтах аналогична корзинам «реальных» магазинов. Посетитель сайта, так же как и покупатель, помещает товары в корзину, чтобы оформить заказ. Благодаря корзине на сайте пользователь может отчетливо видеть, анализировать и систематизировать информацию о покупаемых им товарах и услугах, и, тем самым, распределять свой бюджет.

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

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

Основные элементы в корзине. Примеры реализации.

Информация о товаре в корзине

Помещенный клиентом в корзину товар должен содержать, как минимум, следующие поля: Название, Количество, Цена, Кнопка: «Удалить данный заказ». Также будет хорошо смотреться фото, краткое описание, наличие в магазинах и в зависимости от специфики товара некоторые его свойства (цвет, размер и т. д.).

На приведенном ниже рисунке клиенту предоставлена вся необходимая информация: присутствует фотография, характеристики, описание, количество, цена и кнопка удаления заказа.

Рисунок 1 — Корзины с полной информацией о товаре

Способы доставки товара

Поле «Информация о доставке» является очень важным. Уделите ему особое внимание. Очень часто пользователи прежде чем заказать товар, ищут условия доставки. В этом поле необходимо доводить до сведения пользователя информацию о различиях того или иного способа доставки и обязательно указывать цены.

Ниже представлены примеры реализации.

Рисунок 2 — Корзина с указанием стоимости доставки

Указана цена доставки. Покупателю предоставлен выбор способов получения товара. Ссылка ведет на подробную информацию о доставке.

На рисунке 3 предоставлены все возможные способы доставки с подробными пояснениями.

Рисунок 3 — Блок выбора способа доставки внутри корзины

Поле для скидок

Поле «Скидки» должно предоставлять пользователю информацию о выгоде покупки. На рисунке 4 указаны стоимости со скидкой и без нее. Это, как правило, мотивирует пользователей к действиям.

Рисунок 4 — Отображение стоимости заказа с учетом скидок

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

Рисунок 5 — Наличие специальных полей для скидок

Итоговая стоимость заказа

В этом поле должна быть указана окончательная стоимость товара. Она может включать в себя цену с учетом стоимости самого товара, доставки, каких-либо скидок и т.д. Не нужно вводить пользователей в заблуждение, предоставляя лишь промежуточную сумму покупки, иначе можно подорвать их доверие к Вашему сайту.

На рисунке 6 мы видим стоимость товарных позиций со скидкой и без нее с подробным отображением сумм. Такая реализация ведет к прозрачности сделок и улучшает отношение пользователей к сайту.

Рисунок 6 — Корзина товаров с указанием итоговой цены

Варианты оплаты заказа

Необходимо предоставлять клиентам возможность выбирать способы оплаты (наличный, безналичный расчет). Для удобства пользователей нужно интегрировать в интернет-магазин различные системы оплаты: Visa, Mastercard, Qiwi и т. д. Но не стоит использовать слишком много систем оплаты. Это может запутать посетителя, поэтому лучше внедрять системы, популярные в регионе Вашего интернет-магазина.

Читать еще:  Создать бесплатно сайт

Далее на рисунке показан пример реализации элемента оплаты заказа на странице корзины. Указаны способы оплаты и подробная сопутствующая информация.

Рисунок 7 — Выбор способов оплаты в корзине

Условия и гарантии

Пользователю будет проще принять решение о покупке, если ему предоставят подробную информацию о гарантиях и обязательствах компании, продающей ему продукцию.

На рисунке 8 можно заметить, что при покупке товара в корзине появляются текстовые поля: «Обратная связь» (возможность проконсультироваться с менеджерами по телефону), «Доставка» и «Оплата». При этом чуть ниже расположены кнопки «Подробнее о доставке» и «Подробнее об оплате», которые ведут на страницы с соответствующей информацией.

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

Рисунок 8 — Страница корзины со ссылками на страницы условий доставки и оплаты

Похожие и сопутствующие товары

При покупке пользователю рекомендуется предоставлять товары, которые бы дополнили его покупку. Например, на рисунке 9 видно, что при покупке перфоратора за 11223 рубля нам предлагают приобрести зубило (809 руб.), бур (1588 руб.) и другие товары, которые могут быть использованы совместно с перфоратором. Стоит отметить, что цены на сопутствующие товары не должны отпугивать пользователя. Оптимальная стоимость должна быть, как минимум, в 2 раза ниже стоимости основного желаемого товара. В нашем примере видно, что цены на сопутствующие товары повлияют на итоговую сумму незначительно и не испугают клиента. В связи с этим, велика вероятность приобретения и таких товаров.

Рисунок 9 — Корзина с предложением сопутствующих товаров

Помимо информации о сопутствующих товарах полезно будет рассказать пользователю и о похожих товарах. Рассмотрим пример: клиент собирается купить портативную акустику, находит нужную товарную позицию на сайте, нажимает кнопку купить, но выясняется, что этого товара на складе нет. В таких случаях и стоит предлагать клиенту похожие товары. Рисунок 10 показывает, что портативной акустики серого цвета нет в наличии, но есть такая же, только черная. Не факт, что клиент согласится купить черную. Может он всю жизнь искал именно серую акустику =) Но это единичные случаи. В основном, велика вероятность покупки похожего товара.

Рисунок 10 — Предложение похожего товара

Продолжение покупки на сайте

Нужно предоставить пользователю возможность выбора: перейти непосредственно в корзину для оформления заказа или же остаться в каталоге продукции для продолжения покупок. На рисунке ниже при заказе товара всплывает окно с возможностью выбора действий для покупателя.

Рисунок 11 — Возможность выбора действий в корзине

Завершение заказа

После оформления заказа клиенту нужно предоставить отчет о сделанной им покупке, предоставить ему доступ в личный кабинет с возможностью управления своим заказом. У покупателя должна быть возможность отменить заказ, отследить статус доставки, если это необходимо и т. д. Также в личном кабинете можно хранить информацию об отложенных покупках. На примере ниже указан простой отчет о проделанной покупке с возможностью захода в личный кабинет.

Рисунок 12 — Отчет о завершении сделки

Кнопки «Купить» или «Заказать»

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

Рисунок 13 — Кнопки для интернет-магазина

Элементы «Социальные сети»

Стоит добавить возможность взаимодействия с пользователями через социальные сети. На рисунке 14 в нижней части интерфейса корзины указаны блоки социальных сетей. Это позволяет усилить вероятность того, что посетитель станет постоянным клиентом нашего интернет-магазина. Стоит отметить, что взаимодействие с пользователями через соцсети не всегда эффективно. Это зависит от специфики интернет-магазина. Например, продажа запчастей или отделочных материалов не требует привязки к социальным сетям, а вот в магазине игрушек или одежды внедрение такого блока сможет повысить продажи и увеличить лояльность клиентов. Причин тут множество. Обозначим самые основные:

1. Большая численность целевой аудитории,

2. Легкость и удобство подачи новостных презентационных материалов,

3. Постоянная обратная связь посетителя (клиента) и администратора (продавца).

Рисунок 14 — Блоки социальных сетей на странице «корзина»

Немного о юзабилити корзин для интернет-магазинов

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

Ссылка на основную публикацию
Adblock
detector