- Описание
- Установка
- Настройка веб сервера
- Данные и шаблоны
- Оптимизация JS и CSS файлов
- Вывод контента
- Корзина товаров
- Настройка онлайн оплаты
- Настройка оплаты через Robokassa
- Меню
- Формы
- Поиск
- Учет количества товара на складе
- Мульти-валютность
- Мульти-язычность
- Изменение размеров изображений
- Разработчикам
- Импорт-Экспорт
- Установка на локальный сервер XAMPP в Windows
- Настройка VDS и установка Nginx, PHP, MongoDB, Shopker
- JavaScript API
- Визуальный редактор шаблонов
- Бронирование
- Экспорт каталога в Яндекс.Маркет
- Bash скрипт для настройки VDS
- Bash скрипт для установки
- API
- Установка локально в ОС Windows
Оптимизация JS и CSS файлов
Для оптимизации JS и CSS файлов используется Symfony Webpack Encore. Для работы нужно установить Node.js и NPM.
Для установки необходимых компонентов в терминале перейти в папку public
и вызвать:
npm install
В папку /public/node_modules/
будут загружены все пакеты из списка файла /public/package.json
.
Для сборки JS и CSS файлов нужно вызвать команду:
npm run build
В режиме разработки можно использовать команду:
npm run build:dev
В этом случае файлы в папке /public/app_build/
будут автоматически обновляться при изменении исходных файлов.
Для сборки используется конфигурационный файл /public/webpack.config.js
.
Содержание по умолчанию:
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('app_build/')
.setPublicPath('/app_build/')
.setManifestKeyPrefix('app_build')
.addEntry('app', './js/app.js')
.addStyleEntry('app_styles', [
'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./node_modules/nouislider/distribute/nouislider.min.css',
'./css/icomoon/style.css',
'./css/shopkeeper.css',
'./css/app.css'
])
.cleanupOutputBeforeBuild()
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
.disableSingleRuntimeChunk();
module.exports = Encore.getWebpackConfig();
Используемые JavaScript библиотеки импортируются в файле /public/js/app.js
.
Таким образом все необходимые компоненты JS и CSS собираются в два файла: /public/app_build/app.js
и /public/app_build/app_styles.css
.
В шаблон страницы они вставляются с помощью такого кода:
{% block stylesheets -%}
<link href="{{ asset('app_build/app_styles.css') }}" rel="stylesheet">
{% endblock %}
{% block javascripts %}
<script src="{{ asset('app_build/app.js') }}"></script>
{% endblock %}
Если вы не хотите использовать Webpack Encore, то в шаблоне вашего сайта все необходимые компоненты, которые используются в стандартном шаблоне, можно подключить так:
{% block stylesheets -%}
<link href="{{ asset('node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('node_modules/nouislider/distribute/nouislider.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/icomoon/style.css') }}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{% endblock %}
{% block javascripts %}
<script src="{{ asset('node_modules/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('node_modules/popper.js/dist/umd/popper.min.js') }}"></script>
<script src="{{ asset('node_modules/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('node_modules/wnumb/wNumb.js') }}"></script>
<script src="{{ asset('node_modules/nouislider/distribute/nouislider.min.js') }}"></script>
<script src="{{ asset('js/shopkeeper.js') }}"></script>
<script>
var shk = new Shopkeeper();
</script>
{% endblock %}