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

12

Від автора: створюючи інтернет магазин, завжди необхідно створювати механізм сортування товарів в каталозі по різним параметрам. Тому в даному уроці ми з Вами навчимося створювати сортування товарів в інтернет магазині по імені і за ціною, використовуючи технологію 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 і також підключимо його:

Потім відкриємо файл і додамо наступний код:

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

Цим кодом ми з Вами починаємо роботу з бібліотекою jQuery, а саме вибираємо елемент document за допомогою головного методу $ (скорочена запис jQuery) і викликаємо метод ready(). Даний метод дозволяє призначити функцію обробник події ready. Дана подія спрацює після повного завантаження веб-сторінок, а значить і виконається функція, описана в даному методі. У тілі даної функції ми з Вами і будемо вести кодування (використовуючи бібліотеку jquery).

Додавання потрібних елементів HTML

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

Сортувати по:імені(від А до Я/ від Я до А); ціні(зростання/спадання)

Блок div id fon потрібен, що б на час передачі інформації на сервер сортування (іншими словами на час виконання процесу сортування), затемнити (в нашому випадку накласти зверху блоку — напівпрозорий елемент білого кольору) трохи основний контент – каталог інтернет магазину. Блок з ідентифікатором load – потрібен для відображення по центру контенту зображення, що показує, що виконується обмін інформацією з сервером. І нарешті, блок div id 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(‘

  • Сортування товарів у каталозі інтернет магазину

    %s

    %s руб.

  • ‘,$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) {
    $(«#stuff»).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 – це відповідь від сервера і це ніщо інше як весь вивід на екран, того файлу, до якого ми з Вами звертаємось. Значить ми можемо значення даної змінної — просто вивести на екран. Що власне я і проробляю ($(«#stuff»).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) {
    $(«#stuff»).html»);
    for(value in html) {
    $(«#stuff»).append(

  • Сортування товарів у каталозі інтернет магазину

    ‘+
    html[value][‘title’] +

    ‘+
    html[value][‘price’] +
    ‘руб.


  • );
    }
    $(«#stuff»).hide().fadeIn(2000);
    $(«#fon»).css({‘display’:’none’});
    $(«#load»).fadeOut(1000);
    }
    });
    });
    });
    });

    Тепер по змінах:

    Додана настройка dataType:’json’ – вказує формат даних приходять відповіддю від сервера. У нашому випадку це json – а значить дані будуть перекодированы і рядки в реальний об’єкт або рядок.

    В процесорі success в тілі функції ми отримуємо доступ до змінної HTML і це ніщо інше як масив даних, відсортованих товарів. Тепер нам залишилося лише вивести товари на екран. Для цього використовуємо метод append();

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