Starter Theme

Автор zuzu, 05 июня 2018, 16:20:52

« назад - далее »

zuzu

Добрый день дорогие ,Гуру! У меня такая проблема, о которой даже стыдно писать)) Решил я сделать тему, скачал StarterTheme. Ну, думаю Bootstrap-а нет, но это же не беда! я его сейчас нарисую :) Все бы хорошо, но я что-то не могу сообразить как мне подключить js! Захожу в  javascript.tpl и вижу непонятные заклинания!! Ок, в оф. документации пишется, что нужно в theme.yml вставить конструкцию с путём к файлу, но как я понял этого не достаточно. Нужно ещё регистрировать , как я понял,  в PrestaShop/controllers/front/ProductController.php(к примеру).  Очень хочется, чтобы кто-нибудь из ветеранов подсказал, как правильно подключать библиотеки к теме. Ведь как я понимаю, покупателю приходит архив с темой, а не со всем движком. Заранее сильно благодарен.

PrestaMan

Тема для Prestashop 1.7 ?
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!

zuzu

Цитата: PrestaMan от 05 июня 2018, 18:51:43
Тема для Prestashop 1.7 ?
Добрый вечер! Да, для 1.7

zuzu

Я как бы уже решил эту "проблему" с помощью gulp-rigger, но вот меня терзают сомнения :)

Adik

CSS, JS, библиотеки подключают через хуки.
В папке темы нужно соблюдать структуру.
https://belvg.com/blog/how-to-create-a-theme-for-prestashop-1-7-part-1.html
Вот небольшой мануал про тему.

zuzu

Цитата: Adik от 05 июня 2018, 21:16:09
CSS, JS, библиотеки подключают через хуки.

assets:
  css:
    product:
      - id: product-extra-style
        path: assets/css/product.css
        media: all
        priority: 100
  js:
    all:
      - id: this-cool-lib
        path: assets/js/external-lib.js
        priority: 30
        position: bottom
    product:
      - id: product-custom-lib
        path: assets/js/product.js
        priority: 200
        attribute: async

Имеете ввиду эта конструкция?

Adik

Нет, это описание путей, папок, настроек.
$this->context->controller->registerStylesheet(
            'module-mymodule-style',
            'modules/'.$this->name.'/assets/css/mymodule.css',
            [
              'media' => 'all',
              'priority' => 200,
            ]
);
$this->context->controller->registerJavascript(...);

zuzu

 Я просто не понимаю в каком виде должна прийти тема, со всем движком или же архив только с темой? Если только тема - то мне нужно создать папку controllers, скопировать туда некий контроллер и добавить мой код регистрации? Подскажите, я совсем уж новичок)) :)

tigran

В папке темы нужно отдавать шаблоны, css, js. Контроллеры не входят в тему. Если у вас в теме используются свои модули, тогда нужно приложить папку modules с вашими модулями.

zuzu

#9
Цитата: tigran от 07 июня 2018, 19:44:19
В папке темы нужно отдавать шаблоны, css, js. Контроллеры не входят в тему. Если у вас в теме используются свои модули, тогда нужно приложить папку modules с вашими модулями.

Это уже радует)) Спасибо! Ответ на мой основной вопрос мне подсказал Adik (спасибо ему большое!), но вот я тогда совсем не понимаю где мне регистрировать "заветный" хук? Ну или можно ли с помощью сборщика (в моём случае gulp) просто сжимать и вываливать в assets/js/theme.js?  Или это не правильно?

mistral

Цитата: zuzu от 07 июня 2018, 20:26:06
Ну или можно ли с помощью сборщика (в моём случае gulp) просто сжимать и вываливать в assets/js/theme.js?  Или это не правильно?
Весь javascript можете помещать в этот файл, кроме библиотек таких как jquery.
Библиотеки, которые входят в движок, найдете в папке /js/jquery/

zuzu

В моем случае я использую стартовую тему, в ней нет Bootstarap-а и я думаю можно ли его js вываливать в theme.js? 

zuzu

И СПАСИБО БОЛЬШОЕ всем кто  помогает! :)

coder

#13
Для разработки папка _dev. В ней сохраняете все библиотеки, стили, плагины (bootstrap в том числе).
https://github.com/PrestaShop/PrestaShop/tree/develop/themes/classic/_dev/js/lib
Используя webpack генерируете бандл автоматически. Для продакшена файлы будут помещены в /themes/assets/
https://developers.prestashop.com/themes/assets/index.html#about-webpack
Кофигурация webpack, пример из стартовой темы
https://github.com/PrestaShop/StarterTheme/blob/develop/_dev/webpack.config.js

zuzu

Спасибо всем ветеранам! :)