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

Создаем корзину для сайта

В этом уроке разберем, как можно создать корзину для сайта. Рассмотрим основные моменты. У нас будет страница с товарами, где для каждого товара будет кнопка купить со своим id, при клике на кнопку мы будем делать Ajax-запрос к php скрипту. В этом php файле будем создавать сессию корзины. Ну и напоследок сделаем страницу нашей корзины для сайта, где также при помощи Ajax-запросов можно будет менять количество товаров или удалять товар из корзины.

В этом уроке подключим стили bootstrap. Также подключим фреймворк Jqery для наших ajax-запросов. В нашем примере создадим страницу с тремя товарами, где главный html код это кнопка <button c id=”код товара” и классом class="btn-buy", чтобы мы могли обработать клик в jqery. На своем сайте вы, скорее всего, будете выводить товары циклом, доставая их из базы данных. Кнопке купить нужно будет давать id с кодом товара.

Вот наша страница с товарами:

Теперь напишем скрипт обработки клика на кнопку, в котором мы получим id кнопки, который является кодом нашего товара и отправим его аякс запросом в файлик addtocart.php.

Также добавим на нашу страницы ссылку на корзину со счетчиком товаров.

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

Теперь сделаем страницу корзины cart.php. Мы будем выводить товары в виде таблицы:

input с количеством

У себя по id товара можете вытаскивать из базы информацию о товаре, для отображения названия, картинки, цены…

Вот код нашей корзины:

Теперь подключим на нашу страницу корзины jqery и напишем скрипт отбработки изменения количества и кнопки удалить. Тут мы также будем делать аякс-запрос к нашим php-обработчикам, где будет меняться сессия корзины.

Осталось написать два php обработчика. В cartamount.php мы будем изменять количество товаров в нашей сессии, а в cartdel.php удалять в сессии запись с нужным id . Начнем с cartamount.php

Теперь в нашей сессии изменено количество и если обновим страничку корзины, то количество товаров сохранится. Теперь создадим обработчик удаления товара cartdel.php

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

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

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

Корзина товаров на HTML

Как добавить корзину

Можно найти десяток способов организации корзины на HTML-сайте. Одним из примеров такого решения может являться наш сервис. Скрипт корзины легко встраивается в существующий HTML-код сайта и обеспечивает полноценный функционал интернет-магазина. Для реализации функций, которым действительно нужен сервер с возможностью исполнения программного кода — используются сервера личного кабинета. Там же располагаются и все настройки (кому отправлять заказ, какой номер заказа присвоить, какие средства для онлайн-оплаты предоставлять покупателю и т.д.)

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

Сегодня мы уже помогли оформить заказов:

Создать корзину интернет-магазина

Всё вышеперечисленное касалось ситуации, когда уже существует сайт на HTML и нужно на нем настроить корзину товаров. А если сайта еще нет? Конечно, самым верным (и дорогим) вариантом было бы разработать готовый сайт на движке, в состав которого входят модули корзины. Однако, это не всегда оптимальных подход — рассмотрим несколько вариантов:

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

Другой вариант HTML-сайта — это сайты, созданные в визуальных редакторах и загруженные на сервер в виде готовых страниц, например Adobe Muse или Mobirise. Если вы изначально задумались о создании сайта таким образом, а корзина товаров вам нужна исключительно для возможности заказа одного единственного вида продукции — совершенно ни к чему внедрять на сайт систему управления (разве что на будущее). И тут вполне можно решить вопрос с корзиной товаров в виде готового виджета.

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

Большой выбор инструментов продаж

Простая настройка дополнительных механизмов: сопутствующие товары, скидки, доставка, онлайн-оплата и др.

Скрипт корзины

Для удобства подключения и использования — мы собрали весь необходимый функционал в готовый javascript файл, который можно получить в личном кабинете сервиса “Простой магазин”. Также личный кабинет помогает настроить индивидуальные параметры: поля для ввода покупателем, адрес почты для отправки писем с заказом и т.д.

Демо-версия без регистрации

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

Пример кнопки добавления товара по ID из каталога:

Рабочая версия требует регистрации

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

Такой javascript автоматически генерирует и выводит на экран все необходимые элементы:

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

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

Скрипт добавления товара в корзину

Для реализации функционала добавления товара используется автоматическое отслеживание событий “клик” на кнопку, содержащую класс .btn-ens-action . Например,

из данного элемента берется параметр data-rel и добавляется товар с таким ID из раздела “Торговые предложения” личного кабинета.

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

  • Добавление товара по ссылке. Для этого кнопку добавления товара необходимо сделать ссылкой и указать адрес #ensadd:
  • Добавление товара через функцию. Для реализации такого метода требуется вызвать функцию easynetshop_buy()
  • Добавление товара, который не зарегистрирован в каталоге. Это может быть полезным, если у вас на сайте уже есть огромный каталог товаров или требуется добавлять товар с изменяемыми параметрами (ценой, названием, описанием, картинкой) и таких вариантов товара может быть много. Подробнее о добавлении произвольно товара читать здесь

Оформление корзины интернет-магазина, CSS

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

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

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

Изменение контента формы заказа

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

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

Корзина на JS

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

JavaScript и CSS легко интегрируется на любой действующий сайт (кроме сайтов, созданных на технологии Flash). Он выдаются каждому пользователю персонально при регистрации в личном кабинете.

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

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

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