Простая корзина на Ajax.


ajax

Собственно, связавшись с белым SEO приходится понемногу заниматься и дизайном и вёрсткой и WEB программированием — чего в дорвейном деле у меня практически не было — делалось то в основном для робота, а не для человека. Можно конечно и нанимать дизайнеров, программистов — но это всё в будущем, т.к. я считаю, что для того чтобы правильно оценивать труд необходимо в этой области хоть немного понимать, а ещё лучше иметь собственный опыт. Для этого я  и решил углубляться в WEB технологии и сваять своими руками для конкретного сайта заказчика корзину заказов с использованием технологии Ajax.

В первый же день знакомства с продвинутыми WEB технологиями мне понравилось, что во первых в сети довольно много всякого рода справочной информации, примеров, статей. А что понравилось больше всего — дак это то, что практически везде на сайтах открытый javascript код — никакой обфускации и тем более кодирования — бери и изучай рабочий уже отлаженный код реальных сайтов.Например в данный момент для меня предметом для изучения и конечно же немного «сдирания» кода является сайтик интернет-магазина Комус. (ловите ребята честную ссылку, взамен на ваш код … хоть у вас и без меня PR5 да ТИЦ 750). Магазин довольно крупный — специалисты над сайтом трудятся явно не новички, что собственно сразу видно по дизайну и коду.

Ладно — продолжим … вообще то изучение чужого кода у меня было уже вторым этапом, первым всё таки хотелось получить своего рода «hello world» с использованием технологии Ajax, с использованием самых простейших примеров и каких нить статей для чайников.

А конкретно — задумал я, для начала сваять страничку с количественным заказом товара:   поле ввода, кнопочки для увеличения/уменьшения количества и кнопкой добавления в корзину (передачи данных серверу) — всё это конечно же без перезагрузки страницы.

Для реализации Ajax технологии я выбрал jQuery — наипопулярнейший в последнее время JavaScript фреймворк. И после недолгих изучений материала получилось такое чудо-юдо

УРА — жмякаем плюсик — давим на Оrder — получаем результат — я счастлив 🙂

Серверная сторона принимала количество count в POST запросе и тупо возвращала строку «Ordered количество» + ещё на всякий случай выгружала кол-во в файлик.

Собственно — начало было положено, далее по плану задача масштабировалась — на страницу помещалось несколько подобных форм и нужно было в серверную часть кроме количества передавался ещё и Id товара ! Для этого скрипт Javascript нужно было научить различать места ввода, причем обработчик для всех должен быть один. На этом моменте я  и решил поинтересоваться как это реализовано у Комуса 🙂 (поначалу конечно погуглил — но ничего толкового не нашел).

Решение мне понравилось — ИМХО довольно элегантное :

Параметры ID товара и ещё какие то дополнительные выводились на страницу в формах товара как input type=»hidden»

Обрабатывался клик по кнопке input type=»image» с определенным id=»cFm_128729_3″, одноименным с формой — этот id передавался в фунцию с параметром nameForm, далее параметры вытаскивались уже просто

formName = document.forms[nameForm];
count = formName.elements[‘count’];
itemID = formName.elements[‘itemID’];

Вуаля — далее уже «дело техники».

Более детально с реализацией на Комусе любой желающий может ознакомиться непосредственно с первоисточника. Кстати за счёт именно такой реализации на формах — функциональность скрипта остаётся даже при выключенном Javascript (что лишний раз подтверждает профессиональность кодера).

Я же пошел огранять сий алмаз, в виде полученной информации, и адаптировать его для конкретного сайта (подгонка дизайна, верстка html + css, отладка клиентских да серверных скриптов, взаимодействие с MySQL — в общем работы ещё валом)

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<script type=’text/javascript’ src=’js/jquery.min.js’></script>
<script type=’text/javascript’>

$(document).ready(function(){

$(‘#inc’).click(function(){
$id = parseInt($(«#id1»).val()) + 1;
$(«#id1»).attr(«value»,»»+$id+»»);
})

$(‘#sub’).click(function(){
document.getElementById(‘id1’).value = parseInt(document.getElementById(‘id1’).value) — 1;
})

$(‘#order’).click(function(){
id = parseInt($(«#id1»).val());

$.ajax({
type: «POST»,
url: «test.php»,
data: «count=»+id,
success: function(msg){
$(«#text»).html(msg);
}
});
})
});

</script>

</head>
<body>

<div id=»sub»>-</div>
<input id=’id1′ name=’count’ type=’text’ value=’1′ onfocus=’this.blur(); return false;’ >
<div id=»inc»>+</div>
<div id=»order»>ORDER</div>
<div id=»text»></div>

</body>
</html>


5 комментариев на «“Простая корзина на Ajax.”»

  1. $(‘#sub’).click(function(){
    document.getElementById(‘id1’).value = parseInt(document.getElementById(‘id1’).value) — 1;
    })

    Вот этот момент немного не понравился, если уже пользуемся JQuery, то по-жквериевски, наверное, стоит и всё делать

    $(‘#sub’).click(function(){
    document.getElementById(‘id1’).value = parseInt(document.getElementById(‘id1’).value) — 1;
    })

    По идее получить доступ к value можно таким образом:
    $(‘#sub’).attr(‘value’);

    Ну и там ещё некоторые моменты, но если взглянуть в общем, то для человека особо до этого не сталкивавшегося с программингом — всё очень даже ничего 🙂

  2. +1 за внимательность ! на уменьшение единички я специально оставил «в старом стиле», а вот инкремент как раз в стиле JQuery 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *