Додаємо відразу кілька товарів в кошик virtuemart, створити сайт просто!

головна joomla virtuemart

Нещодавно попався цікавий проект інтернет магазину на зв'язці joomla 1.5 і Virtuemart 1.1.9. Інтернет магазин з продажу комп'ютерів і комплектуючих. У магазині потрібно було зробити конфигуратор, який повинен забезпечувати можливість вибору потрібних комплектуючих для комп'ютерної збірки.

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

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

Коротко про конфигураторе

Ви напевно зустрічали подібні конфігуратор на інших інтернет магазинах. Функціонал конфігуратора мав бути реалізований в такий спосіб - перейшовши в певну збірку "light X", в ній автоматично вибираються покупцем деякі комплектуючі (мат. Плата, процесор, блок живлення і т.д.).

Висновок потрібної збірки

Далі в модулі отримуємо GET параметр і за алгоритмом виводимо потрібну збірку.

Зовнішній вигляд конфігуратора наступний.

Зліва в сайдбарі була реалізована панелька з інформацією про обрані комплектуючих, ціною за збірку і кнопкою "оформити замовлення". Так само на jQuery були реалізовані динамічно мінливі шкали (шум, продуктивність, споживання).

Додаємо кілька товарів в кошик за один клік

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

Вихід був, але він представлявся непоказним з точки зору використання. Можна було спробувати зробити 1 товар - 1 збірка. Елементи збірки - властивості товару. У такому варіанті ми маємо один товар зі складним опис для кожного властивості, крім того у товару повинна ціна залежатиме від обраних властивостей - тут теж потрібно думати над елегантністю рішення.

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

Рішення прийшло майже відразу. Поколупавши стандартну форму додавання товару в корзину я зрозумів, що можу зробити те ж саме використовуючи технологію Ajax (дозволяє звертатися клієнту до сервера без перезавантаження сторінки) за допомогою фреймворка jQuery. А якщо можна Аяксом додати 1 товар, то що заважає додати циклом кілька товарів? Ну що ж концепція є, залишилося народити код.

Нижче наводиться сам код. В 1-16 рядках описана функція (_post (mass_id, i)), яка відповідає за додавання одного товару. Функція приймає 2 параметра: mass_id - масив ідентифікаторів товарів; i - номер елемента масиву, товар який будемо додавати. Навіщо так складно? можна адже просто передати id товару. Ці заморочки вимушені, про причини стане ясно нижче.

Третій параметр-функція викликається коли post запит оброблений, товар доданий. І ось тут у мене виникли проблеми. Спочатку я пробував викликати функцію _post () циклом по всьому додаються товарам, фігня вийшла, мабуть наступний запит перебиває попередній, в результаті в кошик потрапляє випадкове кількість товарів). Нас це не влаштовує. Потрібно дочекатися коли виконається черговий post запит і потім викликати наступний.

Робиться це як раз за допомогою третього параметра-функції методу jQuery.post (). Ще одна фішка, функція _post () викликається рекурсивно до тих пір поки не пройдемося по всьому масиву. Під кінець рекурсії робимо редирект в кошик.

Таким чином при виконанні функції _post (mass_id, 0) товари з масиву mass_id рекурсивно будуть додані в кошик.

У мене виклик функції _post () робиться кліком по кнопці з ВД add_sborka. Відбувається це в рядках 18-27. Спочатку формується масив ВД товарів виходячи з того що вибрав покупець, потім рекурсивно викликається функція _post ().

Сподіваюся, що матеріал виявиться корисним, до нових зустрічей.