Зайдем в файл myscript.js и напишем код для кнопки купить в один click в опенкарт магазине.

Кнопка будет выводится, под основной с названием добавить товар в корзину.

Напишем скрипт для кнопки опенкарт купить в один клик.

Пройдем по всем элементам списка товаров на главной странице product-thumb.

Применим each (function (e)), с указанием счетчика e, в каждом проходе цикла мы должны увеличить счетчик на один e +=1.

Выведем на главной странице лучшие opencart товары.

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

Перейдем в административную панель и в меню модули расширения выберем модули.

Находим элемент в модуле товаров рекомендуемые, нажимаем редактировать.

В поле ширина и высота установим 360 пикселей.

С левой части экрана на главной странице магазины выведем категории с товарами для opencart2.

Для этого у пункта меню макеты редактируем нашу страницу home и добавляем левую колонку с категориями.

Вывод категории на странице будет возле слайдера .

В магазин opencart добавлен слайдер, остается его только настроить.

Slider находится в выпадающем списке модули в меню расширения.

Называется слайд шоу, нажимаем кнопку редактировать.

Ширину для баннеров сделаем на девять колонок bootstrap сетки 850, а ширину 400.

В поле баннер будут выводиться все изображения.

Создадим собственный модификатор в opencart, чтобы появилась переменная в шапке сайта.

Все модули будем создавать на основе базового шаблона modification.ocmod.xml, который положим в наш проект в новую папку C:\OpenServer\domains\opencart.loc\modifications.

Переименовываем модуль на hdr.ocmod.xml и открываем в sublime text.

Когда переносим наш дизайн в магазин мы занимаемся только стилизацией cms opencart.

Весь функционал есть.

Расширять функционал можно модулями.

Наши действия это брать файлы из темы по умолчанию default и копировать их в нашу тему.

Если мы хотим переопределить корзину это файл cart.tpl, мы копируем его в нашу тему и в sublime text делаем изменения.

1). Заходим в пункт меню система настройки, выбираем по умолчанию и нажимаем кнопку редактировать.

Все данные заполняются на основе товара в магазине, например, будут видеокарты.

Тогда в title запишем seo ключ, для поискового робота купить видеокарту 1080ti за 55 000 рублей в Москве, жми.

Второй мета тег это описание description.

Пишем два предложения с ключевыми словами.

Настроим рабочее окружение gulp, для написания стилей, изменения настроек и чтобы автоматически была перезагрузка браузера.

Для этого понадобится два файла gulpfile.js и package.json.

Ниже в статье их можно будет скачать с файлами заготовки sass.

Копируем файлы в корневую папку opencart.loc.

Откроем gulpfile.js в sublimetext.

Для установки opencart нам понадобится дистрибутив магазина и виртуального сервера openserver.

1). Скачать интернет магазин opencart можно с официального сайта.

2). Скачать и установить open-server.

Скачиваем среднюю версию, подробнее о open-server.

Теперь откроем инструкцию по установке opencart в sublimetext, она лежит в корневой папке дистрибутива магазина и называется install.txt.