Кастомізація шаблонів JBZoo на прикладі демо-сайту (частина 1) - Каталоги та магазин для Joomla
Увага! Даний посібник винятково для нової версії JBZoo 220.
Підготовка до налаштування сайту
Насамперед вам необхідно встановити останні версії Joomla, Zoo та JBZoo. Також для зручності можете їх русифікувати.
Після цього створюємо новий каталог. Даємо назву на власний розсуд. У вас автоматично з'явиться псевдонім, який у майбутньому буде використовуватися для налаштування стилів. У цій статті ми не говоритимемо про стилі. Також виберіть один із шаблонів:
Catalog - від розробників JBZoo;
UIkit - від розробників YooTheme.
Так як JBZoo встановили чистий, наступна сторінка, яку ви побачите, це активація ліцензії. Введіть логін та пароль, які ви отримали поштою після придбання програми.
Створення шаблонів для JBPrice
Перед тим, як ми почнемо додавати елементи до типу матеріалу, потрібно створити папку з шаблонами. Перейдіть цим шляхом
та створіть там папку з такою самою назвою, як псевдонім вашого типу матеріалу. До неї додайте 8 файлів, які ви бачите на зображенні.
Їх можна скопіювати з демо-сайту в папці
попередньо завантаживши його з вашого особистого кабінету на комп'ютер.
Тепер зайдіть у
і створіть папку з назвою jbprice. У ній буде кілька файлів.
Створити два шаблони для ціни. Першийфайл це buttons.php
Щоб перевизначити шаблон, створіть файл full.php
А також positions.xml, в якому будуть прописані позиції всіх шаблонів у налаштуваннях ціни.
Налаштування шаблонів та елемента ціни
Спочатку зайдіть у тип матеріалу. Додати необхідні елементи з Бібліотеки. Обов'язково додайте елемент ціни. Про відмінності елементів Plain та Calc ви можете дізнатися з нашої документації. На демо-сайті встановлено елемент JBZoo Price Plain. Також додайте елемент JBImage. Він відіграватиме велику роль у налаштуваннях матеріалу. Інші на свій розсуд.
Після збереження налаштуйте шаблон teaser, який відповідає за анонс матеріалу. Розставте елементи в такому порядку як на картинках і налаштуйте. На нашому макеті значення ціни і кнопки знаходяться в різних контейнерах. Відповідно, з погляду шаблону, це будуть дві різні позиції. Саме з цієї причини необхідно додати елемент Price Plain двічі та в одній вкажіть створений раніше шаблон price, в іншій buttons.
Перейдіть до шаблону full, щоб налаштувати детальну сторінку товару. Перенесіть елементи, налаштуйте і в ціні встановіть full.
Ціна є однією з найважливіших частин інтернет-магазину. Тому в конструкторі кошика їй відведено свої сторінки з налаштуваннями. Вони знаходяться в помаранчевій шестерні та в Комерції. Спочатку перейдіть на сторінку Параметри. Ви побачите лише один поточний елемент, оскільки інших не створювали. Позиція також буде одна. До неї додайте сам елемент ціни, а також додаткові параметри до нього.
Перейдіть на сторінку Шаблони у матеріалі. Виберіть full. Він відповідає за вигляд ціни на детальній сторінці. Перенесіть елементи у позиції таналаштуйте.
У списку ви побачите шаблони buttons і price, які створили раніше і вказали в шаблоні teaser. У buttons перенесіть системний елемент Кнопки, а в price – лише елемент ціни.
Не забувайте зберігати всі ваші налаштування та зміни.
До речі, всі картинки лежать у папці
Тепер створіть кілька варіацій. Для того, щоб вивелися всі параметри, які ви вказали в налаштуваннях ціни, відразу почніть налаштовувати варіації. Залиште базові налаштування порожніми. Але в них ви обов'язково вкажіть картинку, як уже говорилося раніше. Також встановіть одну з варіацій за промовчанням, яка буде відображатися під час завантаження сторінки. Приклад наповнення варіацій можна подивитися на скріншоті.
Виведення сторінки та остаточні налаштування
Щоб матеріали відображалися на сайті, вам потрібно вивести її через пункт меню. Зайдіть у Меню, Main menu та натисніть Створити. Дайте назву сторінці, вкажіть гарний та зручний аліас. У пункті Тип пункту меню виберіть Zoo, Головна. Праворуч також зазначте, що вона головна. Далі перейдіть до вкладки Параметри. Вкажіть новий каталог.
Для того, щоб у ціні на сторінці відображалася будь-яка валюта, вам необхідно спочатку її додати. Для цього перейдіть в помаранчеву шестерню, Електронну комерцію та на сторінку Курси валют та їх формати. Додати зручний на ваш погляд сервіс і налаштуйте валюту як на картинці зліва. Далі перейдіть на сторінку Основні та вкажіть нову грошову одиницю.
Після всіх дій на сайті ви побачите товари в 3 колонки. На головній сторінці з'являться елементи, які настроїли шаблон teaser.
На детальній сторінці ми бачимобільш повну інформацію про товар, налаштовану у шаблоні full.
Сайт не дуже схожий на те, що на демо. Це тому, що ми не застосували до нього стиль. У цій статті ми лише розібрали, як зробити основні налаштування сайту. У наступній частині ми розповімо про більш тонкі налаштування.
У наступній статті ми застосовуємо стилі як на демо-сайті.