От автора: создавая интернет магазин, всегда необходимо создавать механизм сортировки товаров в каталоге по различным параметрам. Поэтому в данном уроке мы с Вами научимся создавать сортировку товаров в интернет магазине по имени и по цене, используя технологию AJAX.
Обзор тестового сайта
Итак, для сегодняшнего урока я подготовил вот такую заготовку интернет магазина. Скажем так – это страница отображения товаров.
Давайте кратко рассмотрим исходный код данного примера. Итак файл index.php:
<? //открываем сессию //Подключаем файл include 'functions.php'; $db = connect_db(); $goods = get_goods($db); ?> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta name="" content=""> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrap"> <div id="header"> <h2>Интернет магазин часов</h2> <p>Часы на любой вкус!!!</p> </div> <div id="content"> <div id="main"> <ul id="tovar"> <? foreach ($goods as $item) : ?> <li> <img src="images/<?=$item['img'];?>"> <p id="title"><?=$item['title'];?></p> <p id="price"><?=$item['price'];?> руб.</p> </li> <? endforeach; ?> </ul> </div> <div id="sidebar"> <div id="header_cart"> Корзина </div> <div id="cart"> <ol> <li class="cart_item"> <img src="images/01.jpg"> <p id="title" >G-SHOK G 2900</p> <p id="price" >2000 руб.</p> <p id="remove_cart">Удалить</p> </li> <li class="cart_item"> <img src="images/02.jpg"> <p id="title">Edifience E-3300</p> <p id="price">3500 руб.</p> <p id="remove_cart">Удалить</p> </li> <li class="cart_item"> <img src="images/03.jpg"> <p id="title">Casio AMW-700</p> <p id="price">5000 руб.</p> <p id="remove_cart">Удалить</p> </li></ol> <ol> </ol> <div id='open_cart'> <a href="cart.php">Оформить заказ</a> </div> </div> </div> </div> <div id="footer"> <h5>Интернет магазин часов<br>2012г.</h5> </div> </div> </body> </html>
Это главный файл данного скрипта, который выводит на экран каталог товаров. Обратите внимание, первым делом я подключаю файл functions.php, в котором содержатся все функции необходимые для работы данного сайта. Далее вызываем функцию connect_db(), которая выполняет соединение с базой данных. Затем выполняем функцию get_goods($db), которая получает товары из базы данных и возвращает массив, содержащий эти товары. Дальше, используя данный массив, мы в цикле выводим все товары на экран.
Теперь давайте рассмотрим исходный код файла functions.php:
<?php
function connect_db() {
//Подключаемся к серверу базы данных
$db = mysqli_connect('localhost','Viktor','1234','for_cart');
if(!$db) {
exit('Error'.mysqli_error());
}
//Устанавливаем кодировку запросов
mysqli_query($db,"SET NAMES cp1251");
return $db;
}
function get_goods($db,$id = FALSE) {
//Запрос на выборку все товаров
$sql = "SELECT * FROM magazine";
$result = mysqli_query($db,$sql);
for($i = 0;$i < mysqli_num_rows($result); $i++) {
$goods[] = mysqli_fetch_array($result);
}
return $goods;
}
?>
Как Вы видите здесь всего лишь две простые функции, назначение которы мы с Вами рассмотрели выше. Их код я пояснять не буду, так как он очень простой. Единственное, что скажу, ято для работы с базой данных я использую расширение языка php mysqli. Так как mysql – уже существенно устарело, и разработчики языка не рекомендуют его использовать.
Далее в папке js мы с Вами будем хранить файлы со скриптами на языке JavaScript. В папке images – содержатся различные изображения товаров. Ну и наконец файл стилей style.css, который содержит правила на языке CSS, для нормального отображения сайта в браузере.
Подключение библиотеки jQuery
Так как мы с Вами будем создавать механизм сортировки используя AJAX, то конечно намного удобнее работать с данной технологией используя библиотеку jQuery. Напомню, что данная библиотека написана на языке javaScript и содержит в себе огромнейший набор свойств и методов для работы и взаимодействия с элементами веб-страниц. Поэтому давайте перейдем на официальный сайт – http://jquery.com и скачаем данную библиотеку.
Для этого кликаем по ссылке “Download jQuery” и скачиваем последнюю актуальную версию данной библиотеки. Скачанный файл сохраняем в папке js. Теперь в файле index.php необходимо подключить данную. Для этого добавим следующий код:
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
Далее создадим пустой файл script.js, в котором мы с Вами будем писать код на языке javaScript и также подключим его:
<script type="text/javascript" src="js/script.js"></script>
Затем откроем данный файл и добавим следующий код:
$(document).ready(function () {
//kod jquery
});
Этим кодом мы с Вами начинаем работу с библиотекой jQuery, а именно выбираем элемент document при помощи главного метода $ (сокращенная запись jQuery) и вызываем метод ready(). Данный метод позволяет назначить функцию обработчик для события ready. Данное событие сработает после полной загрузки веб-страницы, а значит и выполнится функция, описанная в данном методе. В теле данной функции мы с Вами и будем вести кодирование (используя библиотеку jquery).
Добавление нужных HTML элементов
Перед тем как работать с javaScript, необходимо добавить некоторые элементы к нашему скрипту, а именно блок с ссылками для управления сортировкой. И два пустых вспомогательных блока, которые необходимы для более красивого оформления процесса сортировки. Итак, открываем файл index.php и добавим следующий код сразу же после открывающего тега div с классом sort:
<div id="fon"></div> <div id="load"></div> <div class="sort"> Сортировать по:<strong>имени</strong>(<span id="namea">от А до Я</span>/ <span id="named">от Я до А</span>); <strong>цене</strong>(<span id="pricea">возрастание</span>/<span id="priced">убывание</span>) </div>
Блок div с идентификатором fon необходим, что бы на время передачи информации на сервер о сортировке (другими словами на время выполнения процесса сортировки), затемнить (в нашем случае наложить сверху блока — полупрозрачный элемент белого цвета) немного основной контент – каталог интернет магазина. Блок с идентификатором load – нужен для отображения по центру контента изображения, показывающего, что выполняется обмен информации с сервером. И наконец, блок div с идентификатором sort – содержит ссылки для управления сортировкой. Теперь давайте в файл стилей, добавим следующий код:
.sort {
margin:20px 0px 0px 20px;
}
.sort span {
color:blue;
text-decoration: underline;
cursor: pointer;
}
#fon {
display:none;
opacity:0.8;
position:absolute;
width:700px;
height:100%;
z-index:100;
background-color:white
}
#load {
background-image: url("images/loading17.gif");
position:fixed;
left:40%;
top:50%;
width:65px;
height:65px;
z-index:150;
display:none;
}
Механизм сортировки
Теперь нам необходимо создать механизм сортировки на языке PHP, а уже потом приступать к методу AJAX. Итак, откроем файл functions.php и изменим код функции get_goods():
function get_goods($db,$id = FALSE) {
//Запрос на выборку все товаров
$sql = "SELECT * FROM magazine";
if($id) {
if($id == 'namea') {
$sql .= ' ORDER BY title ASC';
}
else if ($id == 'named') {
$sql .= ' ORDER BY title DESC';
}
else if ($id == 'pricea') {
$sql .= ' ORDER BY price ASC';
}
else if ($id == 'priced') {
$sql .= ' ORDER BY price DESC';
}
}
$result = mysqli_query($db,$sql);
for($i = 0;$i < mysqli_num_rows($result); $i++) {
$goods[] = mysqli_fetch_array($result);
}
return $goods;
}
Как Вы видите, я добавил еще один необязательный параметр для данной функции (параметр $id) — этот параметр содержит в себе тип сортировки, то есть, по какому параметру будет выполнена сортировка товаров. Далее простые условные операторы if, которые проверяют значение параметра id. Если произойдет совпадение и выполнится один из операторов, то мы добавляем к уже созданному SQL запросу – параметры для выборки данных из базы данных с учетом требуемой сортировки. В конце как обычно формируем и возвращаем массив с полученными данными.
Теперь давайте вернемся в файл index.php и добавим код, который будет принимать и обрабатывать параметры для сортировки, переданные через адресную строку:
if($_GET['sort_id']) {
$id = strip_tags($_GET['sort_id']);
$goods = get_goods($db,$id);
foreach($goods as $item) {
printf('<li>
<img src="images/%s">
<p id="title">%s</p>
<p id="price">%s руб.</p>
</li>',$item['img'],$item['title'],$item['price']);
}
exit();
}
else {
$goods = get_goods($db);
}
То есть, если передать через адресную строку параметр ‘sort_id’ – в котором будет содержаться тип сортировки, то функция get_goods будет вызвана уже с учетом данного типа (то есть вторым параметром мы ей передадим значение типа сортировки). Далее мы просто используя цикл foreach обходим полученный массив товаров и выводим его на экран. После вывода данных завершаем работу скрипта, путем вызова функции exit(). Если же параметр ‘sort_id’ – не передается, значит отработает блок else и функция get_goods – будет вызвана как обычно.
Вы спросите, зачем выводить полученные отсортированные данные перед основным кодом, да и в конце вообще завершать работу скрипта. Смотрите мы же для сортировки будем использовать метод AJAX, то есть по нажатию на соответствующую ссылку, с типом сортировки. Мы с Вами обратимся на сервер, и отправим ему данные методом GET (другими словами через адресную строку), сервер обработает эти данные исходя из кода, который мы с Вами только что добавили, сформирует массив товаров и попытается вывести его на экран (цикл foreach). Но мы же ведь обращаемся к файлу через AJAX – асинхронно, и поэтому на экран как бы ничего не можем вывести, поэтому весь вывод, будет являться ответом от сервера при успешно выполненном запросе. Который мы с Вами будем в дальнейшем использовать.
Кодируем на javaScript
Теперь переходим в файл script.js и добавим следующий код:
$(document).ready(function () {
$(".sort span").click(function () {
var id = $(this).attr('id');
$("#fon").css({'display':'block'});
$("#load").fadeIn(1000,function () {
$.ajax({
url:'index.php',
data:'sort_id='+id,//sort_id=pricea
type:'get',
success:function (html) {
$("#tovar").html(html).hide().fadeIn(2000);
$("#fon").css({'display':'none'});
$("#load").fadeOut(1000);
}
});
});
});
});
Итак, смотрите, первым делом необходимо назначить функцию обработчик для события клик мышью по ссылкам управления сортировкой. Для этого выбираем блок с span, содержащийся в блоке с классом sort. Далее вызовем методе click и опишем функцию. Затем в теле данной функции мы с Вами прочитаем значения атрибута id выбранного элемента. Далее используя метод css показываем полупрозрачный блок с идентификатором fon, затем выбираем юлок с идентификатором load и вызываем метод fadeIn()то есть со скоростью в 1000 миллисекунд . Как только выполняться все анимационные эффекты – будет выполнена функция описанная в методе fadeIn вторым параметром. Далее обращаемся к AJAX и рассмотрим все его настройки:
url – адрес файла к которому Вы хотите обратится;
data -данные отправляемые на сервер;
type – тип запросов;
success – событие срабатывает, когда запрос на сервер будет успешно выполнен. Внутри данного события мы с Вами описываем функцию, которая будет выполняться после успешного выполнения запроса.
Теперь смотрите переменная html – это ответ от сервера и это ничто иное как весь вывод на экран, того файла к которому мы с Вами обращаемся. Значит мы можем значение данной переменной — просто вывести на экран. Что собственно я и проделываю ($(«#tovar»).html(html).hide().fadeIn(2000);
И в конце просто скрываем вспомогательные блоки – fon, load.
Теперь давайте проверим, что получилось. Как Вы видите все работает нормально. В завершении данного урока, хотел бы показать еще один способ получения ответа от сервера. Смотрите, в примере выше мы с Вам ответом от сервера, получали все данные об отсортированных товарах, а можно сделать немножко по другому. Давайте перейдем в файл index.php и изменим блок обработки GET параметров:
if($_GET['sort_id']) {
$id = strip_tags($_GET['sort_id']);
$goods = get_goods($db,$id);
exit(json_encode($goods));
}
else {
$goods = get_goods($db);
}
Теперь ответом от сервера, будет уже строка — массив в формате JSON (JSON – форма представления массивов, объектов в строку.) Далее вернемся в файл script.js и изменим его код:
$(document).ready(function () {
$(".sort span").click(function () {
var id = $(this).attr('id');
$("#fon").css({'display':'block'});
$("#load").fadeIn(1000,function () {
$.ajax({
url:'index.php',
data:'sort_id='+id,//sort_id=pricea
type:'get',
dataType:'json',
success:function (html) {
$("#tovar").html('');
for(value in html) {
$("#tovar").append(
'<li><img src="images/'+
html[value]['img'] +
'"><p id="title">' +
html[value]['title'] +
'</p><p id="price">' +
html[value]['price'] +
'руб.</p></li>'
);
}
$("#tovar").hide().fadeIn(2000);
$("#fon").css({'display':'none'});
$("#load").fadeOut(1000);
}
});
});
});
});
Теперь по изменениям:
Добавлена настройка dataType:’json’ – указывает формат данных приходящих ответом от сервера. В нашем случае это json – а значит данные будут перекодированы и строки в реальный объект или строку.
В обработчике success в теле функции мы получаем доступ к переменной HTML и это ничто иное как массив данных отсортированных товаров. Теперь нам осталось только вывести товары на экран. Для этого используем метод append();
На этом данный урок можно завершать. Надеюсь, он Вам понравился. Удачного кодирования и Всего Вам дорого!
Виктор, добрый день! Спасибо за Ваш урок, очень пригодился. Не могли бы вы показать для этого примера магазина с сортировкой товара как прикрутить постраничную навигацию, бьюсь уже не первый день. Спасибо заранее.
Здравствуйте, Игорь!
Спасибо, Вам за комментарий!
У нас на сайте, по постраничной навигации уже достаточное количество материалов, вот посмотрите может один из этих уроков подойдет Вам:
Если же что то не будет получаться, то пишите к нам на форум, мы Вам обязательно поможем.
Все замечательно, но что, если нужно отправлять не ссылки, а формы — инпуты, слайдеры и т.д.
Спасибо за урок, очень полезный.
Подскажите один момент: у меня на файле обработчике (который мы указываем в url-настройке $.ajax), стоит защита прямого обращения к нему: defined(‘SHOP_1′) or die(‘Access denided’).
Соответственно скрипт, при ответе сервера, по мимо id выдает fatal error. Как решить этот вопрос?
Если константа не установлена, то никак. В этом и суть данной проверки, чтобы закрыть файл от прямого доступа.
Как ее передать в запросе вместе с id-сортировки?
Константа в запросе никак не передается. Делайте единую точку входа, где объявляется константа и там уже принимайте запрос.
У меня сервер возвращает всю индексную страницу сайта + проверочное слово «hello») как так — почему?
Андрей, подскажи, пожалуйста, почему сервер вместе json строкой выкидывает html страницы-обработчика?
Причем сначала все теги, а потом json-строку…
Потому что это вывод. Поскольку это вывод, то он возвращается в качестве ответа вместе с jSON. После формирования JSON обязательно должна идти остановка скрипта (exit), при этом ответ должен идти перед формированием страницы. Посмотрите цикл уроков Каталог товаров, все эти вопросы там рассмотрены.
Ну, конечно, пишу!
Вот прямой код обработчика — index.php:
В итоге дает все теги страницы и json-строку с массивом $prod_br.
Ну никак не могу сообразить, что делаю не так!? Может в параметре url скрипта что-то не то пишу?
Он мне цепляет header и footer — как подключаемые файлы в index.php. Причем делает он это через конфигурационный файл в котором указан путь на активный шаблон (в качестве константы), а уже в нем идет require_once ‘inc/footer.php’ и require_once ‘inc/header.php’.
Андрей, как разрулить сие — подскажи, пожалуйста
Я уже подсказал — нужно перестроить структуру приложения. С вашей структурой кода я не знаком, поэтому что-то более конкретное подсказать не могу. Создайте тему на нашем форуме, покажите код и, возможно, автор урока сможет что-то подсказать.
Почему так все сложно? зачем отправлять get на сортировку. У нас есть страница с товарами их нужно перестроить в нужном порядке на js. загоняем товары на странице в массив, сортируем массив, удаляем со страницы dom с товарами на его место вешаем новый с другим порядком товаров. В этой демке различные способы сортировок novye-podarki.ru без php
Можно сделать еще проще. Заранее подготовить страницу (или ветку) с нужной нам сортировкой, а потом просто одну подменить другой. Не нужно обращений к базе, работаем только с тем, что в данный момент на экране.
А нет ли уроки по вариативный выбор товаров например сделать как здесь: tb.openchinacart.com/p/536571730235.html
Таких уроков у нас пока нет.