Приклад реалізації кошика ви можете подивитися на ось цих двох сайтах, додавши товар у кошик: best-instrument.com.ua і kamzol.com.ua. Але хочу попросити додати кілька товарів в кошик щоб було наочніше 😉
Реалізувати редагування кошика без перезавантаження сторінки, на UMI.CMS дуже легко. Давайте подивимося, як це зробити 🙂
Відразу хочу відзначити, що працюю я з tpl-шаблонізатором. Але в причепі, даний метод можна реалізувати і на XSLT. Пробуйте;)
Крок 1. Підключення JS файлів для роботи AJAX на UMI.CMS
Завантажити файли, які відповідають за обробку AJAX кошика ви можете ось тут. Дані файли актуальні для версії 2.9 і вище.
Якщо у вас UMI.CMS версії 2.8.X, то вам потрібні ось ці файли. До речі, в цих файлах реалізований спосіб AJAX додавання товару в кошик, який я детально відписав в статті - Ajax додавання товару в корзину.
Тепер потрібно підключити файли до вашого шаблоном. Для цього вам потрібно взяти викачані файли і розпакувати в папку з вашим шаблоном.
В архіві є дві папки clients і demoold. Файли з папки clients ви кидаєте в корінь сайту, а файли з папки demoold закидаєте в корінь вашого шаблону.
Відкриваєте, якщо у вас є файл header.inc.tpl, якщо немає то той файл в якому є рядки:
і після них підключаєте файл __common.js:
Зверніть увагу на назву шаблону demoold в шляху, воно може відрізнятися від вашого шляху до файлу.
Тепер вам потрібно відкрити __common.js і знайти метод site.utils.js.init
ну і як ви вже здогадалися, змінити шлях до підключається файлів, замість demoold. написати назву вашого шаблону.
Після того, як файли, які відповідають за роботу з кошиком без перезавантаження підключені, можна розважатися далі 😉
Крок 2. Створення tpl-шаблону UMI.CMS відповідає за відображення кошика
Я не буду робити координально змін в своєму макеті, мені головне показати принцип реалізації. Зараз моя кошик виглядати приблизно так:
Я її трохи подредактіруйте, щоб вона виглядала як на прикладах указних на початку статті 😉
Потрібно відкрити файл default.tpl, який розташований \ templates \ названіе_шаблона \ tpls \ emarket \. Тепер потрібно знайти секцію
У цю секцію потрібно додати кнопку, яка викликає форму редагування кошика:
Тепер додайте в ваш файл стилів оформлення цієї кнопки, нехай все буде оформлено красиво 😉
Далі потрібно скористатися макросом, який виведе форму для редагування кошика. Для цього потрібно скористатися макросом% emarket cart ()%
Макрос% emarket cart ()% виводить вміст кошика для поточного користувача.
Після заслання «Редагувати кошик» потрібно вставити:
Далі, потрібно трохи стилізувати форму редагування кошика UMI.CMS, для цього в файл стилів потрібно додати css-код:
Після того, як ви додали css, потрібно додати js-код виклику форми редагування кошика товарів. Для цього потрібно скористатися ось цим jQuery кодом:
Звертаю вашу увагу, на те, що все прив'язане до класів і ідентифікатором, тому, якщо ви будете редагувати під себе, уважно 😉
Далі слід модифікувати файл basket.js, той, який знаходиться в папці вашого шаблону. Відкриваєте файл, знаходите метод site.basket.init і після нього додаєте ось цей метод:
Якщо ви все зробили правильно, то у вас повинні будуть:
- спрацьовувати кнопка «редагувати кошик»;
- можливість видаляти товар з кошика UMI.CMS без перезавантаження сторінки
- можливість редагувати кількість товару в кошику UMI.CMS
До речі, даний метод можна використовувати для створення міні кошика для UMI.CMS. Про це я постараюся написати в одній з наступних статей.