You’ve probably already seen the Spartacus Public Demo. If your initial reaction was are anything like our team’s, you probably found that it looked a bit old and uninspiring.
In fact, for us it was so uninspiring that it inspired us to create our own demo. In this article, I’d like to share with you some insights into how Spartacus Capybara was born. I hope you’ll also find some useful development tips here.
Our goal was to present the capabilities of Spartacus in a more modern look. We started to think about where to get a design for this project. We didn’t want to engage the whole design team, as this was a non-commercial project, but we realized that we have the Capybara Theme for Vue Storefront could serve as a reference project. The next decision that we had to take was about the backend. Should we create a new hybris instance and import product data from Storefront API sample data or should we reuse the public instance? The latter option turned out to be both faster and more interesting. Read on to find out what challenges we faced and what we’ve learned from them.
Challenges
The first challenge was to decide which recipe module to use: B2cStorefrontModule, StorefrontModule, or StorefrontFoundationModule. We chose B2C, the same one as in the public demo, as it was a good starting point. However, if we were to make it production-ready, we would consider migration to StorefrontModule to fine-tune the configuration and imports.
An interesting part of our work was making our storefront look different while using the same CMS as the public demo. This was tricky because Spartacus is driven by the CMS and it means that the information about what components should be rendered on a given page comes from the backend. Fortunately, Spartacus supports static CMS configuration. You won’t find information about it in the official documentation as it’s not a best practice. However, it is a neat trick to experiment with slots and components without using the Backoffice. Here you can find an example of how to use it.
Maybe it’s not so obvious but we tried to fit cameras into a fashion shop design. It turned out that we have to be creative and adjust the design slightly to a different type of product. At that moment, we were also considering plugging Spartacus to Storefront API directly. We even started making a PoC and it was doable but really time-consuming. CMS data is connected to product data, so pulling only product data from a separate source would require some lower-level customizations which seemed bloated, which is why we dropped the idea.
Summary
It was a nice and quick journey to develop a Spartacus application based on the Capybara theme. Actually, it was faster than I initially expected, thanks to the extendable nature of Spartacus. I also like how the app looks now. The mobile view, in particular, really makes this PWA feel like a native app.
Here you can find the working demo:
https://spartacus-demo.web.app/
The source code is available at:
https://github.com/DivanteLtd/spartacus-capybara
Feel free to reuse and contribute ;)
Published May 27, 2020
