Автор(ы): Андрей Кудлай
OpenCart обрел огромную популярность благодаря своей простоте, функциональности и скорости работы. Интернет-магазин на данной платформе оптимизирован под поисковые системы, что значительно уменьшает время на его индексацию поисковиками. Данный инструмент содержит большое количество русскоязычных справочных материалов и документации, также полноценную локализацию на русском языке. Также немаловажным фактором является наличие большого числа российских специалистов, работающих с этой CMS, поэтому в случае необходимости всегда можно получить помощь и поддержку от разработчиков сообщества. Система изначально обладает богатым функционалом, который может быть расширен ещё больше при помощи большого числа всевозможных плагинов и расширений.
Часть 1. Создание темы Styletour на OpenCart
Мы создадим тему со всем необходимым функционалом для интернет-магазина на OpenCart:
Тема разрабатывается на версии OpenCart 2.3.
В первом уроке курса мы:
В этом уроке мы пройдем несложную процедуру установки OpenCart. Весь процесс установки занимает всего несколько минут и справится с этим даже неискушенный пользователь, что является дополнительным плюсом в пользу этой замечательной CMS.
В этом уроке мы проанализируем структуру тем для OpenCart. Здесь вы узнаете, по какому принципу работают темы и, соответственно, как правильно создавать тему и как не рекомендуется этого делать.
В данном уроке мы возьмем сверстанный шаблон и перенесем его целиком в папку новой темы OpenCart. Здесь мы добьемся того, чтобы шаблон в папке темы выглядел точно таким же образом, как и обычный сверстанный шаблон, т.е. мы правильно подключим стили, скрипты и укажем корректные пути к картинкам шаблона.
В этом уроке мы выделим шаблон header.tpl, который отвечает за подключение необходимых для работы шаблона ресурсов, метатеги, а также вывод неизменной части шаблона – шапки, в которой будет находиться меню, корзина и ряд других функций.
В этом уроке мы вновь коснемся темы подключения дополнительных ресурсов – стилей и скриптов. В частности, из урока вы узнаете, как подключить общие для всего шаблона ресурсы и как подключить индивидуальные для какой-то страницы стили или скрипты из контроллера.
OpenCart реализует паттерн MVC и расширяет его до MVCL. Последний компонент данной аббревиатуры – L (language) - отвечает за мультиязычность. Русская локализация OpenCart – ocStore – предлагает нам по умолчанию два языка: русский и английский. В этом уроке мы реализуем возможность переключения между языками и подробнее узнаем о мультиязычности в OpenCart.
Кроме мультиязычности, OpenCart может предложить нам работу с различными валютами. По умолчанию это 3 основных валюты: рубли, доллары и евро.
В этом уроке мы реализуем переключение между валютами, что позволит пользователю просматривать цены товаров в выбранной валюте.
OpenCart, как и любая CMS, конечно же, предлагает нам из коробки такой востребованный функционал, как авторизация и регистрация. В этом уроке мы добавим возможность пользователям зарегистрироваться и затем авторизоваться на нашем сайте.
В этом уроке мы реализуем:
В этом уроке мы приступим к выводу категорий в меню создаваемой темы. Наша тема предполагает достаточно стандартное меню категорий, поэтому модуль меню мало чем будет отличаться от дефолтного.
В создаваемой теме мы реализуем слайдшоу, при этом наше слайдшоу будет выводиться на всю ширину экрана, что несколько усложнит задачу, по сравнению со слайдшоу дефолтной темы, но сделает решение задачи более интересным и познавательным.
OpenCart предлагает нам к использованию в шаблонах переменную $class, которая позволяет отличать одну страницу от другой. Благодаря этой переменной мы можем по-разному оформлять одни и те же элементы в зависимости от той или иной страницы. В данном уроке мы рассмотрим некоторые примеры использования этой переменной.
В этом уроке мы воспользуемся одним из модулей по умолчанию в OpenCart – это модуль html. Благодаря этому модулю, мы можем выводить произвольный html код в нужном месте шаблона.
Урок 15. Шаблоны column_left и home
В данном уроке мы:
Наш шаблон предполагает наличие меню категорий не только в шапке сайта, но и в сайдбаре. Вывести дополнительное меню категорий – проще простого. Для этого мы воспользуемся готовым модулем категорий, который и назначим для шаблона column_left. Нам лишь останется оформить содержимое модуля, согласно верстке шаблона.
Наш шаблон предполагает наличие в сайдбаре, кроме меню категорий, еще и краткой информации о магазине. Вывести эту информацию проще всего через модуль html, что мы и сделаем в данном уроке.
Как правило, на главной странице выводят список рекомендуемых товаров. Для этого OpenCart предлагает нам соответствующий модуль, которым мы и воспользуемся. Наша задача будет заключаться в переписывании шаблона модуля, чтобы блок товара соответствовал верстке нашего шаблона.
Товары в корзину в OpenCart добавляются без перезагрузки страницы. Отличительной особенностью нашей темы будет свой функционал добавления товара в корзину и показа содержимого корзины в модальном окне, что отличается от функционала дефолтной темы и многих сторонних тем.
В данном уроке мы реализуем удаление товара из корзины. Как и добавление, функция удаления товара будет работать без перезагрузки страницы.
В этом уроке мы поработаем с еще одним общим шаблоном OpenCart – это шаблон footer. В этом шаблоне, как правило, выводится информация о магазине: статьи, условия гарантии, о доставке и прочая информация для покупателей.
Мы завершили работу над главной страницей и переходим к работе с шаблоном, отвечающим за показ карточки товара. В карточке товара достаточно много функционала, поэтому мы уделим этому шаблону 4 отдельных урока.
Здесь мы реализуем такие функции, как:
В следующих трех уроках мы с вами создадим шаблон для показа товаров выбранной категории. Здесь мы используем уже готовый блок товара из шаблона рекомендуемых товаров, который просто выведем в цикле. Особый интерес будет представлять работа с пагинацией (постраничной навигацией) и исправление некоторого бага в работе пагинации, который присутствует в данной версии OpenCart.
Также мы реализуем необходимый для шаблона категорий функционал: возможность сортировки товаров, возможность выбора количества товаров на страницу и другое.
В этом уроке мы поработаем с еще одним необходимым шаблоном любой темы – это шаблон корзины. Здесь мы можем просмотреть содержимое корзины, изменить его, удалив товар или изменив его количество, а также перейти к оформлению заказа.
В этом уроке мы рассмотрим вариант создания простейшего модуля. Эта тема немного выходит за рамки нашего курса, который посвящен созданию тем для OpenCart. Тем не менее, я решил коснуться и данного вопроса, знание которого позволит вам в дальнейшем создавать не только темы, но и модули для OpenCart.
В этом уроке мы рассмотрим еще один вариант расширения OpenCart. Здесь мы познакомимся с понятием модификаторы OCMOD. OCMOD – это встроенная система, которая позволяет изменять поведение имеющегося функционала или же добавлять новый функционал. При этом работать с модификаторами очень удобно.
Мы создадим тему со всем необходимым функционалом для интернет-магазина на OpenCart:
Тема разрабатывается на версии OpenCart 2.1.
Поскольку данную тему мы создаем на другой версии OpenCart, нам необходимо установить эту версию. В данном уроке мы установим нужную версию OpenCart.
Данную тему мы будем создавать по тому же принципу, что и предыдущую. Начнем мы с переноса верстки в папку новой темы и добьемся той же картинки, что и в верстке: правильно подключенные стили, скрипты и картинки.
В этом уроке мы создадим шаблон header и вынесем в него весь код, отвечающий за шапку сайта. Также выведем все необходимые переменные, отвечающие за вывод метатегов, подключение стилей и скриптов и т.д.
В этом уроке мы реализуем переключение языков и создадим соответствующий шаблон, отвечающий за список языков. Процесс по сути будет идентичен аналогичному уроку из предыдущей темы.
Здесь мы создадим необходимый шаблон для показа кнопки корзины, при клике на которую выводится краткая информация по содержимому корзины: количество товаров и общая сумма.
Следующие три урока мы посвятим созданию модуля категорий, согласно требованиям имеющейся верстки. В результате мы создадим оригинальный модуль для вывода категорий, каждая из которых имеет свою иконку и свое оформление. Также мы рассмотрим некоторые другие варианты создания такого меню.
Следующие пару уроков будут посвящены выводу рекомендуемых товаров и созданию соответствующего модуля.
Используемая нами верстка предлагает достаточно интересный и красивый шаблон для страницы выбранной категории.
Созданию шаблона категорий мы уделим сразу три урока, чтобы получить как можно более качественный результат.
Здесь мы будем работать над выводом товаров выбранной категории.
Предпоследние два урока мы посвятим работе с карточкой товара. Здесь мы также выведем весь необходимый функционал: галерея товара, его описание, возможность добавления в корзину и прочее.
В завершающем уроке по созданию данной темы мы будем работать с шаблоном корзины.
БОНУС №1. Перенос на хостинг, домен.
После создания сайта на локальном сервере его необходимо перенести на хостинг. В данном бонусе показаны все тонкости переноса готового интернет-магазина на хостинг со сменой при этом доменного имени. Научитесь переносить готовый сайт с локального сервера на хостинг либо с одного хостинга на другой хостинг Поймете, как выбрать хостинг и домен и как грамотно перенести сайт в том случае, если у вас изменяется доменное имя.
БОНУС №2. Подключение онлайн-чата к интернет-магазину
В любом интернет-магазине желательно установить онлайн-чат, чтобы клиенты могли проконсультироваться с менеджером по возникшим вопросам. В этом уроке мы подключим онлайн-чат к магазину и увидим, насколько это просто. Как вы знаете, у клиентов часто возникают различные вопросы по наличию товара, комплектации, цене, гарантиям, возможным характеристикам т.д. И все эти вопросы желательно решить как можно более оперативно. Именно эти вопросы помогает оперативно решить онлайн-чат и дает возможность не потерять потенциального клиента в момент принятия решения о покупке.
БОНУС №3. Виджет обратного звонка для магазина.
Этот бонусный видеокурс посвящен созданию полноценного модификатора OCMOD – виджета обратного звонка. Данное дополнение создается для первой темы, которую мы создадим с нуля – Styletour. Клиент может указать свое имя и контактный телефон, после чего менеджеру на электронную почту придет форма заказа обратного звонка для обработки. После этого менеджер сможет оперативно связаться с клиентом и проконсультировать по возникшим вопросам. Вы не только узнаете принципы написания модификаторов, но и создадите один полноценный модификатор, который можно установить на любой современный. интернет-магазин OpenCart Мы напишем собственное дополнение для виджета обратного звонка, которое можно легко и просто установить на любой интернет-магазин OpenCart – как на ваш, так и любой другой под управлением OpenCart
БОНУС №4. Премиум. Курс по PHP.
В курсе мы будем изучать PHP с нуля. После изучения уроков курса вы должны быть уже достаточно уверенным программистом на PHP, конечно же, при условии успешного изучения материалов курса. Уроки не будут представлять из себя "голую" теорию, я буду стараться максимально разбавлять их практическими рабочими примерами. Для того, чтобы закрепить изученный материал, в конце курса мы с вами создадим простейший динамичный сайт, использующий в своей работе базу данных и паттерн MVC.
Содержание видеокурса:
БОНУС №5. Премиум. Курс по PHP ООП.
Разработка веб-приложений с помощью объектно-ориентированного подхода (ООП) на языке PHP поначалу может сбить с толку тех разработчиков, которые привыкли использовать процедурный (структурный) подход программирования, поэтому в курсе по ООП PHP (объектно-ориентированное программирование) мы рассмотрим все теоретические моменты ООП, а также научимся применять полученные знания на практике.
Содержание видеокурса:
БОНУС №6. Премиум. Курс по MySQL.
Курс рассчитан как на новичков, так и на специалистов, уже имеющих опыт работы с SQL. Здесь вы найдете освещение как теоретических вопросов (например, теория реляционных баз данных, нормализация данных), так и множество практических задач.
Содержание видеокурса:
БОНУС №7. (ТОЛЬКО ДЛЯ PLATINUM-ВЕРСИИ). Курс «Фреймворк Bootstrap: практика адаптивной верстки от А до Я»
На всем русскоязычном пространстве по состоянию на начало 2017 года практически нет ни одного исчерпывающего видеоруководства, которое полностью бы раскрывало все нюансы работы в этом популярном CSS-фреймворке. Кроме непосредственного изучения Bootstrap`a, курс охватывает все базовые знания верстки. Поэтому он будет ценен также для начинающих пользователей, которые только приступили к изучению HTML и CSS, поскольку в курсе можно найти множество приемов современной верстки с использованием HTML5 и CSS3. Все дополнительные знания по верстке, включая наиболее актуальные знания из HTML5 и CSS3, которые могут понадобиться для изучения курса, входят в данный курс в виде бонусов.
БОНУС №8. (ТОЛЬКО ДЛЯ PLATINUM-ВЕРСИИ). Закрытый форум поддержки по вопросам курса.
После покупки вы получите доступ к закрытому разделу форума, где сможете задавать вопросы по курсу и в течение 48 часов получать ответы. Но, обычно, мы отвечаем в течение одного дня Данный бонус означает, что в течение 6 месяцев с момента покупки вы сможет задавать любые вопросы по теме курса, и гарантированно получите ответ от самого автора курса Андрея Кудлая Если у вас что-то не будет получаться, вы сможете задать вопрос автору курса и он подробно расскажет причины, по которым не получается, и что нужно сделать, чтобы исправить ситуацию. Вы исправляете, и идёте дальше по курсу. Провал исключён А это значит, что вы не будете чувствовать себя отстающим либо брошенным на произвол. Личная поддержка - это гарантия вашего результата. Это наставник за спиной. Уверенность в том, что у вас всё получится
БОНУС №9. (ТОЛЬКО ДЛЯ PLATINUM-ВЕРСИИ). Консультация по вашему OpenCart-проекту.
Консультация по вашему OpenCart проекту означает, что вы сможете предоставить свой проект (единоразово) на анализ и аудит. Причем не важно, делаете ли вы интернет-магазин для себя или на заказ. После проведенного аудита сайта вам будет предоставлен подробный ответ, что надо докрутить, исправить, на что обратить внимание. Вы получите советы и рекомендации в текстовом виде либо в формате видео-скринкастов от автора курса Андрея Кудлая о том, как исправить ошибки и решить возникшие проблемы. Таким образом, вы получите индивидуальную поддержку по вашему уникальному проекту не только в учебном режиме, но и «в боевых условиях» (на реальных проектах) на протяжении 6 месяцев с момента покупки курса. По согласованию с автором курса вы сможете получить либо текстовый ответ, либо разбор в формате записанного видео, либо можно будет совместить со skype-консультацией (см. бонус ниже).
БОНУС №10. (ТОЛЬКО ДЛЯ PLATINUM-ВЕРСИИ). 30-минутная единоразовая Skype-консультация
Skype-консультация – отличный способ рассказать о своих проблемах в учебе либо создаваемом проекте и получить компетентные советы и полноценную индивидуальную обратную связь от автора курса в режиме «с глазу на глаз». Это прямая связь с автором курсов, вашим учителем и педагогом. Перед Skype-консультацией, ученик составляет список вопросов автору, и, таким образом, автор, подготовившись, проводит наиболее полноценным и насыщенным образом консультацию для вашей пользы.
БОНУС №11. (ТОЛЬКО ДЛЯ PLATINUM-ВЕРСИИ). Закрытый чат-канал в Telegram
Наш закрытый чат-канал – это сообщество целеустремленных веб-разработчиков и группа единомышленников для: