Power your ReactJs application with themes
While creating the e-commerce storefront web application for sellers on our platform we wanted to provide:
- Themes with variation in color and other CSS properties — This enables the sellers to customize their storefront as per their brand guidelines.
- Themes with variation in structure — This enables the sellers to choose from a variety of themes that are best suited for their industry.
1. Themes with variation in colour and other css properties:
When it’s only about changing the color and other properties like font style, font, weight, etc. all you need to do is create functions that will return values for the CSS property based on the selected theme.
We chose a very simple approach. Any CSS property, for example, color, is written as color: getThemed(‘colors.primary’).
getThemed function here returns the colors.primary from a theme object. This theme object can be fetched from an API call. We use Server-side rendering so the object is available readily.
2. Themes with variation in structure.
This can be achieved by
A. Decoupling the logic and view
B. Organising the folders and files in a way that the application returns the file for currently selected theme.
A. Decoupling the logic and view
When it’s about changing the structure it involves decoupling the logic and view part of the application because you do not want to write the same logic of adding an item to a cart for every theme you create.
You would want to move all the functions up in the state hierarchy. In our case, it was very easy with the use of sagas, actions, reducers, and selectors. The theme files that have JSX(view) only dispatch actions and get the updated data using selectors. APIs calls and app logic is in sagas.
If you are not using sagas, you can move all your API calls and action listeners in a separate JS file and your view file will only dispatch actions.
B. Organising the folders and files in a way that the application returns the file for currently selected theme
Let’s say you want to have a different view for Product Tile for each theme. The Product tile component folder can have the following structure.
Theme Selection Logic in ProductTile/index.js
While we create different views for the product tile we wanted to ensure that consuming the components remains as easy as import ProductTile from ‘components/ProductTile’ irrespective of the theme. To achieve this, all you need to do is return the file for the currently selected theme from components/ProductTile/index.js.
The View File in ProductTile/DefaultTheme/index.js
Let say that the currently selected theme is DefaultTheme. Then the ProductTile/DefaultTheme/index.js will receive all the props that are passed to it from anywhere it is used in the application.
Here is an example of how you would use the ProductTile anywhere in the application.
In the theme selection file we see {…this.props}, which passes all the props shown in the above image to DefaultTheme/index.js.
The best part about this approach is that you can start applying it to your existing project, one component at a time without affecting the rest of your application.
Bonus: You can use the same approach to make your application adaptive (render different views for mobile and desktop) by placing the device selection logic in DefaultTheme/index.js and creating a Mobile and Desktop folder in the DefaultTheme folder.
I hope you got an insight into how we created the eCommerce storefront web application on our platform for our sellers.
While you are new at this, we are consistently looking for solutions to better the app. Your feedback and suggestions will help us put our best ‘code’ forward!
If you are interested in knowing more about the team, please visit the ‘About Us’ page on Shop101 and Dash101.
Stay tuned for more such blogs and informative content from the team.
