WooCommerce theme with React store locator
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 enquiry. 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. Afterwards, 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.