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

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

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

скачать исходникискачать урок

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Давайте кратко рассмотрим исходный код данного примера. Итак файл index.php:

Это главный файл данного скрипта, который выводит на экран каталог товаров. Обратите внимание, первым делом я подключаю файл functions.php, в котором содержатся все функции необходимые для работы данного сайта. Далее вызываем функцию connect_db(), которая выполняет соединение с базой данных. Затем выполняем функцию get_goods($db), которая получает товары из базы данных и возвращает массив, содержащий эти товары. Дальше, используя данный массив, мы в цикле выводим все товары на экран.

Теперь давайте рассмотрим исходный код файла functions.php:

Как Вы видите здесь всего лишь две простые функции, назначение которы мы с Вами рассмотрели выше. Их код я пояснять не буду, так как он очень простой. Единственное, что скажу, ято для работы с базой данных я использую расширение языка php mysqli. Так как mysql – уже существенно устарело, и разработчики языка не рекомендуют его использовать.

Далее в папке js мы с Вами будем хранить файлы со скриптами на языке JavaScript. В папке images – содержатся различные изображения товаров. Ну и наконец файл стилей style.css, который содержит правила на языке CSS, для нормального отображения сайта в браузере.

Подключение библиотеки jQuery

Так как мы с Вами будем создавать механизм сортировки используя AJAX, то конечно намного удобнее работать с данной технологией используя библиотеку jQuery. Напомню, что данная библиотека написана на языке javaScript и содержит в себе огромнейший набор свойств и методов для работы и взаимодействия с элементами веб-страниц. Поэтому давайте перейдем на официальный сайт – http://jquery.com и скачаем данную библиотеку.

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

Далее создадим пустой файл script.js, в котором мы с Вами будем писать код на языке javaScript и также подключим его:

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

Этим кодом мы с Вами начинаем работу с библиотекой jQuery, а именно выбираем элемент document при помощи главного метода $ (сокращенная запись jQuery) и вызываем метод ready(). Данный метод позволяет назначить функцию обработчик для события ready. Данное событие сработает после полной загрузки веб-страницы, а значит и выполнится функция, описанная в данном методе. В теле данной функции мы с Вами и будем вести кодирование (используя библиотеку jquery).

Добавление нужных HTML элементов

Перед тем как работать с javaScript, необходимо добавить некоторые элементы к нашему скрипту, а именно блок с ссылками для управления сортировкой. И два пустых вспомогательных блока, которые необходимы для более красивого оформления процесса сортировки. Итак, открываем файл index.php и добавим следующий код сразу же после открывающего тега div с классом sort:

Блок div с идентификатором fon необходим, что бы на время передачи информации на сервер о сортировке (другими словами на время выполнения процесса сортировки), затемнить (в нашем случае наложить сверху блока — полупрозрачный элемент белого цвета) немного основной контент – каталог интернет магазина. Блок с идентификатором load – нужен для отображения по центру контента изображения, показывающего, что выполняется обмен информации с сервером. И наконец, блок div с идентификатором sort – содержит ссылки для управления сортировкой. Теперь давайте в файл стилей, добавим следующий код:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Механизм сортировки

Теперь нам необходимо создать механизм сортировки на языке PHP, а уже потом приступать к методу AJAX. Итак, откроем файл functions.php и изменим код функции get_goods():

Как Вы видите, я добавил еще один необязательный параметр для данной функции (параметр $id) — этот параметр содержит в себе тип сортировки, то есть, по какому параметру будет выполнена сортировка товаров. Далее простые условные операторы if, которые проверяют значение параметра id. Если произойдет совпадение и выполнится один из операторов, то мы добавляем к уже созданному SQL запросу – параметры для выборки данных из базы данных с учетом требуемой сортировки. В конце как обычно формируем и возвращаем массив с полученными данными.

Теперь давайте вернемся в файл index.php и добавим код, который будет принимать и обрабатывать параметры для сортировки, переданные через адресную строку:

То есть, если передать через адресную строку параметр ‘sort_id’ – в котором будет содержаться тип сортировки, то функция get_goods будет вызвана уже с учетом данного типа (то есть вторым параметром мы ей передадим значение типа сортировки). Далее мы просто используя цикл foreach обходим полученный массив товаров и выводим его на экран. После вывода данных завершаем работу скрипта, путем вызова функции exit(). Если же параметр ‘sort_id’ – не передается, значит отработает блок else и функция get_goods – будет вызвана как обычно.

Вы спросите, зачем выводить полученные отсортированные данные перед основным кодом, да и в конце вообще завершать работу скрипта. Смотрите мы же для сортировки будем использовать метод AJAX, то есть по нажатию на соответствующую ссылку, с типом сортировки. Мы с Вами обратимся на сервер, и отправим ему данные методом GET (другими словами через адресную строку), сервер обработает эти данные исходя из кода, который мы с Вами только что добавили, сформирует массив товаров и попытается вывести его на экран (цикл foreach). Но мы же ведь обращаемся к файлу через AJAX – асинхронно, и поэтому на экран как бы ничего не можем вывести, поэтому весь вывод, будет являться ответом от сервера при успешно выполненном запросе. Который мы с Вами будем в дальнейшем использовать.

Кодируем на javaScript

Теперь переходим в файл script.js и добавим следующий код:

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

Теперь ответом от сервера, будет уже строка — массив в формате JSON (JSON – форма представления массивов, объектов в строку.) Далее вернемся в файл script.js и изменим его код:

Теперь по изменениям:

Добавлена настройка dataType:’json’ – указывает формат данных приходящих ответом от сервера. В нашем случае это json – а значит данные будут перекодированы и строки в реальный объект или строку.

В обработчике success в теле функции мы получаем доступ к переменной HTML и это ничто иное как массив данных отсортированных товаров. Теперь нам осталось только вывести товары на экран. Для этого используем метод append();

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки: , ,

Похожие статьи:

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

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

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

  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

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

  7. Testtesttest

    А нет ли уроки по вариативный выбор товаров например сделать как здесь: tb.openchinacart.com/p/536571730235.html

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

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

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

Я не робот.

Spam Protection by WP-SpamFree