All you need to know about the new Shopware 6 storefront

Martin Schindler, BSc in Computer Science (Software Architect at dasistweb GmbH)

The components of the Shopware 6 storefront

The three typical layers of a web application

Structure layer (structure & content)

The most important aspects of working with Twig in the storefront

Scalar data types, arrays and objects can easily be debugged using {{ dump() }}

Presentation layer

Switching the preprocessor: from LESS to Sass

The Front-End Tooling Survey 2018 ( Ashley Nolan)

Bootstrap 4: Taking advantage of source files

Organisation is half the battle

Behavioural layer

Webpack module bundler

  • webpack.base.config.js — contains the basic configuration that applies to all available environments
  • webpack.dev.config.js — contains the configurations that apply to Webpack in “dev” or “watch” mode
  • webpack.hot.config.js — configurations that explicitly apply to the built-in Webpack HMR mode
  • webpack.prod.config.js — a configuration specifically customised for production mode

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store