Октябрь 2017
Автор: Рубрика: Магазин opencart Комментариев нет

Изменяем opencart на свою любую тему с gulp и настраиваем browser-sync


Изменяем opencart на свою любую тему с gulp и настраиваем browser-sync

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

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

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

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

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

  • Сперва будут переменные с плагинами gulp, которые будут необходимы для работы магазина.
  • Подключаем локальный домен opencart.loc для автоматического обновления страниц в browser-sync.
  • Третий пункт это компиляция файла темы stylesheet.css. Для этого создадим папку с темой в opencart.

Код gulpfile.js.

Заходим по пути domains\opencart.loc\catalog\view\theme и создаем новую папку my.

В папке темы my добавим папку stylesheet, в которой создадим файл stylesheet.sass, как в gulpfile.js.

Или скачаем стартовую заготовку для любого проекта в opencart, которая состоит из четырех файлов.

  1. _fonts.sass файл для подключения шрифтов к opencart.
  2. _media.sass добавляем отображение для всех видов мониторов и мобильных устройств.
  3. _vars.sass тут будут переменные.
  4. stylesheet.sass в этом файле пишем все стили магазина, вначале подключаем шрифты @import fonts , переменные @import vars и в конце файл @import media.

 

 

Запускаем gulp для opencart.

Для работы gulp нужна программа node.js, как ее установить и про установку gulp тут.

Все плагины gulp, которые перечислены в файле package.json установим командой npm i.

Чтобы обновить все версии плагинов, выполним команду npm i npm-check-updates.

Теперь запускаем gulp, командой gulp.

Должен запуститься магазин opencart, который установлен по умолчанию.

Запускаем gulp для opencart.

Изменяем тему по умолчанию opencart, на любую свою, со своими настройками.

Переходим в браузере в административную панель opencart и в пункте меню модули, расширения выбираем тема.

Нажимаем редактировать, выбираем нашу тему my и сохраняем.

Повторно запускаем gulp и добавляя новые файлы из основной темы в нашу, редактируем их и смотрим на автоматические изменения страницы в browser-sync.

Подробнее об изменении файлов темы my, которую создали в следующей статье.

Изменяем тему по умолчанию opencart, на любую свою, со своими настройками.

Комментариев нет