Additional Collaborators: Radek & James
Prior to the Vue Storefront Summit, one of the main questions in our minds was what do the Power Rangers and the new Vue Storefront architecture have in common? See, we knew there would be a session called the “Be the Zordon of ecommerce” (...and to bring him back to memory, he’s the character Bryan Cranston played in the Power Rangers movie - their mentor), but what did this have to do with ecommerce?
Our deep dive into the more technical sessions of the Vue Storefront Summit will provide answers and offer insights into Vue Storefront 2 and updates regarding platform integrations like Shopware’s PWA. For more information, have a look at our summary of the event.
Bodiless architecture - how it works
To explain the new bodiless VSF 2 architecture, Patryk Andrzejewski, the Technology Leader at Vue Storefront, found a great metaphor - the Power Rangers. Vue Storefront itself was turned into Zordon, which is the head without a body.
So here’s what we learned:
- “Zordon” is equivalent to Vue Storefront
- The head’s responsibilities takes user requests and reacts to them (services - the Power Rangers) e.g. Commerce platform, search engine, payment, system
- As with every superhero story, there are certain enemies as well...
- High traffic and a need to be performant and poor SEO
- Developer Experience - the need to focus on business logic using API’s
- Ecosystem fit - the need to be compatible with the entire ecosystem e.g. using Magento with another service e.g. Stripe etc, should easily be able to talk to each other. This requires a solid architecture.
- Basic components:
- Nuxt.js (sits on top of Vue.js) (+ some additional libraries)
- Core (dictates the contracts between components)
- Theme
- API Client
- Composables (one feature per composable e.g. useProduct)
- Middleware
Let’s look further into some of these components: As we can see Nuxt.js sits at the base of everything. Nuxt.js is a framework built on top of VueJS. It can be used to create a universal or single page Vue app with server side rendering perfect for use in an ecommerce application.
Core
The core of Vue Storefront 2 contains utilities and factories used by composables (which we look at shortly), that allow common high-level APIs for each platform. This allows developers to use the same composables for each integration.
Examples of factories include:
useCartFactory, useCategoryFactory, useWishlistFactory etc
Within the factories are methods that can be called, e.g. addItem or removeItem within useCartFactory.
The following diagram shows how we can use useCartFactory from the core passing it UseCartFactoryParams which returns a useCart instance.
We can use useCart to:
- Fetch the current cart
- Add/remove/change quantity of cart items
- Apply/remove discount coupons
- Check if a product is already in the cart
For more code examples see the Vue Storefront 2 docs at
https://docs.vuestorefront.io/v2/composables/use-cart.html
API Client
The API client allows us to get API functions from the underlying integration by getting its context. We can do this with useVSFContext.
Each integration has its own methods that can be invoked.
In the example below we can see we are using useVSFContext to access the API client and then calling getProduct with an id of 1.
Composables
Composables are the business logic layer that sits over the API client layer.
Each composable is responsible for interacting with the ecommerce integration. Vue Storefront 2 contains the following composables
- useProduct to fetch, filter and sort products
- useCategory to fetch categories
- useCart to manage basket
- useUser to manage authorization and user profile
- useUserOrder (subcomposable to useUser) to manage user orders that has already been placed
- useUserAddresses (subcomposable to useUser) to manage user shipping addresses
- useCheckout to manage order processing
Each composable essentially exposes three features:-
- The main data object, e.g useProduct yields a products object
- The main function that interacts with the data object e.g. search is the main function for the products object.
- Supportive data objects, for example isAuthenticated form useUser which relies on the users object.
In this way the composable can be used within an ecommerce solution to show products, add items to the cart, manage order processing and much more.
Middleware
The VSF 2 middleware is an Express server that proxies requests from the UI, translates them to a given integration and calls the appropriate API.
One of the main reasons this was created was that it allows for further extensibility (we will see more about this below). Developers are able to more easily modify requests and responses.
Security is also a plus point, as all of the credentials are stored server side and not exposed to the frontend.
Also, now the networking layer is moved to the server side, there are performance gains to be had as the code shipped to the browser is smaller resulting in a faster initial page load time.
Middleware extensions
- Each extension has a unique name
- extendApiMethods (override or add new functions e.g myAddToCart())
- extendApp (e.g. (app) -> { app.get(‘/my-endpoint’, () => { } })
- Middleware extension also utilise the following hooks (
- beforeCreate
- afterCreate
- beforeCall
- afterCall
To summarise...
The new API architecture is based on the Nuxt.js server side middlewares & Express.js server - this means that it’s easy to write new server side code (API calls/logic for new/existing integrations) in the VSF@Next app and use that logic on the front-end part (as nuxt provides both sides - Back-End & Front-End in one application).
In addition composables architecture offers great opportunity to use some logic (e.g add to cart method) in an easier way than in Vue Storefront 1 by importing required composable and using it for current case - resignation from importing mixins and copying parts of the code that we want replace/edit.
Shopware PWA Updates
You may have read our previous blogs and maybe even our Shopware Partner Day update. As we are working on a Shopware PWA project currently, this talk by Maciej Kucmus, the Shopware PWA lead, was one we had to attend.
Project’s Update + Setting up the local environment
- “Not stable yet, beta doesn’t mean ready to use, best is soon to come”
- Now - Default theme, Happy path, customize, Shopware v6.3.x
- Soon - Shopware v6.4, Product details page via CMS, performance tweaks, simplified
Setting up local environment
- Docker, docker-compose, Nodejs (LTS) + Yarn/NPM
- Shopware admin panel
- Add SwagShopwarePwa Plugin (install and activate)
- Get accesskey under API access
- Change to localhost in shopware-pwa.config.js
- npx @shopware-pwa/cli@canary domains (builds domains.json file) (e.g English)
- Run yarn dev
- http://localhost:3000
- Documentation at https://shopware-pwa-docs.vuestorefront.io
Dockware! → Ready to use Shopware docker images https://dockware.io
Vue Storefront 2- Custom Theming
The last session we wanted to share our learnings on is one that was held by Aditya Patel, Director of Product and Growth at HotWax Commerce. He highlighted how Storefront UI could be leveraged for custom theming and building faster.
Here’s what we learned:
Problem - Building an ecommerce Theme, most expensive part for brand and agencies
Component libraries are hard to customise. Ideally we would like to have reusable components.
If we use UI libraries they tend to only have atomic components, and as developers we still have to build ecommerce components and don’t have a good developer handoff process.
Looking at the main pages for Nordstrom, FootLocker, Nike and Steve Madden, all of these sites largely feature the same components:
- Banner
- Header (menu + logo + cart + search)
- Faceting section
- Product cards
Storefront UI features basic atoms which can be used as building blocks.
In this way we can create molecules and organisms all of which are customizable domain specific components.
As Storefront UI is open source and community supported maintenance is easier, i.e. a problem shared is a problem halved!
Customisation
Tiers of customising Storefront UI
- Branding - border-radius, colours etc
- Customise with slots
- Build new components using Storefront UI atoms
Basic Branding and stuff
- Use Figma to style
- Use the theme file to quickly update common styles
Customise with slots
- Use the Figma file to style
- Write custom HTML and CSS
- e.g. override SfButton added Pick Up in Store button
Build your own components
- Use Storefront UI components in Figma to build new molecules/organisms
- Create a brand folder to house those components when using VSF theme
- Using SfStoreLocater as a start, removed store image, added in stock, added Pickup at XYZ button and product card
Pro tips
SfButton-Pure
- Use this to make anything clicking in your ecommerce to Storefront UI
Performant box shadows
- Storefront UI has a @mixin for creating performant box shades
- Use @include box-shadow (accepts traditional css)
Saas breakpoints
- @include for-desktop/mobile
