Скрипт корзины товаров для лендинга js. Скрипт корзины для landing page

Оказывается, до сих пор многие люди задаются вопросами:

• Как прикрутить корзину товаров на обычном HTML сайте
• Как сделать из HTML сайта интернет магазин
• Как на HTML сайте принимать и обрабатывать заказы автоматически

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

Конечно, у меня есть решение для вас. Это отличная и удобная корзина JCart , которую можно установить практически на любой сайт. О ней говорить можно долго, поэтому ограничусь несколькими словами: удобство, простота, скорость, AJAX, автономность, универсальность, гибкие настройки, открытый код.

Итак, ближе у делу.

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

Давайте рассмотрим варианты внедрения JCart в статический сайт. На самом деле вариант не один, хотя как правило заказчик видит только одно решение.

JCart и HTML сайт

1. Самый простой вариант . На HTML сайт надстраивается корзина товаров. Всё по сути остаётся по прежнему. Только внедряется в страницы кусок PHP кода и JS скрипты, также нужно оформить каждый товар в виде формы и задать в скрытых полях значения основных параметров (id, цена, название, единица измерения).

В этом случае вам подойдёт версия Mini. Если же нужны методы оплаты на автомате (WM, ЯД, карты, терминалы) или генерация бланка для оплаты по безналу, то выбирайте Базовую версию.

В данном случае все изменения вносить нужно будет вручную прямо в HTML коде.

2. Частичная автоматизация . В HTML сайт встраивается каталог товаров. То есть, статический сайт является просто основой. В страницы встраивается код вызова списка товаров или отдельных товаров из БД. Товары хранятся в базе.

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

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

Продвинутая версия JCart скорее всего вас удовлетворит. Если же нужны дополнительные модули (новости, консультации, просмотренные ранее товары) или продажи цифровых товаров на автомате, то придётся раскошелиться на VIP.

3. Полная автоматизация . HTML сайт служит только основой. На сайте добавляется только 2 страницы - каталог и страница оформления заказа.

С помощью GET запросов мы обращаемся к файлу каталога (например, shop.html) и выводим из базы нужные товары (списком или по отдельности). Тем самым получаем динамический сайт внутри статического. Причём такие страницы вполне нормально индексируются поисковиками. Можно кстати и ЧПУ в.htaccess прописать.

Если вам потребуется добавить, изменить или удалить товары или разделы, всё это можно сделать в админке. Править HTML больше нет нужды.

Как и для прошлого варианта подойдёт Продвинутая или VIP версия.

4. Готовое решение . Всегда есть вариант отказаться от HTML сайта в пользу движка:) Загрузить движок на хостинг и создавать все страницы, настройки, меню, дополнительные блоки в админке. При надобности изменения дизайна править всего 1 файл шаблона. В общем, по максимуму автоматизировать процесс. Я конечно говорю о JCart.Shop.

Вариантов создания корзины с использованием jQuery, на просторах интернета достаточно, но так как не все хотят подключать громоздкие библиотеки, особенно для каких-то разовых задач, я хочу показать вариант реализации на чистом JS. К тому же, хранить выбранные пользователем товары, мы будем не в cookie, а Local Storage (локальное хранилище ). Эта технология поддерживается практически во всех современных браузерах и даже в IE8.

Буквально два слова о Local Storage для тех, кто с этим способом хранения данных на стороне клиента не знаком. Объем хранимой информации в LS по сравнению с cookie значительно выше: около 5Мб(!) против 4Кб. К тому же, в LS данные хранятся в зашифрованном виде. Однако, как и в cookie, так и в LocalStorage, мы можем записывать только строковые данные. Если нужно добавить массив или объект, то его можно предварительно преобразовать в JSON-строку (JSON.stringify(obj) ), а после получения данных из LS - производим обратное преобразование (JSON.parse(json_string) ). Работать с Local Storage не просто, а очень просто. Вот его основные методы:

LocalStorage.setItem("key", "value"); Обновляет или создает новую запись с ключом "key" и строковым значением "value" var lsData = localStorage.getItem("key"); Возвращает данные связанные с ключом "key" или "null", если записи с таким ключом не обнаружено localStorage.removeItem("key"); Удаляет данные со связанным ключом "key" localStorage.clear(); Удаляет все записи из Local Storage

Переходим к делу и для примера, создадим такую HTML-структуру для вывода товара:

Samsung Galaxy S10

Цена: 20$

Добавить в корзину LG Optimus G E100500

Цена: 100$

Добавить в корзину Nokia 2110

Цена: 1000$

Добавить в корзину Оформить заказ Очистить корзину

Все необходимые данные, такие как наименование или цена товара, мы можем брать прямо из элементов страницы. Остается важная составляющая - ID товара, которую можно выводить в каком-нибудь атрибуте. Для таких целей, я предпочитаю атрибут data-* , который я уже упоминал в других статьях. Его-то и добавим в кнопку "Добавить в корзину" каждого из товаров.
Теперь в дело вступает JavaScript. Ничего сверхъестественного тут нет и большую часть, я прокомментирую прямо в коде:

Var d = document, itemBox = d.querySelectorAll(".item_box"), // блок каждого товара cartCont = d.getElementById("cart_content"); // блок вывода данных корзины // Функция кроссбраузерной установка обработчика событий function addEvent(elem, type, handler){ if(elem.addEventListener){ elem.addEventListener(type, handler, false); } else { elem.attachEvent("on"+type, function(){ handler.call(elem); }); } return false; } // Получаем данные из LocalStorage function getCartData(){ return JSON.parse(localStorage.getItem("cart")); } // Записываем данные в LocalStorage function setCartData(o){ localStorage.setItem("cart", JSON.stringify(o)); return false; } // Добавляем товар в корзину function addToCart(e){ this.disabled = true; // блокируем кнопку на время операции с корзиной var cartData = getCartData() || {}, // получаем данные корзины или создаём новый объект, если данных еще нет parentBox = this.parentNode, // родительский элемент кнопки "Добавить в корзину" itemId = this.getAttribute("data-id"), // ID товара itemTitle = parentBox.querySelector(".item_title").innerHTML, // название товара itemPrice = parentBox.querySelector(".item_price").innerHTML; // стоимость товара if(cartData.hasOwnProperty(itemId)){ // если такой товар уже в корзине, то добавляем +1 к его количеству cartData += 1; } else { // если товара в корзине еще нет, то добавляем в объект cartData = ; } if(!setCartData(cartData)){ // Обновляем данные в LocalStorage this.disabled = false; // разблокируем кнопку после обновления LS } return false; } // Устанавливаем обработчик события на каждую кнопку "Добавить в корзину" for(var i = 0; i < itemBox.length; i++){ addEvent(itemBox[i].querySelector(".add_item"), "click", addToCart); } // Открываем корзину со списком добавленных товаров function openCart(e){ var cartData = getCartData(), // вытаскиваем все данные корзины totalItems = ""; // если что-то в корзине уже есть, начинаем формировать данные для вывода if(cartData !== null){ totalItems = "

НаименованиеЦенаКол-во"; for(var items in cartData){ totalItems += ""; for(var i = 0; i < cartData.length; i++){ totalItems += ""; } totalItems += ""; } totalItems += "

" + cartData[i] + "

"; cartCont.innerHTML = totalItems; } else { // если в корзине пусто, то сигнализируем об этом cartCont.innerHTML = "В корзине пусто!"; } return false; } /* Открыть корзину */ addEvent(d.getElementById("checkout"), "click", openCart); /* Очистить корзину */ addEvent(d.getElementById("clear_cart"), "click", function(e){ localStorage.removeItem("cart"); cartCont.innerHTML = "Корзина очишена."; });

Объект "cartData" собираем по следующей схеме: ключ к товару - его ID и данные в виде массиве [название_товара, цена_товара, количество_товара ]. Если бы вы вывели такой объект средствами php, то получили бы примерно следующее:

StdClass Object ( => Array ( => LG Optimus G E100500 => 100 => 1) => Array ( => Samsung Galaxy S10 => 20 => 2))

Это я показал, чтобы было понимание того, как потом можно работать с этими данными на стороне сервера. И плавно подошли к тому, как же эти данные отправить на сервер. В отличии от cookie, Local Storage работает только на стороне клиента . Кто-то может и записать это в минусы LS, но я не вижу проблемы, т.к. есть достаточно способов превратить минус в плюсы. Легко и непринужденно, мы можем отправить данные Ajax-запросом , а это гораздо приятней посетителю, т.к. его не перебрасывает на другую страницу, экономит время и трафик, что немаловажно, если пользователь зашёл с мобильного устройства или скорость подключения не такая высокая.

Как видите, нет ничего сложного и объем кода, без использования сторонних библиотек, получился совсем небольшим. Если кому-то нужно учитывать более старые версии Internet Explorer, то он может добавить cookie, как "fallback" к Local Storage. То есть, проверять в функциях "getCartData " и "setCartData " возможности браузера и, если он не поддерживает LS, то в качестве хранилища использовать Cookie, а остальной код останется без изменений.

Всем привет. Сегодня будем делать простую корзину для landing page на javascript. Дело в том, что меня часто спрашивали, как ее сделать и несколько раз присылали ТЗ на разработку, но я не брался, так как не особо понимал, как ее сделать, а недавно, решил поискать на форумах и блогах реализацию и наткнулся на… Salejs .

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

Корзина для лендинг пейдж

Итак, первым делом подключаем jQuery, а ниже скрипт корзины. Я делаю это, как обычно, перед закрывающимся тегом body:

cartjs.initialize({ emailOrdersTo: "[email protected]", // Ваша почта language: "russian", // Язык currency: "руб.", // валюта requireName: true, // Спрашивать имя покупателя. requirePhone: true, // Спрашивать телефон покупателя. requireEmail: false, // Спрашивать почту покупателя. requireAddress: false, // Спрашивать адрес покупателя. })

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

Показать/Скрыть содержимое

Основное здесь:

JanSport PD 3331 1000 руб. В корзину

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

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

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

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

Пошаговая инструкция по созданию корзины

Существуют разные версии корзин, однако, мы рассмотрим разработку классического модуля для интернет-магазинов, созданного на базе PHP. Как правило, его размещают на видном месте - в шапке сайта в правом верхнем углу. Маленькая корзина представляет собой своеобразный индикатор, показывающий, сколько товаров, и на какую сумму вы собираетесь приобрести.

Итак, пошаговая инструкция по тому, как создать корзину для интернет-магазина:

1. Откройте файл под названием header.php. Он находится в корневой папке вашего сайта. Далее вставьте в верстку базовые значения нашей будущей корзины:

Товаров в корзине: шт.
Оформить заказ

< div class = "smalcart" > < strong > Товароввкорзине: < / strong > шт. < br / > < a href = "" > Оформитьзаказ< / a > < / div >

В данном случае используется содержимое массива $smal_cart. Он станет доступен в основном шаблоне интернет-магазина несколько позже. Для этого потребуется провести еще ряд определенных действий.

2. Чтобы корзина обладала простым и гармоничным видом, добавьте в файл style.css следующие стили:

#header .smalcart { float: right; height: 55px; padding: 10px; padding-left: 15px; margin: 10px; border: 1px solid gray; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #E6DEEA; }

#header .smalcart { float : right ; height : 55px ; padding : 10px ; padding - left : 15px ; margin : 10px ; border : 1px solid gray ; border - radius : 10px ; Moz - border - radius : 10px ; Webkit - border - radius : 10px ; background : #E6DEEA;

После этого уже можете взглянуть на визуальные изменения во внешнем виде интернет-магазина.

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

Для этого зайдите в папку application, а затем в models. После этого создайте файл с названием cart.php. В него добавляете следующее содержание:

class Application_Models_Cart { function addToCard($id, $count=1) { $_SESSION[‘cart’][$id]=$_SESSION["cart"][$id]+$count;return true; } function delFromCart($id, $count=1){} function clearCart(){} }

class Application_Models_Cart function addToCard ($ id , $ count = 1 ) $ _SESSION [ ‘cart ’] [ $ id ] = $ _SESSION [ "cart" ] [ $ id ] + $ count ; return true ; function delFromCart ($ id , $ count = 1 ) { } function clearCart () { }

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

Информация о товарах в корзине будет содержаться в массиве $_SESSION. Он представляет собой ассоциативный массив, в котором ключами являются ID продукции, а значением - количество товаров, добавленных в корзину. Стратегия минимализма позволит упростить процесс передачи информации в cookies.

Таким образом, мы получили готовую базу Application_Models_Cart. Теперь необходимо ее активировать.

4. Перед этим давайте еще внесем изменения в атрибут href для более правильной работы модуля: