webformyself
Webformyself - универсальная русскоязычная площадка, которая делает годные курсы по нескольким направлениям, от фреймворков и верстки до SEO...
Bootstrap 5 + OpenCart 3. Создание интернет-магазина
Bootstrap5+OpenCart3. Создание интернет-магазина
★4.8 (всего оценок - 32)
Продолжительность
46 ч 13 мин
Категория
OpenCartКоличество уроков
161 Видео
Дата добавления
25 мая 2021 г., 23:27
Язык
Русский
Дата выхода
25 мая 2021 г., 03:00
Дата обновления
29 апр. 2026 г., 12:28
Курс помогает понять, как создать современный интернет‑магазин на базе Bootstrap 5 и OpenCart 3 — наиболее востребованного стека для E‑commerce в России.
Рост рынка E-commerce: почему навык разработки интернет‑магазинов востребован
За 2020 год российский рынок электронной коммерции вырос на 58% — это рекордный показатель, который определил дальнейшее развитие отрасли. Пользователи стали чаще покупать онлайн, в том числе через маркетплейсы, а бизнес стремительно переходил в цифровой формат.
Ключевые тенденции рынка
- Объем онлайн-покупок за год вырос на 78%.
- Рынок P2P‑сделок увеличился на 87% за 1,5 года.
- ТОП‑категории продаж: электроника, товары для дома, одежда и обувь.
- 80% покупателей выбирают способы оплаты с минимальной комиссией.
Вывод: растущий спрос на интернет‑торговлю создаёт устойчивую потребность в разработчиках, умеющих создавать функциональные и адаптивные интернет‑магазины.
Почему OpenCart — оптимальная CMS для интернет‑магазинов
OpenCart — бесплатная, быстрая и гибкая CMS с открытым исходным кодом. Она подходит для магазинов любого масштаба и широко используется в России благодаря простоте, модульности и качественной локализации.
Преимущества OpenCart
- Лёгкая установка и понятная структура.
- Большое русскоязычное сообщество и множество готовых расширений.
- Поддержка популярных платёжных систем и возможность подключения новых модулей.
- SEO‑оптимизированная структура, быстрая индексация.
- Мультиязычность и гибкая настройка характеристик товара.
- Встроенные отчёты и удобный дашборд в админ‑панели.
Возможные ограничения
- Не всегда удобная установка дополнительных модулей.
- Снижение производительности при магазинах с десятками тысяч товаров.
Тем не менее, OpenCart активно обновляется, развивается и остаётся одной из самых популярных CMS для E-commerce.
Мобильный трафик: почему адаптивная верстка важнее, чем когда‑либо
Число пользователей, которые заходят в интернет только со смартфона, достигло 33,9 млн человек. Доля desktop‑аудитории продолжает снижаться, а это значит, что любой интернет‑магазин должен быть ориентирован на мобильные устройства.
Bootstrap 5 — лучший инструмент для адаптивной верстки
Bootstrap — ведущий фронтенд‑фреймворк для создания адаптивных сайтов. Он используется на более чем 22% всех сайтов в мире и ценится за простоту, гибкость и скорость разработки.
Что такое Bootstrap
Это набор готовых HTML, CSS и JS‑компонентов: сетка, кнопки, формы, навигация, модальные окна и многое другое. Создание сайта превращается в сборку интерфейса из готовых блоков.
Преимущества Bootstrap 5
- Быстрая разработка — множество готовых решений сокращают время верстки.
- Адаптивность — сайты автоматически подстраиваются под любые экраны.
- Простота изучения — подходит даже начинающим разработчикам.
- Единый стиль и чистый код — удобно для командной работы.
- Кроссбраузерность — компонентный подход избавляет от ручной доработки.
С Bootstrap 5 создание адаптивного интернет‑магазина на OpenCart становится значительно быстрее и удобнее.
Заключение: почему стоит изучить OpenCart 3 и Bootstrap 5 сейчас
Российский рынок E-commerce продолжает расти, мобильная аудитория расширяется, а интернет‑торговля развивается быстрее, чем когда‑либо. Разработчики, владеющие OpenCart и Bootstrap, получают серьёзное преимущество: они могут создавать современные, удобные и гибкие интернет‑магазины, востребованные тысячами бизнесов.
Этот курс позволяет освоить полный цикл создания интернет‑магазина — от адаптивной верстки до настройки CMS, что делает его практичным и полезным инструментом для развития в веб-разработке.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:07:15Введение. Организационные вопросы
- Урок 2. 00:18:42Подключение Bootstrap
- Урок 3. 00:08:16Breakpoints. Точки останова сетки
- Урок 4. 00:10:46Контейнер в Bootstrap
- Урок 5. 00:12:08Теория сетки Bootstrap
- Урок 6. 00:13:36Сетка Bootstrap. Часть 1
- Урок 7. 00:18:29Сетка Bootstrap. Часть 2
- Урок 8. 00:10:24Сетка Bootstrap. Часть 3
- Урок 9. 00:18:25Сетка Bootstrap. Часть 4
- Урок 10. 00:15:05Классы-помощники
- Урок 11. 00:10:55Таблицы
- Урок 12. 00:31:23Формы. Часть 1
- Урок 13. 00:11:03Формы. Часть 2
- Урок 14. 00:27:26Модальное окно
- Урок 15. 00:21:10Карусель
- Урок 16. 00:09:49Введение
- Урок 17. 00:16:38Верхняя навигационная панель. Часть 1
- Урок 18. 00:23:56Верхняя навигационная панель. Часть 2
- Урок 19. 00:07:30Верхняя навигационная панель. Часть 3
- Урок 20. 00:18:44Меню категорий
- Урок 21. 00:03:38Слайдер
- Урок 22. 00:10:42Карточка товара. Часть 1
- Урок 23. 00:25:09Карточка товара. Часть 2
- Урок 24. 00:14:11Блок преимуществ
- Урок 25. 00:12:29Футер сайта
- Урок 26. 00:08:54Кнопа вверх
- Урок 27. 00:19:32Сайдбар страницы категорий
- Урок 28. 00:12:53Контент страницы категорий
- Урок 29. 00:17:05Шаблон страницы товара. Часть 1
- Урок 30. 00:07:19Шаблон страницы товара. Часть 2
- Урок 31. 00:05:02Шаблон страницы товара. Часть 3
- Урок 32. 00:09:56Шаблон страницы товара. Часть 4
- Урок 33. 00:15:21Установка OpenCart
- Урок 34. 00:17:34MVC
- Урок 35. 00:15:14Создание и активация темы
- Урок 36. 00:26:07Перенос верстки в структуру темы
- Урок 37. 00:05:21Шаблоны header и footer
- Урок 38. 00:19:23Модуль Slideshow
- Урок 39. 00:07:25Модуль HTML
- Урок 40. 00:17:56Модуль рекомендуемых товаров
- Урок 41. 00:21:03Шаблон меню категорий
- Урок 42. 00:19:42Добавление товара в корзину. Часть 1
- Урок 43. 00:14:17Добавление товара в корзину. Часть 2
- Урок 44. 00:13:01Добавление товара в закладки
- Урок 45. 00:06:17Шаблон footer
- Урок 46. 00:14:34Шаблон категорий. Часть 1
- Урок 47. 00:17:00Шаблон категорий. Часть 2
- Урок 48. 00:09:20Шаблон категорий. Часть 3
- Урок 49. 00:27:41Страница товара
- Урок 50. 00:33:59Оформление заказа
- Урок 51. 00:12:40Шаблон корзины
- Урок 52. 00:33:11Шаблон регистрации
- Урок 53. 00:13:47Шаблон поиска
- Урок 54. 00:07:52Заключительный урок
- Урок 55. 00:08:42Введение. Основы HTML
- Урок 56. 00:13:58Структура HTML документа
- Урок 57. 00:13:04Теги форматирования текста
- Урок 58. 00:16:47Изображения
- Урок 59. 00:17:44Ссылки. Ссылки-изображения
- Урок 60. 00:10:06Списки
- Урок 61. 00:18:07Таблицы
- Урок 62. 00:18:48Формы
- Урок 63. 00:08:46Способы подключения
- Урок 64. 00:09:13Назначения классов и ID
- Урок 65. 00:08:02Свойства шрифта
- Урок 66. 00:05:56Свойства текста
- Урок 67. 00:09:33Фон
- Урок 68. 00:10:55Ширина, высота. Тег Div и Span
- Урок 69. 00:06:56Рамка
- Урок 70. 00:06:52Отступы
- Урок 71. 00:10:04Основы CSS. Float, Clear, Display
- Урок 72. 00:15:07Основы CSS. Свойство Position
- Урок 73. 00:08:05Структура документа HTML5
- Урок 74. 00:07:19Тег Header и Footer
- Урок 75. 00:11:06Тег Article
- Урок 76. 00:09:35Тег Section
- Урок 77. 00:10:27Теги Nav, Main и Aside
- Урок 78. 00:04:32Теги Figure и Figcaption
- Урок 79. 00:05:29Кроссбраузерное оформление HTML5 тегов
- Урок 80. 00:14:44Тег Input. Новые типы тега в HTML5. Часть 1
- Урок 81. 00:19:14Тег Input. Новые типы тега в HTML5. Часть 2
- Урок 82. 00:14:26HTML5 Video. Вставка видео на сайт
- Урок 83. 00:05:56HTML5 Audio. Вставка аудио на сайт
- Урок 84. 00:17:32HTML5 Canvas. Рисование в HTML5
- Урок 85. 00:14:57HTML5 Geolocation. Определение местоположения в HTML5
- Урок 86. 00:15:27Работа с фоном в CSS3. Часть 1
- Урок 87. 00:15:30Работа с фоном в CSS3. Часть 2
- Урок 88. 00:28:18Закругленные углы и рамки для блоков в CSS3
- Урок 89. 00:15:06Прозрачность фона, картинки, текста и цвета в CSS3
- Урок 90. 00:15:46Установка теней для элемента и текста
- Урок 91. 00:14:28Линейные и повторяющиеся градиенты CSS
- Урок 92. 00:09:59Радиальные градиенты
- Урок 93. 00:08:37Колонки
- Урок 94. 00:11:00Функция Calc() и свойство Box-sizing
- Урок 95. 00:13:33Шрифт
- Урок 96. 00:18:44Фильтры CSS3
- Урок 97. 00:10:04Работа с текстом в CSS3
- Урок 98. 00:14:05Медиа-запросы в CSS3
- Урок 99. 00:23:06Псевдоклассы
- Урок 100. 00:09:25Псевдоэлементы CSS3
- Урок 101. 00:13:45Селекторы CSS3
- Урок 102. 00:19:22Трансформации CSS3
- Урок 103. 00:15:493D трансформация CSS3
- Урок 104. 00:14:09Переходы CSS3
- Урок 105. 00:12:56Анимации CSS3
- Урок 106. 00:22:05Введение в программирование на PHP
- Урок 107. 00:24:48Синтаксис PHP. Основы синтаксиса языка PHP
- Урок 108. 00:33:48PHP переменные и константы
- Урок 109. 00:34:21Типы данных в PHP
- Урок 110. 00:21:23Операторы в PHP. Часть 1
- Урок 111. 00:20:01Операторы в PHP. Часть 2
- Урок 112. 00:23:00Управляющие конструкции PHP. Условия
- Урок 113. 00:39:32Управляющие конструкции PHP. Цикл while и do-while
- Урок 114. 00:34:42Массивы в PHP
- Урок 115. 00:36:34PHP: Функции для работы с массивами
- Урок 116. 00:18:59Цикл for в PHP
- Урок 117. 00:29:43Цикл foreach в PHP
- Урок 118. 00:25:50Альтернативный синтаксис PHP
- Урок 119. 00:23:17require и include в PHP
- Урок 120. 00:34:42Пользовательские функции в PHP
- Урок 121. 00:35:15Функция header в PHP. Часть 1
- Урок 122. 00:12:42Функция header в PHP. Часть 2
- Урок 123. 00:30:49Функции работы со строками в PHP. Часть 1
- Урок 124. 00:24:53Функции работы со строками в PHP. Часть 2
- Урок 125. 00:33:51Функции работы со строками в PHP. Часть 3
- Урок 126. 00:34:35Функции даты и времени в PHP. Часть 1
- Урок 127. 00:20:35Функции даты и времени в PHP. Часть 2
- Урок 128. 00:34:16Методы GET и POST в PHP
- Урок 129. 00:20:49Загрузка файлов в PHP
- Урок 130. 00:32:44Работа с сессиями в PHP
- Урок 131. 00:25:40Работа с куками в PHP
- Урок 132. 00:39:48Функции для работы с файлами в PHP
- Урок 133. 00:31:26Практика создания гостевой книги
- Урок 134. 00:35:59Сервер MySQL
- Урок 135. 00:33:22Функции PHP для работы с базами данных. Часть 1
- Урок 136. 00:19:59Функции PHP для работы с базами данных. Часть 2
- Урок 137. 00:18:45Практика создания гостевой книги с использованием БД
- Урок 138. 00:08:47PHP7. Часть 1
- Урок 139. 00:04:18PHP7. Часть 2
- Урок 140. 00:05:27PHP7. Часть 3
- Урок 141. 00:07:21PHP7. Часть 4
- Урок 142. 00:05:20PHP7. Часть 5
- Урок 143. 00:03:26PHP7. Часть 6
- Урок 144. 00:02:46PHP7. Часть 7
- Урок 145. 00:17:43Класс и объект
- Урок 146. 00:25:17Свойства объекта
- Урок 147. 00:11:28Методы объекта
- Урок 148. 00:18:38Методы __construct и __destruct
- Урок 149. 00:11:18Домашнее задание. Класс для работы с файлом
- Урок 150. 00:28:21Константы класса. Статические свойства и методы
- Урок 151. 00:20:09Наследование. Часть 1
- Урок 152. 00:19:52Наследование. Часть 2
- Урок 153. 00:25:03Модификаторы доступа
- Урок 154. 00:24:15Абстрактные классы и интерфейсы
- Урок 155. 00:19:34Интерфейсы и контроль типа
- Урок 156. 00:29:51Автозагрузка и пространства имен
- Урок 157. 00:34:10Composer и автозагрузка
- Урок 158. 00:12:03Трейты
- Урок 159. 00:16:43Позднее статическое связывание
- Урок 160. 00:18:06Магические методы
- Урок 161. 00:17:00Шаблоны проектирования
Автор - webformyself
Комментарии
А где товары меняются? Или все магазины Open Cart созданы для продажи техники, которая вшита в шаблон?
Где-где? в Караганде вестимо. Ищите сами, как обычно.
И вроде объясняет всё, но где-то не договорил, где-то не показал, забыл, пропустил.
Хорошо, что есть вот такая площадка, где можно просматривать эти курсы условно-бесплатно.
Ладно.
Заходите в Каталог ---> Товары и туда в таблицу добавляете все товары. Заполнять нужно много по каждому товару, ещё и на Английской вкладке.
После этого уже вносите правки в Расширения ---> Расширения ---> Рекомендуемые и в окно "товары" вписываете свой товар.
Ссылка на архив https://www.antropy.co.uk/blog/how-to-create-an-opencart-3-theme/
При установке Open Store система просит перенести папку storage куда-нить.
Автор папку переименовывает и автоматически переносит.
Автоматический перенос может быть чреват потерями содержимого скопированной папки и у вас вылезет куча ошибок в шапке админки.
Проблема решается просто - содержимое папки storage отдельно скопируйте и перенесите в новую папку.
Автор забыл показать, где и как скачивать magnific popup.
Переходите по ссылке https://dimsemenov.com/plugins/magnific-popup/
Жмёте на кнопку Build tool ---> на выпавшем попапе выбираете галочку Image или Gallery ---> жмёте кнопку Generate build ---> в окошке вам сгенерируется скрипт, его копируете и вставляете себе на сайт ---> потом, в самом верху жмёте CSS version, открываются css стили, скачиваете этот файл себе и вставляете в проект.
Чтоб вся эта красота заработала, в основной файл js вставляете этот код
$(".thumbnails").magnificPopup({
type: "image",
delegate: "a",
gallery: {
enebled: true,
},
});
https://cdnjs.net/font-awesome/