Sector(s)
Team Members
Project Team
The Redfin Solutions and Savant development teams worked together to create the Fixture Design Tool.
Visit the site
Visit the siteOrganizations Involved
Community contributions
Redfin Solutions contributed to the Drupal community by presenting on our methodology for integrating a React app inside a Drupal framework at NEDCamp (New England Drupal Camp) 2018, which is available on Drupal.tv. We have also written and shared several blog posts about React Native and integrating it with Drupal content. By forcing ourselves to learn React when the Drupal community had its doubts, and by sharing what we learned, Redfin Solutions supported Dries’s vision to integrate React into Drupal and helped to establish Drupal as a viable back end for front-end frameworks.
Savant is the leading customizable home automation company and has become the brand of choice for the world’s most luxurious homes, castles, and even yachts. Using the Savant app, home-owners can adjust their lighting, climate, entertainment, and security to fit their needs. The advanced personalization features make the difference between a smart home and a Savant Home. While the Savant ecosystem is created for the comfort of the home-owners, they sell their products B2B, which makes the dealer installing the Savant system the primary customer. Redfin Solutions worked with Savant’s design team to ensure that both the home-owners and the customer’s website experience match the reputation and quality of their luxury system.
Savant was launching a new line of lighting products with USAI Lighting and needed a custom Fixture Design Tool to sell a line of customizable lighting fixtures. The challenge for Savant was the ease with which a customer would filter, search, and select from tens of thousands of lighting products. All of Savant’s products already existed in Salesforce but needed to be available from inside the Drupal website. Savant needed an interactive tool, powered by a familiar Drupal backend, that customers could use to configure and purchase Salesforce-based lighting products. In order to address this need, Redfin Solutions built a React app using a Drupal 8 back end.
About the project
The goal was to allow Savant customers and builders to use the new Fixture Design Tool throughout the entire lighting project. Each lighting job can have multiple specs, which contain rooms and the preferred lighting for each room. In turn, each room can have multiple loads, which represent a lighting circuit and the lights connected to it. A customer can save a job and return to it, or create multiple quotes per job by using additional specs.
The Fixture Design Tool that Redfin Solutions and Savant created enables customers to start building customized lighting fixtures and instantly sort through the tens of thousands of products in Salesforce in a meaningful way. The dynamic filtering allows customers to apply only available options as they narrow their search. It warns them that choosing an unavailable option will start a new product search. When they find the perfect lighting fixture, the customer can save the project and get a quote for their client, or add it straight to their cart. Because of the Drupal back end, customers can even allow their employees certain permissions for the tool. For instance, entry-level employees could be allowed to search for lighting fixtures, but they could be denied access to buy lighting fixtures. Customers are using the tool with confidence, knowing that they are choosing the correct option for their client’s home and budget.
With the project management and development skills that Redfin brought to the table, it was a smooth process bringing this tool to life, with the end result of a great product for Savant’s Authorized Dealers.
Alex Cerri, Webservices Tech Lead at Savant
Why Drupal was chosen
The project required Drupal because Savant was comfortable with the Drupal administration interface, which powers Savant.com. The same operations in Salesforce would have been cumbersome, time-consuming, and ultimately too costly. Redfin Solutions still wanted the contextualized interfaces, workflow, site preview, and permissions that come with Drupal, but Savant needed to modify and manage the lighting products in Salesforce. Using a progressively decoupled approach, we were able to leverage nearly everything that Drupal provides out of the box, while giving the Fixture Design Tool the behavior and snappy feel of modern web applications.
After looking at Savant’s budget, goals, and mission, Redfin Solutions settled on a progressively decoupled tool using React. The header and the footer of the page are both parts of the Drupal framework while the tool itself interacts with Drupal through core’s Representational State Transfer Application Programming Interface (REST API) and the Entity Construction Kit (ECK). We chose the React framework because it allowed Savant the opportunity to create a mobile-friendly, React Native app in the future. We built a tool that Savant could use for the new line of lighting fixtures as well as for future products. Leaning on the Salesforce contributed module allowed the tool to draw information from Savant’s existing database of products by syncing their lighting products into Drupal ECK entities. Additionally, the Fixture Design Tool uses the Search API and Search API Solr modules to query faceted search data from Solr, which provides lightning fast searching and dynamic filtering.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
The key technologies involved in The Fixture Design Tool were, of course, React and Drupal. But a large number of additional open-source packages made substantial contributions to its success. Because Savant was comfortable with it, Redfin Solutions used Axios to manage XMLHttpRequests. For managing state, we used Redux with the redux-form library. React-router handled routing, and immutability-helper let us reach into state for specific needs. On the UI side, react-select allowed for beautifully styled selects, and react-modal provided accessible modals.
Inside of Drupal, a number of contributed projects were tantamount to the tool’s success.
-
ECK - The entity construction kit let us separate and contain objects that were intended only as part of this tool--we have custom entities for jobs, specs, rooms, and all of the lighting products.
-
Search API / Solr - These controlled how products are indexed, which creates powerful faceting and lightning-fast queries when filtering the product line.
-
Salesforce - The Salesforce suite meant we could sync data in and out of Salesforce with little custom code. There were also a number of custom API endpoints written on the Salesforce side that we queried from Drupal by leaning on the authentication and authorization already provided by the Salesforce modules.
-
Drupal Core - This gave us the ability to create views that served as a REST endpoint for all of this data. It was easier because Views and REST APIs are a part of core Drupal.
-
Rest UI - This contributed module made it even easier to build the API quickly.
