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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Давайте кратко рассмотрим исходный код данного примера. Итак файл 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>

//открываем сессию

//Подключаем файл

include 'functions.php';

$db = connect_db();

$goods = get_goods($db);

<!DOCTYPE html>

<head>

</head>

<body>

<h2>Интернет магазин часов</h2>

<p>Часы на любой вкус!!!</p>

</div>

<? foreach ($goods as $item) : ?>

<li>

</li>

<? endforeach; ?>

</ul>

</div>

Корзина

</div>

<ol>

<p id="remove_cart">Удалить</p>

</li>

<p id="title">Edifience E-3300</p>

<p id="remove_cart">Удалить</p>

</li>

<p id="title">Casio AMW-700</p>

<p id="remove_cart">Удалить</p>

</li></ol>

<ol>

</ol>

<a href="cart.php">Оформить заказ</a>

</div>

<h5>Интернет магазин часов<br>2012г.</h5>

</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

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 и содержит в себе огромнейший набор свойств и методов для работы и взаимодействия с элементами веб-страниц. Поэтому давайте перейдем на официальный сайт – //jquery.com и скачаем данную библиотеку.

Для этого кликаем по ссылке “Download jQuery” и скачиваем последнюю актуальную версию данной библиотеки. Скачанный файл сохраняем в папке js. Теперь в файле index.php необходимо подключить данную. Для этого добавим следующий код:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

1	<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>

1	<script type="text/javascript" src="js/script.js"></script>

Затем откроем данный файл и добавим следующий код:

$(document).ready(function () {
	//kod jquery
});

$(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>

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

.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;
}

.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;
}

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);
}

if($_GET['sort_id']) {

$id = strip_tags($_GET['sort_id']);

$goods = get_goods($db,$id);

foreach($goods as $item) {

printf('<li>

</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);
				}	
				
			});
		});
	});
});

$(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);
}

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);
				}
			});
		});
	});
});

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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