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

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

От автора: создавая интернет магазин, всегда необходимо создавать механизм сортировки товаров в каталоге по различным параметрам. Поэтому в данном уроке мы с Вами научимся создавать сортировку товаров в интернет магазине по имени и по цене, используя технологию 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();

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

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (14)

  1. Игорь

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

  2. Нект

    Все замечательно, но что, если нужно отправлять не ссылки, а формы — инпуты, слайдеры и т.д.

  3. Евгений

    Спасибо за урок, очень полезный.
    Подскажите один момент: у меня на файле обработчике (который мы указываем в url-настройке $.ajax), стоит защита прямого обращения к нему: defined(‘SHOP_1′) or die(‘Access denided’).
    Соответственно скрипт, при ответе сервера, по мимо id выдает fatal error. Как решить этот вопрос?

    • Андрей Кудлай

      Если константа не установлена, то никак. В этом и суть данной проверки, чтобы закрыть файл от прямого доступа.

      • Евгений

        Как ее передать в запросе вместе с id-сортировки?

        • Андрей Кудлай

          Константа в запросе никак не передается. Делайте единую точку входа, где объявляется константа и там уже принимайте запрос.

  4. Евгений

    У меня сервер возвращает всю индексную страницу сайта + проверочное слово «hello») как так — почему?

  5. Евгений

    Андрей, подскажи, пожалуйста, почему сервер вместе 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’.

        Андрей, как разрулить сие — подскажи, пожалуйста

        • Андрей Кудлай

          Я уже подсказал — нужно перестроить структуру приложения. С вашей структурой кода я не знаком, поэтому что-то более конкретное подсказать не могу. Создайте тему на нашем форуме, покажите код и, возможно, автор урока сможет что-то подсказать.

  6. Дмитрий

    Почему так все сложно? зачем отправлять get на сортировку. У нас есть страница с товарами их нужно перестроить в нужном порядке на js. загоняем товары на странице в массив, сортируем массив, удаляем со страницы dom с товарами на его место вешаем новый с другим порядком товаров. В этой демке различные способы сортировок novye-podarki.ru без php

    Можно сделать еще проще. Заранее подготовить страницу (или ветку) с нужной нам сортировкой, а потом просто одну подменить другой. Не нужно обращений к базе, работаем только с тем, что в данный момент на экране.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree