Оказывается, до сих пор многие люди задаются вопросами:
Хочется, чтобы и корзина работала, товары добавляла, на почту заказ слала, оплату принимала, а код сайта переделывать не было бы нужно. Понимаю, что всегда хочется супер идеала, но совсем без изменений обойтись не получится.
Конечно, у меня есть решение для вас. Это отличная и удобная корзина 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 = "
| " + 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, а остальной код останется без изменений.
В этом еженедельном уроке screencast + мы научимся создавать собственную корзину покупок с PHP и MySQL. Вы увидите, что всё не так сложно, как кажется.
Предварительный просмотр скринкастов Шаг 1Начнём со структуры папок:
Структура
Начнем с разметки html, а затем её оформления. Откройте index.php и скопируйте/вставьте код:
Shopping cart
Как вы видите, наша страница имеет две колонки: основной столбец и sidebar. Теперь пройдём в CSS. Откройте файл style.css и пропишите код:
Body { font-family: Verdana; font-size: 12px; color: #444; } #container { width: 700px; margin: 150px auto; background-color: #eee; overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ padding: 15px; } #main { width: 490px; float: left; } #sidebar { width: 200px; float: left; }
Вот как теперь выглядит наша страница продуктов:
Полный скринкаст Шаг 3 Прежде чем перейти к части PHP/MySQL, нам нужно создать базу данных. Откройте phpMyadmin и выполните следующие действия:
Для экономии времени я экспортировал свою таблицу, чтобы вы просто запустили следующий запрос:
CREATE TABLE IF NOT EXISTS `products` (`id_product` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`description` varchar(250) NOT NULL,
`price` decimal(6,2) NOT NULL,
PRIMARY KEY (`id_product`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
INSERT INTO `products` (`id_product`, `name`, `description`, `price`) VALUES
(1, "Product 1", "Some random description", "15.00"),
(2, "Product 2", "Some random description", "20.00"),
(3, "Product 3", "Some random description", "50.00"),
(4, "Product 4", "Some random description", "55.00"),
(5, "Product 5", "Some random description", "54.00"),
(6, "Product 6", "Some random description", "34.00");
До извлечения данных из базы данных я сделаю index.php шаблон для списка продуктов и корзины. Поэтому добавьте следующий код в начало страницы index.php :
Для этого нам нужно включить файл; добавьте эту строку в index.php между div с id "main":
Теперь у нас полный index.php :
Shopping Cart
Давайте создадим соединение с MySQL. Откройте connections.php и пропишите следующее:
Шаг 5
Пропишем разметку для страницы продуктов. Откройте её и введите следующее:
Product List
| Product 1 | Some random description | 15 $ | Add to cart |
| Product 2 | Some random description | 25 $ | Add to cart |
Давайте посмотрим на страницу:
Как видите, это довольно уродливо. Давайте добавим этот CSS.
A {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; }
Okay: другое дело:
Выглядит намного лучше, не так ли? Внизу указан полный код style.css :
Body { font-family: Verdana; font-size: 12px; color: #444; } a {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #container { width: 700px; margin: 150px auto; background-color: #eee; padding:15px; overflow: hidden; } #main { width: 490px; float: left; } #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; } #sidebar { width: 200px; float: left; }
Шаг 6Прежде чем извлечь продукт из базы данных, давайте удалим последние две строки из нашей таблицы (были нужны только для того, чтобы увидеть, как она будет выглядеть). Удалить это:
Отлично! Теперь в том месте, где были строки таблицы, введите следующий код PHP:
x
Go to cartПосмотрите на картинку снизу:
Поскольку index.php является шаблоном для всех файлов, sidebar также будет виден в cart.php . Разве это не круто?!
Шаг 9Наконец, откройте cart.php и введите код:
View cart Go back to products page
Статьи по теме:
Еще тоньше, ярче и автономнее
Как передать музыку по блютузу?
История Huawei: Как китайский бренд меняет индустрию телекоммуникационных технологий Что за бренд хуавей
Способы загрузки ос с флешки
Как сделать на ноутбуке подсветку клавиатуры
Новое:
Популярное:
|
