Створення користувальницької теми у OpenCart: введення

1

Від автора: у цій серії уроків я покажу, як створити свої OpenCart теми за допомогою популярного open source E-Commerce фреймворка. У першій частині я поясню базову структуру теми. Стаття передбачає, що у вас є робоча установка OpenCart на локальній машині. Якщо ні, зверніться до онлайн документації OpenCart для установки (установка за межами нашого уроку). Після установки можна приступати!

Побіжний погляд на структуру OpenCart

Створення користувальницької теми у OpenCart: введення

OpenCart побудований по шаблону MVC, який розділяє дані та подання. Вам, як розробнику теми, не потрібно турбуватися і правити всі файли, в яких логіка програми перемішана з кодом шаблону.

OpenCart має вкрай простою структурою папок, коли мова заходить про організацію фреймворка. Всі back end файли знаходяться в папці admin. Файли front end зберігаються в папці catalog. Нам цікава папка catalog, так як в кінці серії уроків ми створимо свою front end тему.

Шаблон проектування OpenCart: MVC-L

Створення користувальницької теми у OpenCart: введення

Створення користувальницької теми у OpenCart: введення

Інтернет-магазин на OpenCart!

Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!

Приступити до створення

Модель, вид, контролер або MVC – вкрай популярний шаблон проектування в розробці ПЗ. OpenCart додає до нього ще один елемент – мова (у чому MVC-L).

В нашому випадку ми будемо розміщувати увесь код теми у view. Якщо швидко пробігтися по структурі catalog, можна зрозуміти, як OpenCart оперує даними.

Огляд елементів

Controller – займається обробкою логіки програми

Language – поділяє залежить від мови інформацію на багатомовних сайтах

Model – отримує дані з back end бази даних

View – тут ми проведемо велику частину часу! Займається рендерингом front end макета

Знайомство з шаром подання

Створення користувальницької теми у OpenCart: введення

Тема OpenCart за замовчуванням розташована в папці view. Цей розділ ми обговоримо в наступній секції. Глибше є ще 2 папки javascript і theme.

Давайте поки що припустимо, що ми помістили всі необхідні JS файли в папку javascript. У цій папці є свої винятки, коли в неї крім JS файлів поміщають файли стилів і зображення. Наприклад, в OpenCart є бібліотека кольорів, яка містить не тільки JS.

Нас цікавить папка theme. У ній є папка default – єдина вбудована тема OpenCart. Не лякайтеся такій глибокій вкладеності папок теми, трохи пізніше ми більш докладно розберемо її. А зараз перейдемо до структури теми.

Створення користувальницької теми у OpenCart: введення

Інтернет-магазин на OpenCart!

Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!

Приступити до створення

Стандартна структура теми

image – як ви здогадалися, тут зберігаються всі зображення теми

stylesheet – код оболонки, зазвичай це стилі

template – за назвою можна зрозуміти, що тут зберігаються всі front end файли шаблонів. Файли шаблонів розбито на модулі для зручності та зрозумілості

Світ шаблонів

Створення користувальницької теми у OpenCart: введення

Як я згадав раніше, в OpenCart відмінно організовані файли шаблонів. У цій статті я постараюся пояснити, як вони відображаються в папці template. Перш ніж ми продовжимо, скажу, що хоча OpenCart і володіє безліччю вбудованих модулів, що забезпечують необхідний функціонал кошика магазину, ви можете створити свої власні модулі під свої потреби. Давайте розберемо категорії шаблонів.

Категоризація шаблонів

common – тут зберігаються файли шаблонів для загальних елементів на різних сторінках. Це шаблони хедер, футер та сайдбар. Ви можете розмістити в цій папці свої шаблони, якщо вони будуть задіяні на різних сторінках. Звідси з ними буде простіше працювати в довгостроковій перспективі. Робити це не обов’язково, але краще робити все так, як повинно бути.

error – шаблон помилки.

information – тут лежать шаблони Contact Page, Sitemap Page і Static informational page.< /p>

module – важлива папка з точки зору типу зберігаються шаблонів. Вище я вже говорив, що ми можемо створювати свої модулі під свої потреби. В цю папку поміщаються файли шаблонів користувальницьких модулів.

Крім описаної структури шаблонів існують і інші папки шаблонів, в яких зберігаються файли шаблонів для окремих сторінок. З точки зору OpenCart це файли шаблонів, прив’язані до певних роутам.

Наприклад, при відвідуванні на front end сторінки My Account, задіюється шаблон з папки catalog/view/theme/default/template/account. У наступних статтях ми дізнаємося, як шукати файл шаблону URL сторінки.

Висновок

Кінець першої частини. Ви вивчили базову структуру теми в OpenCart. У наступній частині ми навчимося створювати власну тему в OpenCart.

Створення користувальницької теми у OpenCart: введення

Інтернет-магазин на OpenCart!

Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!

Приступити до створення