Створення власної теми оформлення

Створення власної теми оформлення#

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

Щоб створити власну тему, потрібні базові знання HTML і CSS. Знання PHP та JavaScript розширять ваші можливості, але для роботи з оформленням вони не обов'язкові.

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

Перш ніж створювати власну тему, варто ознайомитися зі структурою тек стандартної теми, адже нова тема має повторювати цю структуру. Стандартна тема вбудована в модель MVC (Model-View-Controller) ocStore, описану в посібнику розробника. За вигляд магазину відповідає частина View (представлення). Таблиці стилів і шаблони стандартної теми розташовані в теці catalog/view/theme/default кореневої теки магазину:

Тека default містить три теки:

• template
• stylesheet
• image

Template#

Тека template містить файли шаблонів (.tpl). Це суміш HTML і PHP, що задає структуру вебсторінки. PHP-код виконується на сервері й перетворюється на HTML, тож у вихідному коді сторінки в браузері ви його не побачите. Усередині теки template файли згруповано в теки за призначенням.

Шаблони сторінок товару лежать у теці product, шаблони модулів — у module, сторінки облікового запису — в account і так далі. Тека common містить найуживаніші шаблони. Розмітку головної сторінки задає файл home.tpl. Інші файли з common — header.tpl, footer.tpl, column_left.tpl, column_right.tpl тощо — формують окремі частини HTML головної та інших сторінок. В інших теках визначити, який саме файл редагувати, буває складніше. Трапляються однойменні файли .tpl, що відповідають за різні сторінки чи блоки: наприклад, template/module/category.tpl задає структуру блоку модуля «Категорії» на вітрині, а template/product/category.tpl — HTML-структуру сторінки категорії зі списком товарів. Створюючи тему, переглядайте вихідний код потрібної сторінки в браузері й порівнюйте його з відповідними файлами .tpl, щоб зрозуміти, який файл відповідає за який фрагмент сторінки. Докладніше про це — у розділі «Зміна вмісту в шаблонах».

Stylesheet#

Тека stylesheet містить файли .css, які визначають оформлення магазину. Основна таблиця стилів — stylesheet.css: вона впливає на всі сторінки, і саме до неї ми звертатимемося під час роботи над темою. Модулі слайдшоу й каруселі мають власні таблиці стилів — slideshow.css і carousel.css. Також є ie7.css та ie6.css для старих версій Internet Explorer.

Image#

Тека image містить зображення, на які посилаються шаблони .tpl: кнопки, зірочки рейтингу, стрілки тощо. Якщо ви додаєте власні кнопки, у HTML посилайтеся саме на цю теку.

Створення теми#

Ознайомившись зі структурою теки default, можна переходити до створення власної теми. Стратегія така: копіюємо потрібні файли .tpl і .css зі стандартної теми, вносимо в них зміни, а потім завантажуємо їх у теку нової теми в catalog/view/theme. Навряд чи доведеться змінювати всі файли — зазвичай достатньо кількох. Пам'ятайте: що менше файлів ви змінюєте, то простіше буде оновлювати магазин.

Крок 1. Створіть теку нової теми#

Відкрийте теку catalog/view/theme у кореневій теці магазину — там лежить стандартна тема default. Створіть поруч нову теку з назвою вашої теми, а в ній — теки template, image і stylesheet.

Додаючи файл, відтворюйте той самий шлях, що й у теці default. Наприклад, щоб змінити home.tpl, створіть у теці теми теку template, у ній — теку common, і вже туди покладіть home.tpl. Файл stylesheet.css можна одразу скопіювати з default у теку stylesheet нової теми — редагувати його доведеться напевно.

Система перевизначення#

Файли в теці default не змінюємо — вони мають лишатися недоторканими. Щоб змінити файл, скопіюйте його й покладіть за відповідним шляхом у теку нової теми.

ocStore підхоплює вашу тему без копіювання всіх файлів .tpl, .png чи .css у її теку. Інакше кажучи, у теці нової теми мають бути лише ті файли, які ви змінили. Наприклад, якщо ви змінили тільки stylesheet.css (default/stylesheet) і account.tpl (default/template/account), у теку нової теми достатньо покласти ці два файли. Коли тему буде вибрано в адмінці, ocStore використає ваші stylesheet.css і account.tpl замість стандартних, а для решти шаблонів, стилів і зображень — файли з default.

Крок 2. Підключіть stylesheet.css нової теми в header.tpl#

Першим потрібно змінити файл header.tpl. Оригінал лежить у default/template/common. Відкривши його в текстовому редакторі, ви побачите відкривальний тег <html>, весь блок <head></head> і відкривальний тег <body> — тобто header.tpl присутній практично на кожній сторінці магазину. У блоці <head> є посилання на stylesheet.css стандартної теми. Щоб тема використовувала власну таблицю стилів, скопіюйте header.tpl у template/common нової теми й замініть у ньому шлях.

У стандартному header.tpl ocStore 1.5.5.1.2 це рядок 28 (атрибут href). Замініть

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

на

<link rel="stylesheet" type="text/css" href="catalog/view/theme/newtheme/stylesheet/stylesheet.css" />

Замість newtheme вкажіть назву теки вашої теми. Якщо ви плануєте змінювати ie7.css чи ie6.css, так само змініть шляхи до них у header.tpl.

Крок 3. Увімкніть нову тему в адмінці#

Тепер потрібно вибрати тему в адміністративній частині магазину. Відкрийте Система > Налаштування, натисніть «Змінити» навпроти магазину, перейдіть на вкладку «Вітрина» (див. Налаштування :: Магазин) і в полі «Шаблон магазину» виберіть назву теки вашої теми.

Тепер усі зміни у файлах .css і .tpl нової теми можна переглядати в браузері. Якщо ви ще нічого не змінювали, після оновлення головної сторінки відмінностей від стандартної теми не буде — так працює система перевизначення.

Крок 4. Змініть таблицю стилів#

Оформлення теми варто налаштувати до того, як братися за HTML. Як це зробити, описано в розділі «Внесення змін до таблиці стилів».

Крок 5. Змініть вміст шаблонів (необов'язково)#

Завершивши зі стилями, можна змінити структуру чи вміст HTML-шаблонів — див. розділ «Зміна вмісту в шаблонах». Це останній крок створення власної теми. Повернутися до стандартної теми можна будь-коли, вибравши її в налаштуваннях магазину (див. Налаштування).