Sylius - headless ecommerce

Installation

• php min 8.2
• composer
  • local: symfony composer update
  • local-docker: composer update
  • all-inkl: /usr/bin/php82 /usr/bin/composer update
• console
  • local: bin/console cache:clear
  • all-inkl: /usr/bin/php82 bin/console cache:clear
• npm
  • local: npm run build
  • all-inkl: not available

API

• how to create and configure new channel?
• get products for channel?

Theming

Configuration

• file composer.json in theme folder ´´´json { “name”: “themenamespace/new-theme”, “authors”: [ { “name”: “Jurij Schlaht”, “email”: “jschlaht@mac.com” } ], “extra”: { “sylius-theme”: { “title”: “New Theme Name” } } } ´´´

Folder

• ./themes/new-theme

Templates

• ./themes/verein-one/templates/bundles/SyliusShopBundle/shared/layout/base/styles.html.twig

Assets

Pictures

1. add image to ./themes/new-theme/public/banner.jpg
2. run command sylius:theme:assets:install
3. picture is copied to ./public/_themes/themenamespace/new-theme/banner.jpg
4. use it with ```html <img src=”{{ asset(‘_themes/themenamespace/new-theme/banner.jpg’) }}” …

#### Styles and scriptes
1. create ./themes/new-theme/assets/scss/custom.scss file
```scss
/* themes/new-theme/assets/scss/custom.scss */

.btn-primary {
    --bs-btn-bg: #FF0000;
    --bs-btn-hover-bg: #FF5531;
}

2. create ./themes/new-theme/assets/custom.js file

import './scss/custom.scss';

// Add your JS
document.addEventListener('DOMContentLoaded', () => {
  console.log('Verein One theme loaded ✅');
});

3. create ./themes/new-theme/webpack.config.js file

const Encore = require('@symfony/webpack-encore');

Encore
  .setOutputPath('public/themes/new-theme')
  .setPublicPath('/themes/new-theme')
  .addEntry('app', './themes/new-theme/assets/custom.js')
  .disableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableSassLoader()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction());

const config = Encore.getWebpackConfig();
config.name = 'newTheme';

module.exports = config;

4. import new-theme config in root ./webpack.config.js

Encore.reset();
const newTheme = require('./themes/new-theme/webpack.config');

module.exports = [shopConfig, adminConfig, appShopConfig, appAdminConfig, newTheme];

5. add new theme to ./config/packages/assets.yaml

# ./config/packages/assets.yaml

framework:
    assets:
        packages:
            newTheme:
                json_manifest_path: '%kernel.project_dir%/public/themes/new-theme/manifest.json'

6. add build name to webpack configuration in ./config/packages/webpack_encore.yaml

# ./config/packages/webpack_encore.yaml

webpack_encore:
    output_path: '%kernel.project_dir%/public/build'
    builds:
        newTheme: '%kernel.project_dir%/public/themes/new-theme'

7. build with command

npm run build

Links

1. Tailwind theme github repository
2. Bootstrap theme github repository

Store Assembler

• https://docs.sylius.com/sylius-plugins/experimental/demo-creator