Helping buyers shop from multiple boutiques in one place via headless commerce: STA

The challenge

The major challenge was to create a platform that would be easy to use for both buyers and sellers and also be scalable to accommodate a growing number of boutiques. Another challenge was to design the website to handle a large volume of traffic and be fully secure to protect sensitive financial information.

The solution

To address these challenges, we decoupled the Drupal Commerce back end from the front end. It allowed us to use a modern JavaScript framework, GatsbyJS, to create a fast and user-friendly front end. GatsbyJS renders static pages on the server, which makes the site load much faster than a traditional dynamic site.

Additionally, GatsbyJS allowed us to easily integrate with the Drupal Commerce back end, so we could still access all of the functionality of Drupal Commerce. We also used Google Places API for address and distance calculations, and Stripe as the payment gateway. The back end is hosted in AWS, while the app is hosted in Netlify.

Location-based service

To provide a more personalized shopping experience, we integrated Google Maps API to allow users to see products from stores located within a 15-mile radius of their location.

We also ensured that the website displays boutiques and products even when the users do not share their location. This way, users can still browse and shop for products from all of the participating boutiques, regardless of their location.

User authentication

User authentication was important STA e-commerce site, as it allowed the client to identify the current user and authorize to perform specific actions. We used the simple_oauth module for authentication on the Drupal end.

This module allows users to log in using their Google or GitHub accounts. Once a user is authenticated, they can view their orders, manage their account settings, and place orders.

Store management

Admins can onboard boutique owners by creating a new user and a store for them. The exact location (geo coordinates) of the boutique is crucial for this location-based service, so we implemented the Field Geolocation module which provides integration with Google Maps API.

The boutique owner role comes with a set of permissions, such as managing products and accessing a dashboard with different reports.

Search functionality

To allow users to narrow down their search results, we added a search functionality to the Catalog page. We set up another Gatsby instance that pulls only the required data for the Catalog page.

This instance acts as a search index to make GraphQL requests and display the search results based on the user's choices. Whenever data changes on the Drupal end, both Gatsby instances are updated.

Cart switching

To avoid users losing products from their cart when they register, we created a custom REST endpoint that is triggered when an anonymous user registers. This endpoint assigns the current cart to the newly registered user. This way, when the user logs in and checks their cart, the products will still be there.

Data updates

To keep the Gatsby site up to date with the latest content from the Drupal end, we used the build hook module. This module allows us to configure a webhook that will be triggered whenever content is added, updated, or deleted on the Drupal end.

We configured the webhook to trigger the Netlify build hook for our site, which will then rebuild the Gatsby site with the latest content.

Less build time

To reduce the build time of the Gatsby site, we disabled unrequired JSON:API resources to ensure only the necessary data is fetched and processed, speeding up the build process.

We also used the gatsby-plugin-netlify-cache plugin, which caches the build files locally or in the Netlify cache directory. It means that subsequent builds will be much faster, and this plugin can reduce the build time by up to 60-70%.

Payment gateway

To handle payments, we integrated Stripe, a popular payment gateway with an easy-to-understand interface. Stripe provides a secure and reliable multi-factor authentication for users to pay for their purchases.

Once a payment is completed, Stripe sends a message to the back end with the status of the payment (success or failure), and the system backend places the order only when a success message is received.

The outcome

The decoupled Drupal backend and GatsbyJS frontend helped STA deliver a fast, performant, and rich user experience for the boutique e-commerce marketplace. The decoupled architecture allows for scalability and flexibility, while Gatsby's browser caching and PWA capabilities ensure that the site is available offline even with a slow internet connection. This provided a seamless and convenient shopping experience for both the boutiques and their customers.