Meet Acai Brothers
The fastest Superfood Bar chain in Australia.
Although not brothers by blood, Ben Day and Sam Carson are the inseparable duo responsible for Australia’s leading Superfood Bar brand, Acai Brothers. They cater to everyone with a craving for a healthy treat like an Acai Bowl, fresh juice, a smoothie or simply a cup of good coffee – whether you are in Brisbane, Sydney, Melbourne or Perth.
Given their fast development, the second half of 2018 was the perfect moment for a quick refreshment of their branding and website. The old site was a good representation for a young and upcoming business, but they eventually reached a moment when something more impressive was needed. On top of that, they have just introduced a new branch of their business – selling merchandise.
Their growth resulted in a need of an e-store in addition to purely informative functions of their website. This is when we stepped in…
Project overview
The entire project was divided into 3 stages:
- development of the base WordPress theme,
- development of the WooCommerce store,
- development of the React.js-based store locator (an interactive map with information on each branch).
The two first parts did not pose much of a challenge, but the store locator was a more complex task. During the implementaion we had to ensure that the map is:
- easy and comfortable to use on different devices (hence React.js),
- aesthetically appealing,
- easy to update for the editor.
Knowing how important this element will be for the general UX of the website, we knew we had to code it as efficiently as possible so that the performance is flawless.
Challenges
Before the development of the store locator started, we analyzed what could pose the most difficulty to ensure nothing blocks us as we proceed. Obviously, you cannot foresee everything, but these three predictions turned out to be right:
Custom dynamic filtering of locations (map markers and list elements).
Displaying filtered-out locations meant removing the locations that did not fulfill the criteria chosen by the user from the local store. We needed a way to restore the original, non-filtered list upon clearing/changing the filters. At the same time, however, we did not want to multiply the data in the store (original locations, filtered-out locations).
There are two independent filtering tools – the search and a switch that toggles showing locations like the Headquarters. The challenge was to ensure that the filtering results are properly combined. The solution we came up with was using selectors (reselect package: https://github.com/reduxjs/reselect), which enable using data from the Redux store in an efficient way.
Eventually, we coded two selectors – one that filters locations based on the “headquarters” parameter and the second one that pulls data from the first selector and filters locations based on the user search inquiry. These selectors can later be used in every other component like data from the store.
Map edges automatically adjusting to the filtered locations.
The automatic adjustment of the map’s borders to the locations currently on screen was also a bit of a hurdle. When a user searches for a location, the map is updated to show only the results of the search. This means removing locations that do not match the search and adjusting the map to display all filtered locations, without showing too much irrelevant area.
To ensure this, we used the functionality offered by the Google Maps’ API – the LatLngBounds class as well as the fitBounds method that allows fitting the map borders to the filtered-out group of locations.
Integration of the Store Locator into the WordPress theme we built for Acai Brothers.
We developed the Acai Brothers WP theme/Woo e-store and the Store Locator map as two separate projects. In order to facilitate the process, we had to set up separate development environments for a React project and a WP theme. The first problem we faced, was the fact that the map was to pull data about the branches of Acai Brothers from the WP backend – this was necessary to make sure the page is easily editable for the client.
The second obstacle we had to take into consideration was the integration of an already built React-based map with the WordPress theme. To cope with these issues, first we created a raw template in the WP backend that was to be used to host the map. Then, we generated the data from the backend into a global JS element, which we only included in this template. This JSON file was then copied into the Store Locator as a global element. This meant we operated on the same data structure in both projects – thanks to that it was easy to merge them. When the Store Locator was ready, we moved the compiled files (minified JS, CSS and assets) to the main directory with the theme and installed them in the template I mentioned earlier using a wp_enqueue_script function.
The Conclusion
The Acai Brothers project was a great experience for our team as we had to approach it in a very comprehensive way. It involved several different technologies that required different skillsets and all that had to be put together in the most flexible way possible. Given that Acai Brothers is a quickly developing company planning to expand to other markets, we needed to make sure that their website is a good representation of their business. It also had to be as flexible as possible to accommodate features they can need in the future and adjust the existing ones to ever-changing market needs.