Как сделать корзину для сайта на javascript
Перейти к содержимому

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

  • автор:

Корзина для сайта магазина с помощью CSS и JavaScript

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

Обновлено: 2023-04-10 19:46:19 Вадим Дворников автор материала

HTML

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

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

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

  • Кнопку « Удалить » и кнопку « Добавить в избранное »;
  • Изображение товара;
  • Название и описание товара;
  • Кнопки, с помощью которых можно задавать количество товара;
  • Итоговую цену.
 
Shopping Bag
Common Projects Bball High White
$549
Maison Margiela Future Sneakers White
$870
Our Legacy Brushed Scarf Brown
$349

CSS

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

* < box-sizing: border-box; >html, body

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

.shopping-cart

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

.title < height: 60px; border-bottom: 1px solid #E1E8EE; padding: 20px 30px; color: #5E6977; font-size: 18px; font-weight: 400; >.item < padding: 20px 30px; height: 120px; display: flex; >.item:nth-child(3)

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

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

.buttons < position: relative; padding-top: 30px; margin-right: 60px; >.delete-btn, .like-btn < display: inline-block; Cursor: pointer; >.delete-btn < width: 18px; height: 17px; background: url("delete-icn.svg") no-repeat center; >.like-btn

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

.is-active < animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards; >@keyframes animate < 0% < background-position: left; >50% < background-position: right; >100% < background-position: right; >>

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

.image < margin-right: 50px; >Let’s add some basic style to product name and description. .description < padding-top: 10px; margin-right: 60px; width: 115px; >.description span < display: block; font-size: 14px; color: #43484D; font-weight: 400; >.description span:first-child < margin-bottom: 5px; >.description span:last-child

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

.quantity < padding-top: 20px; margin-right: 60px; >.quantity input < -webkit-appearance: none; border: none; text-align: center; width: 32px; font-size: 16px; color: #43484D; font-weight: 300; >button[class*=btn] < width: 30px; height: 30px; background-color: #E1E8EE; border-radius: 6px; border: none; cursor: pointer; >.minus-btn img < margin-bottom: 3px; >.plus-btn img < margin-top: 2px; >button:focus, input:focus

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

.total-price

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

@media (max-width: 800px) < .shopping-cart < width: 100%; height: auto; overflow: hidden; >.item < height: auto; flex-wrap: wrap; justify-content: center; >.image img < width: 50%; >.image, .quantity, .description < width: 100%; text-align: center; margin: 6px 0; >.buttons < margin-right: 20px; >>

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

JavaScript

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

$('.like-btn').on('click', function() < $(this).toggleClass('is-active'); >);

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

$('.minus-btn').on('click', function(e) < e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value > 1) < value = value - 1; >else < value = 0; >$input.val(value); >); $('.plus-btn').on('click', function(e) < e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value < 100) < value = value + 1; >else < value =100; >$input.val(value); >);

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

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

Корзина на JS

Готовый функционал оформления заказа на сайте.
Добавляет товары в заказ, считает скидки и доставку и отправляет на почту.

Корзина для сайта

Example_1

Пример работы

Обычная (30 см) Большая (35 см)
Традиционная Тонкая
Карбонара, 30 см, традиционная — — руб.
В корзину

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

  • Кнопка перехода к заказу
  • Добавить товар в корзину JS
  • Скрипт оформления заказа
  • Настройка формы заказа

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

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

Если при установке и использовании скрипта у вас возникли вопросы – их решить поможет служба технической поддержки сервиса.

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

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

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

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

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

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

img

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

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

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

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

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

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

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

Для установки корзины на сайт необходимо скопировать фрагмент кода из личного кабинета, содержащий три основных файла:

  • Библиотека jQuery (возможно уже используется и повторная установка не потребуется)
  • JavaScript корзины с персональными настройками
  • Стили CSS оформления корзины

Пример установки на страницу

Скопируйте код «Корзины» [пример] :

Разместите кнопку «Купить» [пример] :

  

После установки кода
на вашем сайте появится корзина:

JavaScript создаст HTML-код корзины:

  • Иконку корзины, которая по-умолчанию расположена на странице в верхней правой части экрана и для неё задано “плавающее” положение (при прокрутке страницы она остается на месте). Значок кроме изображения также содержит счетчик товаров в заказе.
  • Всплывающие окна оформления заказа и уведомления об успешном добавлении товара и оформления покупки.

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

Размещение кода корзины внутри HTML-страницы:

 




EasyNetShop




Купить

Все настройки уже внутри JS

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

Кнопка перехода к заказу

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

 
0

Добавления товаров в корзину

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

1 Рекомендованный код Использовать код кнопки купить, который автоматически генерируется при создании товаров в личном кабинете. Пример:

В этом коде:
.btn-ens-style (необязательный) содержит визуальные настройки для кнопки «купить», вы можете заменить его на собственный класс, содержащий настройки оформления. Или можно создать стили в конструкторе
.»btn-ens-action (обязательный) не визуальный, он не содержит стилей оформления. Добавляет реакцию на событие клика по этому элементу и отправляет товар из параметра data-rel в корзину
data-rel=»ID товара» (обязательный), содержит ID товара из личного кабинета, который будет добавлен в заказ при нажатии на эту кнопку.

2 Ссылка на страницу Использовать ссылку на страницу, где установлена корзина. Данный вариант можно использовать, если система вашего сайта не позволяет добавлять произвольный HTML-код в нужное место. Пример:

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

3 Функция добавления товара Использовать добавление товара через вызов функции, которую можно добавить к элементу через событие «клик» по нему. Пример:

4 Разметка товара в кнопке

  

Скрипт оформления заказа

В коде подключения содержится файл с готовыми стилями оформления элементов корзины. Сами элементы, генерируемые скриптами соответствуют стандартам HTML5 и верстка на основе bootstrap. В соответствии с принципами каскадных таблиц стилей вы можете частично или полностью переопределить любой из параметров, указанных в css-файле. Для этого требуется после установки стандартных стилей добавить новое описание для выбранного элемента. Например, чтобы изменить цвет кнопки необходимо указать новые стили для классов которые изменились:

 #enscart_wrapper #enscart_image_wrapper < background-color: #1170bb; >#easynetshop-cart-default #enscart_wrapper 

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

Настройка формы заказа

  • Согласие на обработку персональных данных на сайте
  • Как изменить заголовок окна и надписи кнопок
  • Как добавить цели для Яндекс Метрики

Корзина для интернет-магазина на фронте или Пишем модульный javascript

Корзина для интернет-магазина на фронте

Однажды пришла мне в голову безумная идея написать серию постов про различные подходы к организации javascript-кода. Такая мысль образовалась, когда по рабочей надобности изучал React.js и возрадовался от некоторых идей, заложенных его авторами. Захотелось потрогать его побольше, а потому как писать хеллоуворды из документации скучно, нужна была какая-то идея. Раз уж я начал вести блог на тему веб-разработки, то почему бы не создать простое, но более-менее внятное приложение с применением различных библиотек и фреймворков? И не только реакта, а любых других, до которых доберется дурной и воспаленный ум. В качестве подопытного приложения я возьму простенький интернет-магазин с каталогом и корзиной. Фишка будет в том, что код и каталога, и корзины будет написан на javascript. Корзина на фронте — не самое удачное решение для реальных проектов, но для небольших сайтов и в качестве изучения подойдет неплохо. Для изучения React понадобится сколько-то времени, поэтому для начала развлеку вас статьей, где опишу процесс создания нашего приложения без использования библиотек и фреймворков, но с использованием яваскрипт-модулей. Главная моя цель — это показать различные подходы к созданию приложений на javascript. С версткой заморачиваться сильно не буду, сверстаю на bootstrap, основной упор сделаю на javascript-код. Манипулировать DOM будем всем знакомым добрым jquery. Также подключим underscore для работы с данными и html-шаблонами. Данные для каталога загрузим из внешнего json-файла, а корзину будем хранить в localStorage. Итак, начнем.

Идея приложения и схема работы.

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

Обращаю внимание, что это не одностраничное приложение. Мы создадим 2 html-страницы, каталог и корзина, но они будут служить только каркасом с основному коду. Основной код — это все-таки javascript.

Функционал подробнее.

Главное меню — 2 кнопки, каталог и корзина. В меню рядом с надписью «корзина» показывается выбранных количество товаров. Страница index — главная страница магазина, она же каталог. Подгружаем товары их из внешнего json-файла. Товары имеют поля: id, name, price, img. У каждого товара есть кнопка «Добавить в корзину». Список товаров храним в localStorage (id, name, count, price). Корзина — таблица с выбранными товарами. Выводим id и название товара, его количество и сумму. Под таблицей показываем общую сумму всех товаров. При изменении количества товаров и его удалении меняем все связанные данные. Каталог и корзину мы оформим в виде отдельных модулей.

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

Структура файлов

В корне проекта разместим 2 файла: index.html (каталог) и cart.html (корзина). И несколько папок: css, там лежит bootstrap.min.css и main.css — наши стили. Папка data содержит один файл goods.json — наши товары. fonts хранит шрифты от bootstrap-иконок. img — картинки товаров и гифку loading, которую мы будем показывать посетителям сайта, пока грузится каталог и корзина. Папка js разделена на 2 подпапки: vendor и modules. vendor содержит нужные нам библиотеки: jquery и underscore, а modules — модули нашего приложения. Их всего 3: main.js отвечает за инициализацию приложения, catalog — за вывод товаров, cart — за работу корзины.

Небольшое отступление: я намеренно не стал вводить лишнюю логику для нашего проекта. Хорошей практикой считается разработка с подходом MVC, разделение кода на модели, контроллеры и представления и разбиение этих частей на отдельные файлы для наглядности. Можно долго спорить на тему правильности применения такого подхода для абсолютно всех проектов, но в нашем конкретном примере мы отойдем от этого постулата и весь код для управления корзиной разместим в одном файле, а уже внутри него логически отделим работу с данными от разметки.

Приступаем к разработке.

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

Создаем разметку.

Создадим в корне нашего проекта файлы index.html и cart.html. Каждый файл — стандартная html5-заготовка. В блоке head подключим шрифт Ubuntu с Google Fonts и 2 css-файла: bootstrap.min.css и наши собственные стили main.css.

 Webdevkin. Интернет-магазин. Javascript   

Корзина для сайта на JavaScript

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

var basket_price = 0; Basket = [, ]; Basket.push(); function countBasketPrice(x) < for (i=0; ireturn basket_price; > document.write('

В корзине:

'); for (i=0;i');> document.write('
Стоимость заказа: '+countBasketPrice(Basket)+'');

То есть моя корзинка сделана как массив объектов, у каждого для простоты пока минимум свойств. И дальше можно внутрь класть товары методом push (ну и удалять тоже можно будет), при этом обновляется стоимость.
Вроде так просто, что аж страшно, не натолкнусь ли на трудности дальше. Вроде советуют делать корзины для сайта на jQuery. Но я еще не дошла до неё. Это чтоб быстрее, по заготовкам?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *