dimarina.ru

html, css и javascript1   Разное1   Рецепты программирования на PHP или практические советы по программированию7   Управление проектом1  

 

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 0ss.lengthi++) {
10                // Разделение пар имя-цена.
11                var 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 0items.lengthi++) {
28             if(items[i].header != '') {
29                 msg msg '&mdash; ' 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(!= items.length 1cook cook '%';
32             }    
33         }    
34         $.cookie('cart'cook, { expires});
35     }    
36     return msg;
37 }

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

1 <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 0t.lengthi++) {
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 = $(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 0items.lengthi++) {
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 }

Как отправится форма на сервер - это уже отдельная тема, есть масса способов.

Комментарии:

27.05.2017 → bytecoin gaming example написал:
next cryptocurrency to invest in bytecoin bitcointalk jr bytecoin gaming example http://youl.ink/bytenews56835

27.11.2016 → Павел написал:
Большое спасибо

04.10.2015 → HEEG.RU написал:
Пример интернет магазина на чистом javascript http://novye-podarki.ru "админка" в правом верхнем углу меню V

12.07.2015 → Rigoberto написал:
You've got it in one. <a href="http://ecsbmr.com">Cold'nut</a> have put it better.

10.07.2015 → Lavonn написал:
It's good to see someone thinikng it through. http://zovltg.com [url=http://juzdnzhq.com]juzdnzhq[/url] [link=http://eqjgdrs.com]eqjgdrs[/link]

08.07.2015 → Kaed написал:
I much prefer <a href="http://pnoymw.com">infvmratioe</a> articles like this to that high brow literature.

07.07.2015 → Guntur написал:
AFAIC th'tas the best answer so far!

13.12.2014 → Тимур написал:
Вот моя поделка на данную тему http://novye-podarki.ru/ (демо магазин) в нем нет php надеюсь кому-нибудь пригодится

23.02.2013 → семен написал:
Где посмотреть этот магазин&#191;

20.10.2012 → frmplnqet написал:
aDIr7U , [url=http://xnvvslpzaejd.com/]xnvvslpzaejd[/url], [link=http://gbhlbljvxccn.com/]gbhlbljvxccn[/link], http://lmxfuezunfib.com/

20.10.2012 → zueevuqrhk написал:
z5EevN <a href="http://xafprcjkzlqz.com/">xafprcjkzlqz</a>

19.10.2012 → ywwxseb написал:
qAwLv9 , [url=http://ezoeerxumtrn.com/]ezoeerxumtrn[/url], [link=http://ldbyzcqtuuth.com/]ldbyzcqtuuth[/link], http://cjvuveddxenp.com/

16.10.2012 → thysbbv написал:
u1gK3Z <a href="http://lgozdbsjlzfr.com/">lgozdbsjlzfr</a>

16.10.2012 → Silvio написал:
Deadly acucatre answer. You've hit the bullseye!

23.08.2011 → Сергей написал:
Вариант с мгновенной доставкий не расматривали, может есть варианты

12.08.2010 → Евгений написал:
Ситуация редкая, но я с ней также сталкивался. Если бы раньше нашел подобный скрипт, не пришлось бы так мучительно возиться. Отличное решение. Ничего лишнего.

Написать комментарий





Включите отображение картинок в браузере
Число на картинке: