Після того, як ми завантажили і встановили компонент подивимося наші сніппети, які йдуть в комплекті з компонентом:
- addComparison - сниппет додавання товару в список порівняння
- CompareList - сниппет виведення таблиці порівняння
- getComparison - cніппет для виведення посилання на наявне порівняння товарів в будь-якому місці
Отже, починаємо як завжди з чанкі. Зробимо чанк додавання в порівняння (addComparisonTpl):
Якщо ви уважно подивитеся, то побачите, що відображення у нас буде відрізнятися від того, що на сайті. Таке буває - не потрібно лякатися. Далі викличемо сниппет addComparison в шаблоні товару:
Listid - це ідентифікатор сторінки, на якій у нас буде виводитися таблиця порівняння, ми її створимо трохи пізніше
Id - це ідентифікатор і товару, який буде додано до порівняння
Tpl - це чанк виведення, ми його створили трохи раніше
А в чанка listProductTpl, gridProductTpl і lookedProductTpl викличемо наступним чином:
Тепер нам необхідно створити шаблон, для нашого списку порівняння (порівняння товарів):
- vendor.name - найменування виробника
- price - ціна
- article - артикул
- option.memory - опція "Обсяг пам'яті" (ми створювали її в одному з минулих уроків)
- option.cpucore - опція "Кількість ядер процесора" (ми створювали її в одному з минулих уроків)
Далі нам необхідно створити ресурс з даними шаблоном. Не забудьте поміняти id в чанка listProductTpl, gridProductTpl і lookedProductTpl і шаблоні товару на свій, якщо він відрізняється від 20.
Порівняння товарів у вас повинно працювати, перевірте. А нам залишилося тільки вивести посилання на порівняння в шапку сайту:
Для цього створення чанк (getComparisonTpl):
І викличемо сниппет getComparison в чанка header і headerInner:
Тут, параметр list у мене налаштований тільки на конфігурацію mobile. Для того, щоб налаштувати на інші конфігурації, я б написав для нього сниппет обгортку. Цим ми з вами займемося в заключних частинах курсу.
Ось, в принципі, і все. Можливо, тільки варто підкоригувати стилі на сторінці порівняння.
Оцініть статтю: