Керівництво дизайнера

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

Структура папки теми за замовчуванням

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

Папка default містить наступні три папки:

Template (шаблон)

Stylesheet (таблиця стилів)

Папка «stylesheet» містить всі CSS-файли, що визначають елементи стилю інтернет-магазину. Stylesheet.css - це головна таблиця, яка використовується для зміни елементів стилю кожного макета. При створенні таблиць стилів нової теми, ми будемо повертатися до даної таблиці. Модулі слайд-шоу і карусель вимагають власних стилів, тому в папку «stylesheet» вони включені як slideshow.css і carousel.css.

Image (зображення)

Файл «image» є місцем розташування всіх зображень магазину, які з'єднані в .tpl файли. Ці зображення включають кнопки, зірочки рейтингу і стрілочки, видимі на вітрині магазину. Якщо ви плануєте додати власні кнопки, дана папка - це місце для їх відтворення в HTML.

Створити власну тему

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

Шаг1: Створити папку для розміщення нової теми

Відкрийте «/ catalog / view / theme» в кореневій папці вашого магазіна.Здесь буде розташована тема інтернет-магазину OpenCart за замовчуванням. Створюємо нову папку, відповідну імені нової теми. У ній створюємо папки «template», «image» і «stylesheet».

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

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

Створюючи власну тему, файли ядра за замовчуванням повинні залишатися незмінними. Зміни можуть ускладнити процес оновлення вашого магазину. Не забувайте спочатку завантажувати змінюваний файл з папки «default», а потім завантажувати його в папку нової теми. Не завантажуйте файл назад в папку «default». Даним ви можете перезаписати тему за замовчуванням.

OpenCart зможе прочитати вашу тему без необхідності скопіювати або перемістити всі окремих .tpl. png або .css файлів в папку нової теми. Іншими словами, вам необхідно завантажити тільки ті файли, які піддаються модифікації. Наприклад, якщо ви бажаєте змінити файл stylesheet.css в папці default> stylesheet and the account.tpl і в папці default> template> account, то завантажити в папку нової теми вам буде необхідно тільки ці два файли. При виборі теми в панелі адміністратора, OpenCart перевизначити файли stylesheet.css і account.tpl з внесеними змінами по-замовчуванню, зберігши, при цьому, структуру і стиль для інших файлів в папках «stylesheet», «template» і «image».

Щоб зв'язати файл stylesheet.css з новою темою, змініть заголовок в рядку 19 "href =" з:

назва папки «newtheme» будуть замінено на ім'я створюваної користувальницької теми в кореневій папці. Якщо ви плануєте редагування файлів slideshow.css, ie7.css, ie6.css або carousel.css, вам буде необхідно змінити шлях до розташування цих файлів в header.tpl.

Шаг3: Відкрити доступ до нової теми в панелі управління

Щоб зробити нову тему доступною в панелі управління, виконуємо перехід Установки> Вітрина і вибираємо ім'я папки, в якій міститься нова тема, в рядку шаблон магазину.

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

Шаг4: Внести зміни в таблицю стилів

Виконайте редагування елементів стилю нової теми, перш ніж приступати до редагування HTML.

Шаг5: Зміна вмісту шаблонного файлу (необов'язково)

Закінчивши з дизайном, нам може знадобиться змінити структуру або вміст HTML-файлів. Це останній крок створення користувальницької теми OpenCart. Пам'ятайте, ви завжди можете повернутися до теми за замовчуванням, вибравши її серед налаштувань магазина в панелі адміністратора.