Сортировка товаров в каталоге интернет магазина

Дата публикации: 2013-10-17

От автора: создавая интернет магазин, всегда необходимо создавать механизм сортировки товаров в каталоге по различным параметрам. Поэтому в данном уроке мы с Вами научимся создавать сортировку товаров в интернет магазине по имени и по цене, используя технологию AJAX.

Обзор тестового сайта

Итак, для сегодняшнего урока я подготовил вот такую заготовку интернет магазина. Скажем так – это страница отображения товаров.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Давайте кратко рассмотрим исходный код данного примера. Итак файл 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 – содержит ссылки для управления сортировкой. Теперь давайте в файл стилей, добавим следующий код:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

.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();

На этом данный урок можно завершать. Надеюсь, он Вам понравился. Удачного кодирования и Всего Вам дорого!

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее