Часть 1. Создание темы Styletour на OpenCart
Мы создадим тему со всем необходимым функционалом для интернет-магазина на OpenCart:
- Категории
- Товары
- Корзина
- Переключение валют
- Переключение языка
- Авторизация
- Регистрация
- Красивый слайдер
- Рекомендуемые товары на главной странице
- Многофункциональная страница карточки товара
- Страница показа товаров выбранной категории
Тема разрабатывается на версии OpenCart 2.3.
- Урок 1. Введение. Организационные вопросы
В первом уроке курса мы:
- пройдемся по организационным моментам
- рассмотрим структуру курса
- узнаем основные источники документации
- остановимся на преимуществах движка по сравнению с его прямыми конкурентами
- узнаем об отличиях оригинальной версии OpenCart от его русскоязычной локализации ocStore
- обозначим необходимое программное обеспечение
- Урок 2. Установка OpenCart
В этом уроке мы пройдем несложную процедуру установки OpenCart. Весь процесс установки занимает всего несколько минут и справится с этим даже неискушенный пользователь, что является дополнительным плюсом в пользу этой замечательной CMS.
- Урок 3. Структура темы OpenCart
В этом уроке мы проанализируем структуру тем для OpenCart. Здесь вы узнаете, по какому принципу работают темы и, соответственно, как правильно создавать тему и как не рекомендуется этого делать.
- Урок 4. Перенос шаблона в структуру темы
В данном уроке мы возьмем сверстанный шаблон и перенесем его целиком в папку новой темы OpenCart. Здесь мы добьемся того, чтобы шаблон в папке темы выглядел точно таким же образом, как и обычный сверстанный шаблон, т.е. мы правильно подключим стили, скрипты и укажем корректные пути к картинкам шаблона.
В этом уроке мы выделим шаблон header.tpl, который отвечает за подключение необходимых для работы шаблона ресурсов, метатеги, а также вывод неизменной части шаблона – шапки, в которой будет находиться меню, корзина и ряд других функций.
- Урок 6. Подключение стилей и скриптов
В этом уроке мы вновь коснемся темы подключения дополнительных ресурсов – стилей и скриптов. В частности, из урока вы узнаете, как подключить общие для всего шаблона ресурсы и как подключить индивидуальные для какой-то страницы стили или скрипты из контроллера.
- Урок 7. Переключение языков
OpenCart реализует паттерн MVC и расширяет его до MVCL. Последний компонент данной аббревиатуры – L (language) - отвечает за мультиязычность. Русская локализация OpenCart – ocStore – предлагает нам по умолчанию два языка: русский и английский. В этом уроке мы реализуем возможность переключения между языками и подробнее узнаем о мультиязычности в OpenCart.
- Урок 8. Переключение валют
Кроме мультиязычности, OpenCart может предложить нам работу с различными валютами. По умолчанию это 3 основных валюты: рубли, доллары и евро.
В этом уроке мы реализуем переключение между валютами, что позволит пользователю просматривать цены товаров в выбранной валюте.
- Урок 9. Авторизация и регистрация
OpenCart, как и любая CMS, конечно же, предлагает нам из коробки такой востребованный функционал, как авторизация и регистрация. В этом уроке мы добавим возможность пользователям зарегистрироваться и затем авторизоваться на нашем сайте.
В этом уроке мы реализуем:
- кнопку корзины, на которой будет выводиться краткая информация о содержимом корзины: количество товаров и итоговая сумма
- наша корзина будет открываться в модальном окне, как это реализуется во многих современных интернет-магазинах
- Урок 11. Меню категорий
В этом уроке мы приступим к выводу категорий в меню создаваемой темы. Наша тема предполагает достаточно стандартное меню категорий, поэтому модуль меню мало чем будет отличаться от дефолтного.
- Урок 12. Слайдшоу в шапке
В создаваемой теме мы реализуем слайдшоу, при этом наше слайдшоу будет выводиться на всю ширину экрана, что несколько усложнит задачу, по сравнению со слайдшоу дефолтной темы, но сделает решение задачи более интересным и познавательным.
- Урок 13. Использование переменной $class
OpenCart предлагает нам к использованию в шаблонах переменную $class, которая позволяет отличать одну страницу от другой. Благодаря этой переменной мы можем по-разному оформлять одни и те же элементы в зависимости от той или иной страницы. В данном уроке мы рассмотрим некоторые примеры использования этой переменной.
В этом уроке мы воспользуемся одним из модулей по умолчанию в OpenCart – это модуль html. Благодаря этому модулю, мы можем выводить произвольный html код в нужном месте шаблона.
Урок 15. Шаблоны column_left и home
В данном уроке мы:
- поработаем с шаблонами column_left, который отвечает за левый сайдбар
- поработаем с шаблоном home, отвечающим за контентную часть главной страницы
- Урок 16. Модуль категорий в сайдбаре
Наш шаблон предполагает наличие меню категорий не только в шапке сайта, но и в сайдбаре. Вывести дополнительное меню категорий – проще простого. Для этого мы воспользуемся готовым модулем категорий, который и назначим для шаблона column_left. Нам лишь останется оформить содержимое модуля, согласно верстке шаблона.
- Урок 17. Модуль HTML в сайдбаре
Наш шаблон предполагает наличие в сайдбаре, кроме меню категорий, еще и краткой информации о магазине. Вывести эту информацию проще всего через модуль html, что мы и сделаем в данном уроке.
- Урок 18. Модуль рекомендуемых товаров
Как правило, на главной странице выводят список рекомендуемых товаров. Для этого OpenCart предлагает нам соответствующий модуль, которым мы и воспользуемся. Наша задача будет заключаться в переписывании шаблона модуля, чтобы блок товара соответствовал верстке нашего шаблона.
- Урок 19. Добавление товара в корзину
Товары в корзину в OpenCart добавляются без перезагрузки страницы. Отличительной особенностью нашей темы будет свой функционал добавления товара в корзину и показа содержимого корзины в модальном окне, что отличается от функционала дефолтной темы и многих сторонних тем.
- Урок 20. Удаление товара из корзины
В данном уроке мы реализуем удаление товара из корзины. Как и добавление, функция удаления товара будет работать без перезагрузки страницы.
В этом уроке мы поработаем с еще одним общим шаблоном OpenCart – это шаблон footer. В этом шаблоне, как правило, выводится информация о магазине: статьи, условия гарантии, о доставке и прочая информация для покупателей.
- Уроки 22-25. Карточка товара. Части 1-4
Мы завершили работу над главной страницей и переходим к работе с шаблоном, отвечающим за показ карточки товара. В карточке товара достаточно много функционала, поэтому мы уделим этому шаблону 4 отдельных урока.
Здесь мы реализуем такие функции, как:
- показ основного и дополнительных изображений товара
- возможность просмотра изображений в модальном окне
- вкладки с показом описания товара, его характеристик и отзывами к товару
- возможность комментирования пользователями товара
- вывод опций товара и информации о нем
- возможность добавления в корзину выбранного количества товара
- Уроки №26-28. Шаблон категории. Части 1-3
В следующих трех уроках мы с вами создадим шаблон для показа товаров выбранной категории. Здесь мы используем уже готовый блок товара из шаблона рекомендуемых товаров, который просто выведем в цикле. Особый интерес будет представлять работа с пагинацией (постраничной навигацией) и исправление некоторого бага в работе пагинации, который присутствует в данной версии OpenCart.
Также мы реализуем необходимый для шаблона категорий функционал: возможность сортировки товаров, возможность выбора количества товаров на страницу и другое.
В этом уроке мы поработаем с еще одним необходимым шаблоном любой темы – это шаблон корзины. Здесь мы можем просмотреть содержимое корзины, изменить его, удалив товар или изменив его количество, а также перейти к оформлению заказа.
В этом уроке мы рассмотрим вариант создания простейшего модуля. Эта тема немного выходит за рамки нашего курса, который посвящен созданию тем для OpenCart. Тем не менее, я решил коснуться и данного вопроса, знание которого позволит вам в дальнейшем создавать не только темы, но и модули для OpenCart.
- Урок 31. Модификаторы OCMOD
В этом уроке мы рассмотрим еще один вариант расширения OpenCart. Здесь мы познакомимся с понятием модификаторы OCMOD. OCMOD – это встроенная система, которая позволяет изменять поведение имеющегося функционала или же добавлять новый функционал. При этом работать с модификаторами очень удобно.
- Часть 2. Создание темы Resale на OpenCart
Мы создадим тему со всем необходимым функционалом для интернет-магазина на OpenCart:
- Нестандартное меню категорий (для каждой категории выводится своя картинка-иконка)
- Товары
- Корзина
- Переключение валют
- Переключение языка
- Авторизация
- Регистрация
- Рекомендуемые товары на главной странице
- Многофункциональная страница карточки товара
- Страница показа товаров выбранной категории
Тема разрабатывается на версии OpenCart 2.1.
- Урок 1. Установка OpenCart
Поскольку данную тему мы создаем на другой версии OpenCart, нам необходимо установить эту версию. В данном уроке мы установим нужную версию OpenCart.
- Урок 2. Перенос шаблона в структуру темы
Данную тему мы будем создавать по тому же принципу, что и предыдущую. Начнем мы с переноса верстки в папку новой темы и добьемся той же картинки, что и в верстке: правильно подключенные стили, скрипты и картинки.
В этом уроке мы создадим шаблон header и вынесем в него весь код, отвечающий за шапку сайта. Также выведем все необходимые переменные, отвечающие за вывод метатегов, подключение стилей и скриптов и т.д.
- Урок 4. Переключение языков
В этом уроке мы реализуем переключение языков и создадим соответствующий шаблон, отвечающий за список языков. Процесс по сути будет идентичен аналогичному уроку из предыдущей темы.
Здесь мы создадим необходимый шаблон для показа кнопки корзины, при клике на которую выводится краткая информация по содержимому корзины: количество товаров и общая сумма.
- Уроки №6-8. Создание модуля категорий. Части 1-3
Следующие три урока мы посвятим созданию модуля категорий, согласно требованиям имеющейся верстки. В результате мы создадим оригинальный модуль для вывода категорий, каждая из которых имеет свою иконку и свое оформление. Также мы рассмотрим некоторые другие варианты создания такого меню.
- Уроки №9-10. Модуль рекомендуемых товаров. Части 1-2
Следующие пару уроков будут посвящены выводу рекомендуемых товаров и созданию соответствующего модуля.
- Уроки 11-13. Шаблон категорий. 3 части
Используемая нами верстка предлагает достаточно интересный и красивый шаблон для страницы выбранной категории.
Созданию шаблона категорий мы уделим сразу три урока, чтобы получить как можно более качественный результат.
- Уроки №14-16. Товары категории. 3 части
Здесь мы будем работать над выводом товаров выбранной категории.
- Уроки №17-18. Карточка товара. Части 1-2
Предпоследние два урока мы посвятим работе с карточкой товара. Здесь мы также выведем весь необходимый функционал: галерея товара, его описание, возможность добавления в корзину и прочее.
В завершающем уроке по созданию данной темы мы будем работать с шаблоном корзины.
