Bootstrap5+OpenCart3. Создание интернет-магазина

Подробная программа курса

Часть 1

Изучение Bootstrap 5. Теория

15 уроков, 4 часа видео

Урок 1. Введение. Организационные вопросы

В первом уроке курса рассмотрены организационные моменты, структура и содержание курса. Из урока вы узнаете об основных источниках документации, о преимуществах Bootstrap и о том, что такое CSS фреймворк.

Урок 2. Подключение Bootstrap

Прежде чем использовать Bootstrap – его нужно подключить. И в данном уроке вы найдете различные варианты подключения фреймворка. Среди прочего Вы узнаете о том, что такое CDN и почему стоит обратить внимание на подключение ресурсов CDN.

Урок 3. Breakpoints. Точки останова сетки

Из предлагаемого видео вы узнаете о том, что такое breakpoints или точки останова сетки. Данные точки привязаны к определенной ширине области просмотра и для каждой из точек Bootstrap предлагает соответствующие классы сетки, благодаря которым и реализуется адаптивность сайта.

Урок 4. Контейнер в Bootstrap

Одним из ключевых элементов сетки в Bootstrap является контейнер. Bootstrap 5 предлагает три варианта контейнера, используя которые мы можем получить различную ширину блока-обертки сетки.

Урок 5. Теория сетки Bootstrap

В данном уроке на простых примерах рассмотрена теория сетки Bootstrap. Фактически любой макет сайта, любую конкретную страницу можно представить в виде сетки. Поэтому, понимание принципов работы сетки Bootstrap, понимание теории сетки – важный момент в изучении фреймворка.

Урок 6-9. Сетка Bootstrap. Часть 1-4

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 5. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана.

Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта. Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

Урок 10. Классы-помощники Bootstrap

Кроме своей знаменитой сетки, Bootstrap предлагает множество так называемых классов-помощников, позволяющих решать различные задачи. К таким классам можно отнести clearfix, который поможет сбросить обтекание элементов, классы цвета и вариантов отображения элементов, классы, позволяющие быстро добавить стандартные внутренние или внешние отступы, классы, управляющие тенью, границами, позиционированием элементов и т.д. Некоторые из предлагаемых классов рассмотрены в данном видео.

Урок 11. Таблицы

Одними из ключевых элементов раздела Элементы контента в документации Bootstrap можно считать таблицы. И действительно, на практике с таблицами Вы сталкиваетесь достаточно часто. Bootstrap 5 предлагает набор классов для красивого оформления таблиц. Например, добавив к таблице всего-навсего один класс, Вы получите симпатичную таблицу, которая будет отлично выглядеть на странице сайта.

Урок 12-13. Формы. Часть 1-2

Следующая пара уроков посвящена работе с формами. Сегодня практически на любом сайте есть хотя бы одна форма, а часто их гораздо больше. Поэтому формы являются важным элементом сайта и именно поэтому Bootstrap особое внимание уделяет оформлению элементов формы. Из уроков вы узнаете об основных вариантах стилизации форм в Bootstrap 5.

Урок 14. Компонент Modal

Компонент Modal, рассмотренный в данном видео, поможет Вам быстро создавать красивые модальные окна. При этом Вам не нужно будет подключать сторонние плагины типа Lightbox или FancyBox. Достаточно лишь скопировать код предлагаемого компонента из документации Bootstrap и настроить его. Все остальное сделает фреймворк.

Урок 15. Карусель

Bootstrap предлагает большое количество типовых готовых компонентов, которые могут вам пригодиться. Один из таких – компонент Modal – был рассмотрен в предыдущем уроке. В этом уроке вы познакомитесь с еще одним – это компонент Carousel. Используя компонент Карусель, вы можете в считанные минуты получить готовый слайдер для сайта, не используя дополнительных плагинов.

Часть 2

Верстка шаблона сайта

17 уроков, 4 часа видео

Урок 1. Введение

Первый урок практической части курса будет вступительным и здесь будут поставлены задачи, которые необходимо выполнить при верстке шаблона интернет-магазина. Поскольку у нас нет дизайна, соответственно, нужно учесть этот нюанс, чтобы на выходе мы получили приемлемый дизайн сайта. Также в уроке мы поговорим о будущей структуре сайта, которую необходимо реализовать в верстке шаблона.

Урок 2-4. Верхняя навигационная панель. Части 1-3

В следующих трех уроках будет показана верстка верхней навигационной панели сайта. Поскольку мы верстаем интернет-магазин и верстаем его под OpenCart, соответственно, в этой панели необходимо учесть все те элементы, функционал которых предлагает OpenCart. Соответственно, здесь будут представлены иконки поиска, корзины, закладок и пользовательских ссылок. При этом, поскольку место ограничено, необходимо предусмотреть открытие соответствующих элементов при клике по той или иной иконке. В частности, при клике по иконке поиска должна открываться форма поиска, при клике по иконке корзины должно открываться модальное окно корзины и т.д.

Урок 5. Меню категорий

Следующим блоком, который мы сверстаем в данном уроке, будет меню категорий. Это будет меню двухуровневое и, само собой, это меню должно быть адаптивным, т.е. на мобильных устройствах это меню должно скрываться под иконкой гамбургера.

Урок 6. Слайдер

На главной странице многих интернет-магазинов принято выводить слайдер, где могут быть представлены акционные предложения или же какие-либо новости. Поэтому в данном уроке мы реализуем подобный слайдер. Для его реализации нам не потребуются какие-либо дополнительные плагины, мы используем компонент фреймворка Bootstrap под названием Carousel.

Урок 7-8. Карточка товара. Части 1-2

Следующие два урока будут отведены под верстку карточки товара. Bootstrap предлагает готовый компонент карточки, однако, он не всем может подойти, поэтому в уроке будет показана верстка собственной карточки товара с нуля. Полученный компонент карточки товара можно будет использовать многократно, в частности, в блоках предложений на главной странице, на странице поиска, а также на странице категорий.

Урок 9. Блок преимуществ

На главной странице интернет-магазина часто выводят так называемый блок преимуществ. Это блок, призванный заинтересовать пользователя, вызвать его доверие к магазину. Здесь могут сообщать, к примеру, что в магазин работает на рынке уже не первый год, что за время работы магазина было сделано большое количество заказов, что магазин предлагает низкие цены на товары и т.д., и т.п. В уроке будет показана верстка данной секции для главной страницы сайта.

Урок 10. Футер сайта

Последней секцией главной страницы будет футер сайта. Собственно, данная секция, как и шапка, зачастую будет одинаковой для всех страниц сайта, поэтому ее достаточно сверстать только один раз. В футере будут представлены блоки информационных ссылок сайта, а также контактная информация.

Урок 11. Кнопка вверх

В предлагаемом уроке будет показана реализация функционала кнопки вверх. Эта кнопка достаточно удобна, особенно для пользователей мобильной версии сайта, поскольку позволяет всего за один клик быстро и плавно переместится на верх страницы.

Урок 12. Сайдбар страницы категорий

Главная страница сверстана и можно переходить к следующей – это будет страница категории. Данная страница предполагает двухколоночный макет, где в левой колонке – сайдбаре – будет представлено меню категорий магазина, а в правой – контентной части – будут выводиться карточки товаров категории. В данном уроке будет реализован сайдбар страницы категорий.

Урок 13. Контент страницы категорий

Второй колонкой страницы категорий будет колонка контента. Здесь должно выводиться название категории, ее описание, выпадающие списки для управления показом товаров и, конечно же, карточки товаров категории. Все это будет реализовано в рамках текущего урока.

Урок 14-17. Шаблон страницы товара. Части 1-4

Последние четыре урока второй части курса будут отведены под верстку шаблона страницы товара. На этой странице будет выводиться достаточно много элементов и информации: основное и дополнительные изображения товара, вкладки с описанием и характеристиками товара, а также наименование, цена товара и возможность добавления выбранного количества товара в корзину.

Часть 3

Создание темы для OpenCart 3

22 урока, 6 часов видео

Урок 1. Установка OpenCart

В этом видео будет показана установка OpenCart на локальный сервер Open Server. Из урока Вы узнаете, как установить OpenCart, какой локальный сервер лучше использовать и т.д. По итогу урока будет получен стандартный сайт под управлением CMS OpenCart для которого и будет создаваться новая тема.

Урок 2. MVC

OpenCart реализует разновидность архитектурного паттерна MVC, что предполагает разделение кода на составные части: модели, виды и контроллеры. Также OpenCart предполагает дополнительный компонент кода – языковые файлы. В этом уроке на простом примере будет объяснена суть работы паттерна MVC и структура CMS OpenCart.

Урок 3. Создание и активация темы

Если вы работали с OpenCart 2, то знаете, что тема во второй версии CMS создается и активируется достаточно просто. В OpenCart 3 все немного сложнее, поскольку в третьей версии появились дополнительные возможности управления темой. Из урока вы узнаете, как создать и активировать тему для OpenCart 3.

Урок 4. Перенос верстки в структуру темы

Создание темы стоит начать с главной страницы сайта. Задачей текущего урока будет создание шаблона, отвечающего за показ главной страницы, и перенос имеющейся верстки в код созданного шаблона. При этом нужно правильно подключить все необходимые файлы: скрипты, стили т.д., чтобы главная страница сайта не отличалась от имеющейся верстки.

Урок 5. Шаблоны header и footer

Тема OpenCart состоит из множества шаблонов. При этом в формировании одной страницы могут принимать участие сразу несколько шаблонов. В этом уроке будут созданы два дополнительных шаблона – header и footer, которые отвечают за шапку и футер сайта и используются не только для главной, но и для всех прочих страниц сайта.

Урок 6. Модуль Slideshow

Многие компоненты в теме OpenCart реализуются в виде модулей. Это достаточно удобно, поскольку модули при желании можно подключать в соответствующие позиции шаблона или же отключать их. Одним из таких модулей является Slideshow, - он необходим для вывода слайдера в шапке страницы. В уроке будет создан шаблон данного модуля, чтобы в результате включения модуля был получен слайдер с нужным дизайном.

Урок 7. Модуль HTML

Еще один модуль, реализация которого будет показана в текущем уроке, - это модуль HTML. Это самый простой модуль, который не требует особого оформления и функционала, поскольку его задача состоит в том, чтобы просто вывести некоторый код HTML, который сохранен для данного модуля.

Урок 8. Модуль рекомендуемых товаров

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

Урок 9. Шаблон меню категорий

Последним шаблоном главной страницы, который будет реализован в рамках данного урока, будет шаблон меню категорий. Задача данного шаблона проста – вывести категории сайта в виде меню.

Урок 10-11. Добавление товара в корзину. Части 1-2

Следующие два урока будут отведены одному из ключевых моментов при разработке интернет-магазина – это вопрос добавления товара в корзину. В OpenCart данный функционал уже есть и нужно просто правильно его использовать, и поправить под себя при необходимости. Добавление в корзину происходит без перезагрузки страницы, т.е. используется асинхронный запрос, который уже написан. Мы используем этот запрос, поправим его под себя и в результате, после добавления товара в корзину пользователю будет показано содержимое корзины в модальном окне.

Урок 12. Добавление товара в закладки

Еще одним функционал, который часто предлагается интернет-магазинами и который реализован в OpenCart, является добавление товара в закладки. Это очень удобно, поскольку покупатель всегда может посмотреть свои закладки и увидеть заинтересовавшие его товары без долгого поиска. В уроке будет показано добавление данного функционала в создаваемую тему OpenCart.

Урок 13. Шаблон footer

Последним шаблоном главной страницы создаваемой темы OpenCart будет шаблон footer. Данный шаблон очень прост и в нем просто нужно вывести ряд доступных переменных, в которых содержатся различные информационные ссылки и ссылки аккаунта пользователя.

Урок 14-16. Шаблон категории. Части 1-3

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

Урок 17. Страница товара

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

Урок 18. Оформление заказа

Одним из самых проблемных в реализации шаблонов является шаблон оформления заказа. Оформление заказа в OpenCart разбито на шаги, каждый из которых получает свой блок информации асинхронным запросом и, соответственно, под каждый из шагов предусмотрен свой шаблон. Соответственно, здесь потребуется не один шаблон, а сразу несколько. Из урока вы узнаете, какие именно шаблоны вам потребуются и как их использовать для реализации функционала оформления заказа в теме OpenCart.

Урок 19. Шаблон корзины

Перед оформлением заказа покупатель может детальнее посмотреть содержимое корзины и при необходимости изменить его на странице корзины. В данном уроке в тему будет добавлен еще один шаблон, который отвечает за страницу показа корзины.

Урок 20. Шаблон регистрации

Для работы с пользователем OpenCart предлагает целый ряд шаблонов: шаблоны регистрации и авторизации, шаблон личного кабинета, шаблон редактирования данных профиля. Их достаточно много и все они похожи в реализации. В уроке будет показана реализации шаблона регистрации

Урок 21. Шаблон поиска

Как и в любом другом интернет-магазине, в OpenCart предусмотрен функционал поиска. Результаты поиска должен показывать специальный шаблон, который и будет создан в данном уроке.

Урок 22. Заключительный урок

В последнем уроке будут внесены некоторые дополнительные правки в полученную тему OpenCart.

Bootstrap 5 +
OpenCart 3

Это про вас?

Посмотрите видеообзор

Для кого создавался курс

Начинающие верстальщики

Опытные верстальщики

Начинающие веб-программисты

Вебмастера-фрилансеры

Наш план действий

Подробная программа курса

Бонусные курсы

Независимые отзывы

Отзывы на предыдущие курсы автора

Автор курса

Цена курса

Сколько зарабатывают верстальщиких

Мы даем тройную гарантию

Часто задаваемые вопросы