Ефект перетягування товарів в кошик

14

Від автора: на сьогоднішній день інтернет магазини займають одну з найбільш популярних ніш в інтернеті, цей урок допоможе вам осягнути деякі хитрощі незвичайного ефекту для створення Вашого оригінального інтернет магазину.

У цьому уроці ми реалізуємо можливість переміщення товарів у кошик за допомогою мишки на основі таких бібліотек як jQuery і jQuery UI, а також використовуючи метод AJAX.

Ефект перетягування товарів в кошикЕфект перетягування товарів в кошик

1. Введення.

Отже, для початку кілька слів про бібліотеки, які ми будемо використовувати.

jQuery — це бібліотека, написана на мові Javascript, якщо говорити простіше, то це набір готових функцій, для полегшення взаємодії Javascript і HTML. Ця бібліотека дозволяє легко і швидко отримати доступ до будь-якого елементу нашої сторінки.

jQuery UI – це також бібліотека, написана на мові Javascript, але з її допомогою можна легко і швидко створювати різні анімаційні ефекти, виводити різноманітні віджети, модальні вікна і багато іншого.

AJAX – це спосіб, який дозволяє нам отримувати так звані інтерактивні веб-сторінки, тобто обмінюватися даними з сервером, без перезавантаження сторінки в браузері. З допомогою Javascript відправляються асинхронні запити до сервера, а дані повертаються назад до користувача у форматі XML(extensible markup language-розширювана мова розмітки). Асинхронний запит – це запит до сервера без перезавантаження веб-сторінки в браузері.

2. Підготовка до уроку.

Для роботи нам з Вами потрібно, щось схоже на інтернет магазин, або ж якийсь простенький сайтик з каталогом товарів. Я заздалегідь підготував заготовку для інтернет магазину – це всього одна сторінка з набором товарів і кошиком. Ось так виглядає файлова система моєї заготовки:

images
connect.php
index.php
style.css

Також я створив базу даних for_cart з однією таблицею, під назвою magazine. У ній зберігаються всі дані по товарах: назва, ціна шлях до зображення товару. У файлі connect.php ми виконуємо звичайне підключення до бази даних:

У файлі index.php ми на початку, підключаємо файл connect.php потім формуємо запит на вибірку всіх товарів з бази даних, далі виконуємо даний запит і зберігаємо товари в масиві $goods. І далі, просто, виводимо ці товари на екран, використовуючи цикл foreach() для поступового проходу по масиву $goods. Як Ви бачите, нічого складного в цьому немає:

    >

  • Ефект перетягування товарів в кошик

    руб.

    Видалити

Зверніть увагу, я додав для кожного товару посилання – ВИДАЛИТИ, вона буде використовуватися нами для видалення товарів з кошика. І коли товар ще не в кошику, посилання не буде видно (вона прихована за допомогою css). Також спочатку прихована посилання –Оформити замовлення, яка буде з’являтися при додаванні товарів в кошик. І останнє, я створив порожній блок ol в кошику, в який ми будемо складати товари, переміщені в корзину.

І останній файл-це файл стилів style.css:

#wrap{margin:0px auto 0px atuo;padding:10px;border:1px solid #074776;border-radius:10px;
-moz-border-radius:10px;width:950px;background-image:url(images/clock.jpg);
background-position:left top;
background-repeat:no-repeat;}
#header {height:100px;border-bottom:10px solid #d2d2d2;}
h2 {margin-top:0px;margin-left:160px;}
#header p {margin-left:160px;}
#footer {height:50px;border-top:10px solid #d2d2d2;clear:both;}
h5 {text-align:center;}
#main {border-right:1px solid #074776;width:700px;float:left;}
#sidebar {width:246px;float:left;}
#stuff {margin:0px;padding:0px}
#stuff li{border:1px solid #074776;border-radius:5px;-moz-border-radius:5px;float:left;
width:165px;padding:10px;margin:20px;height:250px;cursor:move;list-style:none;}
li {list-style:none}
#stuff img {margin-left:20px;}
#title {text-align:center;margin:0px;color:#35a83e;font-size:1.2 em;font-weight:bold;}
#price {text-align:center;margin:0px;color:red;font-size:1.4 em;font-weight:bold;}
#cart {width:190px;min-height:200px;border:1px solid #074776;margin:0px 0px 0px 30px;
padding:5px;}
#header_cart {width:200px;border:1px solid #074776;margin:10px 0px 0px 30px;
background-color:#f2f2f2;text-align:center;}
#for_tovar {margin:20px;font-size:1.4 em;font-weight:bold;color:red;
text-align:center;background-color:#f6f6f6;}
ol{padding-left:25px;}
ol li {clear:both;margin-bottom:10px;}
#remove_cart {border:1px solid #f2f2f2;font-size:0.8 em;text-align:center;
margin:10px 5px 0px 65px;cursor:pointer;visibility:hidden;}
#open_cart {visibility:hidden;text-align:center;}
#open_cart a {font-size:1.3 em;color:red;}

В папці images розташовані зображення для товарів і шапки сторінки. Ось так виглядає наша заготовка для інтернет магазину:

Ефект перетягування товарів в кошик

Тепер нам необхідно завантажити необхідні бібліотеки. Перша бібліотека — це бібліотека jQuery. Нагадаю, що її можна скачати за адресою http://jquery.com, клікнувши по кнопці Download. Давайте завантажити цю бібліотеку і збережемо в папці js (створимо цю папку і будемо зберігати тут всі скрипти на javascript).

Друга — це бібліотека jQuety UI. Для цього перейдемо на сайт http://jqueryui.com, далі на вкладку Завантажити і завантажити цю бібліотеку. Нагадаю, що завантажити цю бібліотеку можна двома способами, перший це завантажити повну версію бібліотеки з повним набором віджетів і ефектів, а можна виділити галочками тільки те, що Вам потрібно. Я пропоную завантажити тільки те, що необхідно, тому виділимо (галочками в чекбоксах) компоненти ядра бібліотеки, потім виділяємо компоненти взаємодій з елементами Draggable і Droppable), і всі ефекти (віджети нам не потрібні). Після виділення вибираємо колірну тему — No Theme (колірна тема нам не знадобиться) і натискаємо кнопку Download. Після скачування розпаковуємо архів і знаходимо папку js — в ній міститься бібліотека jQuery UI. Копіюємо її в нашу створену папку js і підключаємо викачані бібліотеки у файлі index.php:

3. Реалізуємо можливість переміщення товарів.

Тепер, коли всі приготування завершені і необхідні бібліотеки підключені, давайте реалізуємо можливість перетягування наших товарів. Для цього насамперед відкриємо теги script між тегами head і опишемо код для роботи з бібліотекою jQuery:

$(document).ready(function() {
//код jquery
});

Тут ми і будемо вести подальше кодування.

Тепер, давайте з допомогою jQuery, зробимо вибірку кожного елементу товару (укладеного між тегами li) і застосуємо до вибірці метод draggable(), який дозволяє нам робити об’єкти перетаскиваемыми:

$(«#stuff li»).draggable({
helper: «clone»,
cursor: «move»,
revert: «invalid»,
opacity: 0.8,
});

Зверніть увагу, що при виклику методу draggable, можна вказати наступні параметри:

helper: «clone» — дозволяє перетягнути елемент робити його копію, тобто ми переміщаємо не сам елемент, а його копію;

cursor: «move» — вид курсору при переміщенні елемента;

revert: «invalid — це властивість означає, що якщо переміщуваний елемент не буде покладено у кошик(або будь-який інший елемент використовується при виклику методу droppable(), але про цьому методі пізніше);

opacity: 0.8 — прозорість рухомого об’єкта(20%).

Тепер давайте подивимося в браузері, що у нас вийшло:

Ефект перетягування товарів в кошик

Як бачите товари тепер можна переміщати, але так як ми ще не реалізували можливість кошика приймати елементи, то переміщувані товари повертаються назад до свого початкового положення.

4. Реалізуємо переміщення товарів у кошик.

Для того, що б наша кошик могла приймати товари, необхідно насамперед провести вибірку цього кошика за допомогою jQuery за ідентифікатором #cart, а потім викликати його метод droppable(), який дає можливість елементам як би приймати в себе інші елементи, переміщені за допомогою методу draggable(). Давайте це зробимо:

$(«#cart»).droppable({
activeClass: «active_cart»,
hoverClass: «hover_cart»,
accept: «#stuff > li»,
drop: function( event, ui ) {
//Прибираємо напис — Перетягнути товар у кошик!!!
$(this).find( «#for_tovar» ).remove();
//Копіюємо вміст рухомого блоку і записуємо в змінну
var clone = ui.draggable.clone();
//Додаємо стилів до елементів переміщуваного
clone.css({‘height’:’90px’,’listStyle’:’decimal’});
clone.find(«p»).css({‘fontSize’:’1em’});
clone.find(«#remove_cart»).css({‘visibility’:’visible’});
clone.find(«img»).css({‘width’:’125px’}).animate({‘width’:’60px’})
.css({‘float’:’left’});
//Вставляємо копію переміщуваного елемента в кошик між тегами
$(«#cart ol»).append(clone);
//Показуємо посилання Оформити замовлення
$(«#open_cart»).css({‘visibility’:’visible’});
}
});

Зверніть увагу, що у методу droppable() є також свої властивості:

activeClass: «active_cart» — це властивість приймає ім’я класу, який буде призначений елементу якого застосовано метод droppable() (у нашому випадку це кошик), коли почалося переміщення одного з товарів. Таким чином ми з Вами можемо реалізувати можливість, що при переміщенні товарів, кошику буде призначатися клас active_cart у якого ми пропишемо правила для кольору фону, тобто кошик буде як би підсвічуватися, вказуючи користувачеві куди потрібно покласти товар.

hoverClass: «hover_cart» – клас, який буде призначений кошику, коли переміщуваний елемент (товар) буде над її площиною (простіше кажучи над кошиком).

accept: «#stuff > li» – в цьому властивості вказуємо вибірку елементів які може приймати кошик, в нашому випадку кошик приймає тільки прямих нащадків контейнера з ідентифікатором #stuff і ці нащадки повинні бути укладені в теги li.

drop: — тут описуємо функцію яка виконається, коли переміщуваний елемент (товар), виявиться в кошику. Перше, що ми робимо в цій функції – це звертаємося до нашої вибірки (а у нс обрана кошик #cart), за допомогою ключового слова $(this). Далі застосовуємо метод find( «#for_tovar» ), який дозволяє знайти у вибірці дочірні елементи. А які дочірні елементи потрібно шукати, ми передаємо цього методу параметром. Потім викликаємо метод remove() з допомогою якого можна видалити знайдений дочірній елемент. Тобто ми прибираємо напис, Перетягнути товар у кошик!!!. Далі створюємо змінну clone в яку записуємо копію переміщуваного об’єкту. Переміщуваний об’єкт знаходиться у властивості draggable об’єкта ui, для якого ми викликаємо метод clone(), який виконує копіювання вибірки і повертає вже обрану копію. Це ми робимо для того, що б коли товар виявиться в кошику він також залишився б в магазині, а не переміщався б повністю з магазину в кошик. Потім використовуючи метод find() і призначаємо правила css для різних елементів нашого товару. А саме зменшуємо шрифт у всіх абзацах, додаємо номер для кожного доданого товару, відкриваємо посилання для видалення товарів (ідентифікатор remove_cart). Всі правила css призначаємо з допомогою методу css(), який параметром приймає правила css. Для зображення товару спочатку вказуємо його первісну ширину, з допомогою методу css(), потім використовуючи метод animate() плавно зменшуємо розмір зазначених величин. Метод animate() – дозволяє створювати власну анімацію елементів. Якщо передані цим методом параметри (правила css), відрізняються від призначених правил, значить відбудеться плавне зміна блоку до значень переданих методом animate() (наприклад, якщо блок має ширину 100 пікселів а методом animate() ми передаємо ширину 50 пікселів, то відбудеться плавне зменшення ширини блоку до 50 пікселів). Потім використовуючи метод .append() вставляємо товари в нашу кошик між тегами ol. Причому особливість цього методу така, що наступні додані методи будуть вставлятися після вже наявних у вибраному блоці елементів (товарів). І в кінці показуємо посилання Оформити замовлення.

Так, тепер додамо в файл style.css класи, які ми описали у властивостях для переміщуваного об’єкту:

.active_cart {
background-color:#f4f4f4;
}
.hover_cart {
background-color:green;
}

І тепер давайте перейдемо в браузер і подивимося що вийшло:

Ефект перетягування товарів в кошик

Як Ви бачите, товари успішно додано в кошик, та ще і з анімацією.

5. Збереження вмісту кошика сесії і вилучення товарів з кошика.

Тепер, коли ми реалізували додавання товарів в корзину, необхідно реалізувати збереження цих товарів у сесії, так як без цього, таке переміщення товарів абсолютно марне, а також необхідно зробити можливість видаляти товари з кошика. Тому давайте цим і займемося.

Кодувати будемо всередині методу droppable(), тому я наведу весь код цього методу, що б вам було зрозуміліше, а потім наведу пояснення по коду:

$(«#cart»).droppable({
activeClass: «active_cart»,
hoverClass: «hover_cart»,
accept: «#stuff > li»,
drop: function( event, ui ) {
//Прибираємо напис — Перетягнути товар у кошик!!!
$(this).find( «#for_tovar» ).remove();
//Копіюємо вміст рухомого блоку і
//записуємо в змінну
var clone = ui.draggable.clone();
//Додаємо стилів до елементів переміщуваного товару
clone.css({‘height’:’90px’,’listStyle’:’decimal’});
clone.find(«p»).css({‘fontSize’:’1em’});
clone.find(«#remove_cart»).css({‘visibility’:’visible’});
clone.find(«img»).css({‘width’:’125px’})
.animate({‘width’:’60px’}).css({‘float’:’left’});
//Зберігаємо назва товару змінної
var title = clone.find(«#title»).html();
//За допомогою ajax звертаємося до фалу add_cart.php для додавання товару
$.ajax({
url:’add_cart.php’,
data:»title=» + title,
type:’POST’,
success: function () {
//Вставляємо копію переміщуваного елемента в кошик між тегами
$(«#cart ol»).append(clone);
//Показуємо посилання Оформити замовлення
$(«#open_cart»).css({‘visibility’:’visible’});
//Реалізуємо можливість вилучення товарів з кошика
//Перевіряємо чи клік по переміщеному товару
clone.click(function(event) {
//В змінну target зберігаємо точку з якої був клік
var target = $(event.target);
//Перевіряємо чи є точка кліка кнопкою видалення
if(target.is(«#remove_cart»)) {
//Зберігаємо назва товару змінної
var title_del = clone.find(«#title»).html();
//За допомогою ajax звертаємося до фалу add_cart.php для видалення товару
$.ajax({
url:’add_cart.php’,
data:»remove=» + title_del,
type:’POST’,
success: function () {
//Приховуємо віддалений товар
clone.fadeOut(500,function() {
//Видаляємо схований блок
$(this).remove();
//Перевіряємо якщо блок порожній то виводимо напис
//Перетягнути товар у кошик!!!
// І приховуємо посилання Оформити замовлення
var cart = $(‘#cart li’).html();
if(cart == null) {
$(«#cart»).prepend(«

Перетягнути товар у кошик!!!

«);
$(«#open_cart»).css({‘visibility’:’hidden’});
}
});
}
});
}
////
});
}
});
}
});

Отже дивіться, як тільки ми з Вами додали необхідних стилів (і поставили анімацію методом animate()) до переміщуваного товару, насамперед зберігаємо в змінної title назву товару. Я буду зберігати в сесії назва товару, але було б краще, звичайно, зберігати якісь унікальні дані, наприклад, артикул товару. Що б за цими даними вже вести пошук даного товару у базі даних, але це вже на Ваш розсуд.

Далі використовуючи бібліотеку jQuery, звертаємося до методу ajax, що б зробити запит до файлу ‘add_cart.php’ (який ми створимо пізніше) і передати дані по товару, а саме назва товару – для запису в сесію.

У методу ajax вказуємо наступні властивості:

url:’add_cart.php’ – адресу файлу на сервері, до якого ми звертаємося;

data:»title=» + title – рядок з даними, які відправляються на сервер, у нашому випадку ми відправляємо на сервер назву товару.

type:’POST’ – тип запиту за допомогою якого передаються дані на сервер, в нашому випадку це запит POST. Зверніть увагу вище, як для запиту типу POST потрібно формувати рядок з даними – спочатку вказуємо ім’я комірки масиву POST, потім через знак = додаємо вже значення цієї комірки (у нашому випадку в масиві POST буде створено осередок з ключем – remove і значення цієї клітинки – буде містяться в змінної title);

success: function () {… — функція яка виконається в результаті успішного запиту до сервера. Якщо запит був вдалий, ми додаємо товар у корзину (відображаємо в кошику) і показуємо посилання Оформити замовлення. Далі для того, щоб користувачі мали можливість видаляти товари з кошика, описуємо обробник події click(). Нагадаю, що цей обробник спрацює, коли по вибраному елементу користувач клацне мишею. Всередині обробника подій описуємо функцію яка буде виконуватися, якщо спрацює обробник події click(). Далі ведемо кодування в цій функції.

Першим ділом в змінну target зберігаємо точку кліка (тобто те місце в нашому товар за яким клікнув користувач), так як обраний у нас весь товар разом із зображенням назвою та ціною, а нам потрібно, що б товар вилучався з кошика при натисканні на кнопку видалити. В змінну event, запишеться об’єкт елемента, за яким стався клік мишею. А у властивості цього об’єкта target зберігається точка кліка, тобто змінну target запишеться вибірка елемента, за яким стався клік мишею. Тому далі перевіряємо, чи є елемент, за яким кликнули мишею блоком з кнопкою – Видалити (нагадаю що це блок з ідентифікатором #remove_cart).

Для перевірки використаємо метод is(), який перевіряє поточну вибірку (яка зберігається в змінної target) на відповідність висловом, переданим їй параметром. Якщо клік був дійсно вироблений по блоку з ідентифікатором #remove_cart, то ми створюємо змінну title_del і записуємо в неї назву товару (яке зберігається в блоці з ідентифікатором #title). Далі вже звичним для нас способом звертаємося до файлу add_cart.php за допомогою методу ajax і передаємо методом POST назву товару. Далі файл add_cart.php видалить з сесії товар з вказаною назвою (ми це розповімо пізніше). Після вдалого запиту ми з допомогою методу fadeOut() приховуємо віддалений товар. Нагадаю, що цей метод дозволяє приховувати вибрані елементи за допомогою анімації.

Час зникнення елемента ми передаємо першим параметром (у нашому випадку це 500 мілісекунд) а другим параметром описуємо функцію, яка виконається по завершенню всіх анімаційних ефектів. У цій функції ми видалимо обраний товар з кошика за допомогою методу remove(). А потім, перевіримо чи є в кошику ще товари. Для цього вибираємо всі елементи li і за допомогою методу html() – отримуємо весь html код цієї вибірки. Потім перевіряємо якщо метод html() повернув нам null, корзина порожня. Значить необхідно показати напис — Перетягнути товар у кошик!!! Для цього вибираємо нашу кошик ідентифікатора і з допомогою методу prepend(), вставляємо дані в кошик. Цей метод дозволяє вставляти дані в обраний блок (дані які передані йому параметром), але його особливість полягає в тому, що дані вставятся перед вже існуючими.

І в кінці просто приховуємо посилання Оформити замовлення з допомогою методу css({‘visibility’:’hidden’});

На цьому з кодуванням на javascript ми закінчили, залишилося тільки створити файл add_cart.php, який буде записувати вміст кошика сесію. Ось код цього файлу:

Як Ви бачите тут все дуже просто – перевіряємо прийшли дані і якщо так, то записуємо в сесію, або видаляємо з сесії. Звичайно, тут можна з’єднатися з базою даних і витягнути ще додаткові дані за замовленням, але це вже на ваш розсуд. Нам для уроку досить і так.

6. Висновок вмісту корзини.

Тепер нам залишилося просто вивести вміст кошика, так як нам не видно дійсно дані записуються в сесію. Для цього створимо файл cart.php з таким вмістом:

«;
echo «

«;
$i = 1;
foreach($_SESSION[‘кошик’] as $item) {
echo «

«;
$i++;
}
echo «

«.$i.»

«.$item.»

«;
echo «

«;
}
else {
echo ‘

Кошик порожній

Повернутися в магазин’;
}
?>
Повернутися в магазин
Оформити замовлення

Як Ви бачите тут все дуже просто – перевіряємо, чи сесія і виводимо дані з допомогою циклу foreach(). Звичайно, можна ще додати стилів у файл style.css:

h3 {
margin:0px;
}
td {
padding:10px;
border:1px solid #074776
}
table {
border:1px solid #074776
}

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

Ефект перетягування товарів в кошик

Тепер якщо перетягнути товари в корзину та натиснути на кнопку оформити замовлення відкривається сторінка кошики з переліком товарів. Також тепер працює вилучення товарів з кошика – зверніть увагу, що з непоганою анімацією.

Звичайно, наш ефект перетягування працює тільки на одній сторінці, так як, якщо перетягнути товари в корзину, і тут же просто оновити сторінку, то товари з кошика зникнуть, але в сесії вони будуть збережені і якщо перетягнути ще один товар і натиснути на кнопку – Оформити замовлення, то в кошику у нас виявиться більше товарів ніж ми очікували. Для вирішення цієї проблеми потрібно просто в кошику перевіряти існує сесія, і якщо так то виводити товари на екран. Але це вже дуже просто, тому на сьогоднішньому уроці ми цим займатися не будемо.

І останній штрих – можна весь код javascript винести в окремий файл. Для цього створимо файл script.js і скопіювати в нього весь код, що міститься між тегами script в файлі index.php і відповідно видалимо цей код у файлі index.php. Потім просто підключимо цей файл:

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

Якщо буде щось незрозуміло або виникнуть питання – пишіть, спробуємо на них відповісти.

Вдалого Вам кодування і до нових зустрічей!