BrocksiNet

This is a collection of insights and things we've seen during plugin reviews, app reviews and projects for Shopware 6. We hope this is helpful for anyone who wants to make their app, plugin or project headless-ready and API aware. Many thanks to the awesome Maciek Kucmus who did all the hard work to put this together. I only revised and extended some parts. Also feel free to comment or ping me if we forgot something or you want to add more important points to this checklist.

Sometimes I have very stupid ideas. People usually laugh at first, but I've learned that there's truth in every stupid idea. So, my latest dumb idea was to turn CSS into CSS! Sounds great, I know. If you're working with Bootstrap 5 and want to use CSS variables to change the color of some buttons, for example, you'll find that Bootstrap can only handle this in some parts of its components. They are working on fully supporting this with Bootstrap 6, but they also rely on SCSS in their components, and if they were to change it now, those would be breaking changes. The sad thing is that there is currently no date for when Bootstrap 6 will be released.

It feels wrong if you know ecommerce systems and then use Shopware's variants for the first time. You click on a variant, and the entire storefront page is reloaded. This is very helpful (and good for SEO) if your variants differ in text and images. But it isn't delightful if the server is not very fast. Also, if you have many similar options in text and pictures. There is also the use case where you want to show all possible options on the product listing page (category). So you may ask yourself if you need to invent the wheel for a more configurable approach to the Variants Selection. Or how could you improve this in a simple, fast, composable, and headless frontend?

With Composable Frontends, you can create your own JavaScript/Typescript based API Client from your local or online running Shopware 6 Instance. This brings you the advantage that all Custom Endpoints are also included in the API Client if they have a proper OpenAPI Schema definition. In this post, I describe how and what steps are needed to do so.

This blog post is mainly a reference for myself. So that I don't always have to search for commands and places where I need to change something. Basically it shows the steps to set up a new instance with devenv and Shopware 6. It also shows how to enable xdebug if needed. And how to use an SSL certificate and what needs to be changed.

How would we work without an API? If you were debugging something right now, you would surely say "much better" But let's face it, without an API, the modern e-commerce world wouldn't work at all. And what do we do to make sure our API works the way we expect it to? How do we test our API? How do we validate our schema?

The question is always where to fix a problem. For example, if data is missing from an API, you could fix that with a second request or change the response of the first request. So in a headless setup, you always want to have the minimum amount of data you need, but things will always change and you need more data or data in a different structured form. So you might find yourself talking to backend developers to optimize the API, or moving logic to the frontend that doesn't actually have anything to do with the frontend. So in this blog post, let's look at how we can add a layer between frontend and API to transform and optimize our data according to our needs. Plus we can add caching (if needed) very easily to make it blazing fast.