When creating an ecommerce site with Salesforce Commerce Cloud (SFCC), it is easy to default to using jQuery when you want to add more dynamic functionality to an otherwise static site. After all, if you are building off of the Storefront Reference Architecture (SFRA), it is already included.
While jQuery is a very popular and useful JavaScript (JS) library, it is not always the best option when creating dynamic user interfaces (UIs) that require complex state management. Furthermore, jQuery code is not as maintainable and scalable as some of the other options.
There are many different JS libraries available that don’t have the same shortcomings. Some of the most popular choices are React and Preact.
Using React and Preact Libraries
React is a component-based library that makes building complex UIs simple. The use of components reduces redundancy and allows for more extensibility. React code is also much easier to test than jQuery, which becomes important when building larger, more complex applications.
Preact is the “fast 3kB alternative to React with the same modern API” and strives to be mostly compatible with React. Preact includes a lot of the same benefits as React but in a much smaller package.
The following examples show how CQL used React and Preact to improve the end-user experience in three SFCC projects.
Woodland Direct – A Use Case for Product Bundles
When CQL was building Woodland Direct’s SFCC site, one of the requirements was to build a page that would allow users to create custom product bundles. This page aims to give the customer some flexibility in choosing specific products in custom quantities that could be packaged as bundled items instead of buying a kit that would come with fixed quantities of products.
Here are some functionalities provided by the React app:
- A running list of the selected products with the total price
- A persistent version of the list for when the customer is looking at the sub-products
- The ability to expand the details on sub-products
- The option to view smaller product tiles without the details so that more can be seen at once
Wolverine Worldwide – PDP Size and Width Selection in SFCC
There are options for the customer to choose their desired shoe size and width on the product detail page for Wolverine Worldwide’s brands. With the use of Preact on SFCC, we were able to create an app that updates the available sizes and widths based on what is already selected. This allows the customer to quickly see if the options they want are available, out of stock, or not included with a specific product.
Here are some Functionalities provided by the Preact app:
- When a selection is made, all of the size and width tiles are updated to show their availability
- When all selections are made, the dropdown closes so that the customer can see the “Add to Cart” button
- If the current selection is out of stock, then the “Add to Cart” button becomes a “Notify When Available” button
Wolverine Worldwide – Optimizing Single-Page Checkout with Preact
Wolverine also uses Preact for their multi-step checkout implementation. Usually, we would create pages like shipping and billing as completely separate web pages, but with Preact, we are able to use calls to the backend server to progress through checkout.
For example, when the shipping form is submitted, you are not redirected to the billing form page. Instead, the page updates to show the next form, and uses background fetch calls to submit and validate the data being entered. This makes the checkout process feel much more cohesive for the customer.
Below are some functionality elements provided by the Preact app:
- Customers can log in to their accounts without the page reloading
- A persistent order summary
- Form submission and validation without reloading the page
- The option to go back to previous sections to edit and resubmit the entered data
- And much more
React and Preact Utilized with Salesforce Commerce Cloud
All of these examples could have been implemented using jQuery or even vanilla JS but they would have been much harder to maintain and more prone to errors. By utilizing React and Preact we are able to write testable, maintainable, and reusable code that can be embedded into an SFCC site.
Do you have more questions about React and Preact in the SFCC space or want to know more about our use cases with Wolverine Worldwide and Woodland Direct? Contact CQL today and we’ll have a certified SFCC developer ready to assist your ecommerce business needs.
Reference:
https://preactjs.com/
