Вариантов создания корзины с использованием 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 = "
| " + cartData[i] + " | "; } totalItems += "
Объект "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, а остальной код останется без изменений.
Всё вышеперечисленное касалось ситуации, когда уже существует сайт на HTML и нужно на него установить корзину товаров. А если сайта еще нет? Конечно, самым верным (и дорогим) вариантом было бы разработать готовый сайт сразу на движке, в состав которого входят модули электронной коммерции. Однако, это не всегда оптимальных подход - рассмотрим несколько вариантов:
Нам нужен лендинг. По-сути это одностраничный сайт, состоящий исключительно из сверстанного в формате HTML макета. Нужен ли такому сайту движок, который обеспечивал бы формирование контента и управление им - больше чем в половине случаев нет, не нужен. Это неэффективное вложение средств и времени. Гораздо проще использовать как раз методы реализации корзины через готовые виджеты.
Другой вариант HTML-сайта - это сайты, созданные в визуальных редакторах и загруженные на сервер в виде готовых страниц. Если вы изначально задумались о создании сайта таким образом, а корзина товаров вам нужна исключительно для возможности заказа одного единственного вида продукции - совершенно ни к чему внедрять на сайт систему управления (разве что на будущее). И тут вполне можно решить вопрос с корзиной товаров в виде готового виджета.
В итоге: установить корзину на HTML-сайт возможно. Да, она будет сделана не так, как это обычно делается, но от этого её функции не потеряются. В некоторых случаях изначальный выбор в пользу HTML-сайта + готовая корзина товаров имеет более оптимальный вариант. Такое решение не является худшим - это просто альтернатива, сейчас многие сервисы работают по аналогичному принципу с самого начала и это является нормой, например, консультанты на сайтах, сервисы по предложению обратного звонка, сборщики почты для рассылок и т.д. Все они не реализуются средствами движка и не выполняются на серверах, а точно также встраиваются на сайты как виджеты, в том числе и на чисто HTMLные.
Всем привет. Сегодня будем делать простую корзину для 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 руб.
В корзину
В шестой части статьи, как и обещал, сделаем нашу корзину аяксовой, а так же стилизуем её с помощью CSS.
Статья обещает быть длинной, поэтому запаситесь терпением, нам надо много изучить и сделать.
Т.к. изучение CSS не входит в планы этих уроков, то я просто приведу уже готовый код без пояснений. В первых уроках мы создавали файл assets/css/styles.css , который был пустым. В этом файле и будет храниться весь CSS код сайта:
assets/css/styles.css
Body { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size: 16px; color: black; } .content { width: 700px; margin: 20px auto; } .cart-items, .products-list { width: 100%; text-align: center; } .cart-items thead { font-weight: bold; } .products-list .product-title, .products-list .price { margin-bottom: 5px; } .products-list .product-title { font-weight: bold; } .products-list .price { color: red; } .cart { background: #eee; padding: 10px; } .cart .controls { margin-top: 10px; } .message-success, .message-error { width: 100%; padding: 10px; border-radius: 8px; border-width: 1px; color: white; box-sizing: border-box; margin-bottom: 10px; } .message-success { background: #5db954; border-color: #51a34a; } .message-error { background: #b94545; border-color: #ab4040; } /* Стили HTML форм */ *:focus { outline: none; } button, input, input { position: relative; display: inline-block; padding: 7px 12px; font-size: 13px; font-weight: bold; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.9); white-space: nowrap; vertical-align: middle; cursor: pointer; background-color: #eeeeee; background-image: -moz-linear-gradient(#fcfcfc, #eee); background-image: -webkit-linear-gradient(#fcfcfc, #eee); background-image: linear-gradient(#fcfcfc, #eee); background-repeat: repeat-x; border: 1px solid #d5d5d5; border-radius: 3px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; } button:hover, input:hover, input:hover { text-decoration: none; background-color: #dddddd; background-image: -moz-linear-gradient(#eee, #ddd); background-image: -webkit-linear-gradient(#eee, #ddd); background-image: linear-gradient(#eee, #ddd); background-repeat: repeat-x; border-color: #ccc; } button:active, input:active, input:active { background-color: #dcdcdc; background-image: none; border-color: #b5b5b5; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }
AJAX корзинаВот мы и добрались до самого интересного - написание клиентского js кода функиционала ajax корзины. В основном шаблоне уже из первых уроков подключена библиотека jQuery и скрипт cart.js , в котором мы будеим писать весь js код.
application/views/template.php
...
