html, css и javascript → Интернет-магазин на javascript.
jquery - чудесная библиотечка, a java script довольно сложный язык. jquery позволяет с легкостью писать сложные вещи.
Всю жизнь писал интернет магазины с использованием серверных скриптов и ajax, но тут возникла необходимость сделать формирование корзины и оформление заказа на статическом сайте.
После небольших размышлений, задачку решил. Данные о товаре (в моем случае название товара и цена) храняться в куках. Наша задача - считать куки, добавить новый товар, сохранить куки и передать данные в textarea формы для дальнейшего заказа.
Также, надо было дать возможность удалять товар из корзины.
Возникло 2 сложности:
1. Как хранить многомерный массив в cookies, т.к. не хотелось использовать более одной переменной для хранения
2. Как активировать события на динамически добавленный элемент без перезагрузок страниц.
Первая задача решилась довольно просто. Значения массива с одним индексом решил разделять знаком #, а элементы массива - знаком %.
Соответственно написал пару процедурок чтения и записи.
| 1 | //в куках хранятся записи в виде 'name 1#123%name 2#456' |
| 2 | //функция разделяет имена и цены и возвращает массив объектов |
| 3 | // items[0].header,items[0].price, items[1].header,items[1].price и т.п. |
| 4 | function get_cart_from_cookies() { |
| 5 | var items = new Array(); |
| 6 | var cart = $.cookie('cart'); |
| 7 | if(cart) { |
| 8 | var ss = cart.split("%"); |
| 9 | for (var i = 0; i < ss.length; i++) { |
| 10 | // Разделение пар имя-цена. |
| 11 | var m = ss[i].split("#"); |
| 12 | var item = new Object(); |
| 13 | item.header = m[0]; |
| 14 | item.price = m[1]; |
| 15 | items[i]=item; |
| 16 | } |
| 17 | } |
| 18 | return items; |
| 19 | } |
| 20 | |
| 21 | //пишет в куку корзину товаров и возвращает сообщение - список товаров для отображения |
| 22 | function put_cart_to_cookies(items) { |
| 23 | var msg = ''; |
| 24 | var cook = ''; |
| 25 | if(!items || items.length == 0) return false; |
| 26 | else { |
| 27 | for (var i = 0; i < items.length; i++) { |
| 28 | if(items[i].header != '') { |
| 29 | msg = msg + '— ' + items[i].header + ' ' + items[i].price + ' [<a class="remove" id="remove-'+i+'" href="#">удалить</a>]<br />'; |
| 30 | cook = cook + items[i].header + '#' + items[i].price; |
| 31 | if(i != items.length - 1) cook = cook + '%'; |
| 32 | } |
| 33 | } |
| 34 | $.cookie('cart', cook, { expires: 1 }); |
| 35 | } |
| 36 | return msg; |
| 37 | } |
Добавления нового товара в корзину происходит функцией, которая вызывается на событие onclick, при этом, в html должно быть что-то вида:
| 1 | <a class="cart" title="хороший товар" price="123" href="#">Купить этот товар</a> |
| 1 | //в массиве t содержится список товаров, полученный из кук |
| 2 | $('.cart').click(function() { |
| 3 | //получаем цену и название товара |
| 4 | var price = $(this).attr('price'); |
| 5 | var header = $(this).attr('title'); |
| 6 | |
| 7 | //если новый товар уже есть в корзине, то его не добавляем |
| 8 | for (var i = 0; i < t.length; i++) { |
| 9 | //сравниваем на совпадения заголовка товара и цену |
| 10 | //если будут какие-то другие аттрибуты, то можно сравнивать и по ним |
| 11 | if(t[i].header == header && t[i].price == price) { |
| 12 | alert(header+' у Вас уже выбран'); |
| 13 | return false; |
| 14 | } |
| 15 | } |
| 16 | |
| 17 | //добавляем выбранный товар в массив |
| 18 | var item = new Object(); |
| 19 | item.header = header; |
| 20 | item.price = price; |
| 21 | t[cnt] = item; |
| 22 | |
| 23 | //отображаем измененную корзину, сохраняя новые значения в куках |
| 24 | show_cart(t); |
| 25 | return false; |
| 26 | }); |
Активация события на элемент страницы, который добавлен в процессе выполнения скрипта делается довольно просто на jquery: вместо события click используется конструкция live("click"). На java script наверное тоже просто, знатоки подскажут.
| 1 | $().ready(function() { |
| 2 | //это пример функции удаления динамического элемента |
| 3 | $('.remove').live("click", function(){ |
| 4 | var m = $(this).attr('id').match(/(d+)/); |
| 5 | t.splice(m[1],1); //выкидываем из массива удаленный элемент |
| 6 | show_cart(t); //отображаем измененную корзину |
| 7 | return false; |
| 8 | }); |
| 9 | }); |
Ну и напоследок, пишем по образу и подобию скрипт для страницы формы заказа, в которой размещаем textarea куда и копируем содержимое корзины.
| 1 | //формирует из многомерного массива список товаров для отображения в textarea |
| 2 | function make_items_list(items) { |
| 3 | var msg = ''; |
| 4 | if(!items || items.length == 0) return false; |
| 5 | else { |
| 6 | for (var i = 0; i < items.length; i++) { |
| 7 | if(items[i].header != '') { |
| 8 | msg = msg + (i+1) + '. "' + items[i].header + '" по цене ' + items[i].price+' руб.\r\n'; |
| 9 | } |
| 10 | } |
| 11 | } |
| 12 | return msg ? 'Я хочу заказать:\r\n'+msg : 'Вы не выбрали ни одного товара'; |
| 13 | } |
Как отправится форма на сервер - это уже отдельная тема, есть масса способов.
Комментарии:
12.08.2010 → Евгений написал:
Ситуация редкая, но я с ней также сталкивался. Если бы раньше нашел подобный скрипт, не пришлось бы так мучительно возиться. Отличное решение. Ничего лишнего.
23.08.2011 → Сергей написал:
Вариант с мгновенной доставкий не расматривали, может есть варианты