Туторіал компонент інтерактивної SVG картограми для InstantCMS 2
Переваги та недоліки InstantCMS2
З мінусів - кількість модулів, доповнень, тим для цього двигуна досить обмежено. Якість технічної підтримки трохи кульгає. Живої активної спільноти навколо цього двигуна немає, а реєстрація на форумі взагалі тільки на запрошення. Але всі ці мінуси з лишком перекриває факт безкоштовності двигуна InstantCMS 2.
Завантажити двигун InstantCMS 2 з функцією авто-установки можна з офіційного сайту проекту. Процес установки добре документований та інтуїтивно зрозумілий.
Свій компонент для InstantCMS2
Перейдемо безпосередньо до питання написання окремого компонента.
Далі в цій папці створюємо файл frontend.php – це головний файл, без якого компонент не працюватиме.
У цьому файлі створюємо клас з такою самою назвою. Назва класу збігається з назвою папки. І цей клас успадковується від системного класу cmsFrontend. У цьому класі ми маємо можливість додавати методи, що описують дії компонента. Що таке дії компонента? Погляньмо на таке зображення:
Як визначається дія компонента? Визначається публічний метод у класі компонента, який називається action Назва Дії З Великої Букви. Для головної сторінки компонента siteaddress.ru/newcomponent/ необхідно визначити метод actionIndex(). Для внутрішньої сторінки компонента siteaddress.ru/newcomponent/act/ необхідно визначити метод actionAct().
Файл frontend.php
Файл model.php
Рядок $template->render('index'); визначає висновок справжнього шаблону, який має бути створений у директорії \SiteDirectory\templates\default\controllers\newcomponent\. Де\default - назва теми, що використовується на сайті (можна знайти і завантажити нову тему з сайту спільноти instantcms і змінити тему, що використовується через адмінку), папку \newcomponent необхідно буде створити самостійно, це папка для шаблонів нового компонента. У цій папці має бути створений файл index.tpl.php для головної сторінки компонента, і act.tpl.php — для внутрішньої.
Файл index.tpl.php
Внутрішня сторінка компонента міститиме форму вибору параметрів. Для початку створимо папку \forms\ у папці нашого компонента \SiteDirectory\system\controllers\newcomponent\. У директорії \SiteDirectory\system\controllers\newcomponent\forms\ створюємо файл form_newForm.php Форма буде дуже простий, вона пропонує користувачеві вибрати два параметри зі списків.
Файл form_newForm.php
Інтерактивна SVG картограма
Після цього перейдемо до створення шаблону для внутрішньої сторінки компонента /act - створюємо файл act.tpl.php і розміщуємо його в директорії \SiteDirectory\templates\default\controllers\newcomponent\. Для створення унікального сервісу скористаємося розробкою користувача KoGor (користуючись нагодою, хочу передати величезну подяку за проведену KoGor'ом працю та добре оформлену та інтуїтивно зрозумілу статтю) — інфограмою карти України з розподілом по регіонах.
В результаті, у нас має вийде приблизно така приємна карта України:
Вихідні дані для картограми
Насамкінець, невеликий хінт. У дефолтному шаблоні за умовчанням в InstantCMS 2 бічна колонка разом з меню дій зникає при зменшенні ширини вікна браузера. Але на мобільних девайсах зникнення бічної колонки та меню дій вкрай не зручно, т.к. у користувачів пропадає досить багатоможливі дії. Для зміни цієї ситуації можна зробити таке. Знайдіть у директорії \templates\default\css\ файл theme-layout.css, і замініть у ньому шматочок коду
Тобто. за фактом необхідно виправити лише 2 рядки #body aside < display: none; >на #body aside < width:100% !important; >— після цього бічна колонка при зменшенні ширини браузера з'їжджатиме в основну колонку після контенту, що знаходиться в ньому (перед футером).
Вихідний код
Всі описані скрипти та файли можна завантажити в архіві, який потрібно буде просто завантажити та розпакувати у кореневу директорію вашого сайту, що працює на InstantCMS2.
P.S. Про помічені помилки, помилки або неточності прошу писати в особисті повідомлення.
А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»