Собственно, связавшись с белым SEO приходится понемногу заниматься и дизайном и вёрсткой и WEB программированием – чего в дорвейном деле у меня практически не было – делалось то в основном для робота, а не для человека. Можно конечно и нанимать дизайнеров, программистов – но это всё в будущем, т.к. я считаю, что для того чтобы правильно оценивать труд необходимо в этой области хоть немного понимать, а ещё лучше иметь собственный опыт. Для этого я и решил углубляться в WEB технологии и сваять своими руками для конкретного сайта заказчика корзину заказов с использованием технологии Ajax.
В первый же день знакомства с продвинутыми WEB технологиями мне понравилось, что во первых в сети довольно много всякого рода справочной информации, примеров, статей. А что понравилось больше всего – дак это то, что практически везде на сайтах открытый javascript код – никакой обфускации и тем более кодирования – бери и изучай рабочий уже отлаженный код реальных сайтов.Например в данный момент для меня предметом для изучения и конечно же немного “сдирания” кода является сайтик интернет-магазина Комус. (ловите ребята честную ссылку, взамен на ваш код … хоть у вас и без меня PR5 да ТИЦ 750). Магазин довольно крупный – специалисты над сайтом трудятся явно не новички, что собственно сразу видно по дизайну и коду.
Ладно – продолжим … вообще то изучение чужого кода у меня было уже вторым этапом, первым всё таки хотелось получить своего рода “hello world” с использованием технологии Ajax, с использованием самых простейших примеров и каких нить статей для чайников.
А конкретно – задумал я, для начала сваять страничку с количественным заказом товара: поле ввода, кнопочки для увеличения/уменьшения количества и кнопкой добавления в корзину (передачи данных серверу) – всё это конечно же без перезагрузки страницы.
Для реализации Ajax технологии я выбрал jQuery – наипопулярнейший в последнее время JavaScript фреймворк. И после недолгих изучений материала получилось такое чудо-юдо
|
1 2 3 4 5 6 |
<script src=“js/jquery.min.js” type=“‘text/javascript'”><!—mce:0—></script> <script type=“‘text/javascript'”><!—mce:1—></script> <div id=“sub”>–</div> <input id=“id1” name=“count” type=“text” value=“1” /> <div id=“inc”>+</div> <div id=“order”>ORDER</div> |
УРА – жмякаем плюсик – давим на Оrder – получаем результат – я счастлив 🙂
Серверная сторона принимала количество count в POST запросе и тупо возвращала строку “Ordered количество” + ещё на всякий случай выгружала кол-во в файлик.
|
1 2 3 |
$count = $_POST[‘count’]; echo “Ordered $count items”; file_put_contents(‘test.txt’,$count); |
Собственно – начало было положено, далее по плану задача масштабировалась – на страницу помещалось несколько подобных форм и нужно было в серверную часть кроме количества передавался ещё и 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 – в общем работы ещё валом)
<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.”»
$(‘#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’);
Ну и там ещё некоторые моменты, но если взглянуть в общем, то для человека особо до этого не сталкивавшегося с программингом – всё очень даже ничего 🙂
+1 за внимательность ! на уменьшение единички я специально оставил “в старом стиле”, а вот инкремент как раз в стиле JQuery 🙂
всё таки – какие моменты Вы имели ввиду ?
Спасибо, как раз то что искал
А где демка?