10 бесплатных примеров пользовательского интерфейса корзины покупок на CSS и JavaScript

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

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

Плоская тележка

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

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

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

См. Pen Flat Cart [codepen comp] Уилла Пейджа

Пользовательский интерфейс без таблиц

Многие страницы оформления заказа используют таблицы для организации данных, но в этом примере Алекса Родригеса вместо этого используются DIV .

Он полностью адаптивен, поэтому макет должен отлично выглядеть независимо от того, какое устройство вы используете. Каждая строка содержит достаточно данных для правильного изменения стиля и организации всего, даже на очень маленьких экранах. А код CSS использует Compass для экономии времени, а также бесплатные Google Fonts для небольшого стиля.

См. Корзину для покупок без стола, адаптируемую к ручке, от Алекса Родригеса.

Вкусная корзина

Я не могу представить, чтобы это работало на реальном сайте, но в качестве эксперимента с UI/UX это довольно круто. Одноименная Delicious Shopping Cart действует как интернет-магазин пекарни/кондитерских изделий с фотографиями различных десертов.

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

Все это построено на Sass, Slim и jQuery, так что это чертовски крутой интерфейсный проект! Если вы хотите проанализировать отличный код, этот пример стоит сохранить.

Взгляните на корзинку Pen Delicious от Didier

Отзывчивый дизайн

Вот еще один простой адаптивный пользовательский интерфейс корзины покупок, созданный на Sass и без таблиц.

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

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

Взгляните на адаптивную корзину для покупок от Джастина Клемма.

jQuery корзина для покупок

Эта ручка больше похожа на каркас, чем на полноценную страницу оформления заказа, но она идеальна в качестве отправной точки. Разработчик Хуррам Алви создал эту адаптивную корзину для покупок с помощью базового HTML/CSS и небольшого количества jQuery.

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

См. Корзину для покупок jQuery, адаптируемую к ручке, от Khurram Alvi

Тележка вызова

Время от времени появляются новые задачи CodePen, в которых разработчикам предлагается создать различные интерфейсы, такие как страницы регистрации или модальные окна. Эта ручка от Ziga Miklic возникла в результате вызова пользовательского интерфейса корзины покупок и является шедевром разработки интерфейса.

Когда вы добавляете/удаляете товары из корзины, вы заметите, что цены автоматически обновляются с небольшой скользящей анимацией. Вы также можете щелкнуть любое изображение продукта, чтобы легко удалить его из корзины. Эти небольшие функции значительно улучшают интерфейс и упрощают клонирование.

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

См. Корзину для покупок Pen [ CodePen Challange ] от Ziga Miklic

Интерфейс скользящей корзины

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

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

См. Корзину для покупок Pen (адаптивную) от Алекса

Динамический магазин и корзина

Объединение магазина и корзины в одном интерфейсе — сложная задача, но Оливия Ченг справилась с этой задачей.

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

См. Корзину для покупок и магазин Pen Sliding от Оливии Ченг

Чистая корзина

Разработчик Барт Венеман создал эту чистую корзину покупок как простой шаблон интерфейса. Он автоматически рассчитывает общую стоимость и даже включает налоги рядом с кнопкой оформления заказа.

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

См. Корзину для покупок Pen от Барта Венемана

Простая корзина с Vue.js

Программирование внешнего интерфейса с помощью Vue.js значительно упрощает создание шаблонов. И эта ручка — один из примеров динамической тележки, практически построенной на основе JavaScript.

Корзина автоматически обновляется при каждом нажатии, поэтому вы можете добавлять/удалять товары и мгновенно видеть результаты. Кнопка в правом верхнем углу открывает вашу текущую корзину в модальном окне с использованием модального компонента Bootstrap.

Если вам нравится синтаксис Vue.js, то этот шаблон — отличное место для начала создания корзины покупок. Его легко настроить, и он должен хорошо работать во всех браузерах.

См. Корзину для покупок Pen VueJS 2 Simple от Cristian Matos

Корзина доменов

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

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

См. Корзину для покупок, реагирующую на ручку — Brand v01 от Jesse Bilsten