Case Study: Patrick Roger's Headless E-Commerce with Drupal & Angular

In this case study, we interview some great folks from Ici La Lune, a French web agency. Joining us are frontend developer and co-founder Benoit Plâtre, and backend developer Simon Morvan.

For Patrick Roger, one of their clients, they built a very interesting e-commerce stack combining Drupal as a headless CMS, Angular and Snipcart. It's a perfect example of the kind of setups we like to highlight in our demos, so we thought it would be cool to have their take on it.

Gladly for us, they had a lot to say about their experience.

The agency

Ici La Lune is a web design agency which got started in Paris in 1998. They offer expertise in several fields of web development such as design, web apps, e-commerce, marketing, etc.

It may be twenty-years-old, but the agency knows how to stay relevant working with the latest web technologies, using PWAs and the JAMstack.

On this subject, here's what they had to say:

"We feel very comfortable with [the JAMstack] because we had this vision for more than 15 years! [...] Since we are proponents of screen design vs. page design, we create and develop web applications for our users in a fluid navigation experience without page refresh.

The web app approach has now a new destiny thanks to the rising of the PWA. The aim of this future is to blend the borders between the web and the application experience, using the same technologies."

The client

Patrick Roger is one of the best chocolatiers in the world and now has become a renowned sculptor using chocolate as a primary material. His web application reflects these dual activities with media contents related to its chocolates collections and sculptures.

Ici La Lune has been working with Patrick Roger since 2003. Originally, he was looking for a different approach in his digital communication. They’ve been able to propose him some innovative and creative solutions with a total freedom in the way to design his websites.

Snipcart integration: Technical interview with Benoit & Simon

How was the client operating prior to your development efforts? How were retail and online sales handled?

The previous Patrick Roger’s website was split into two parts :

• The corporate web application redesigned in 2015 with AngularJS and Drupal headless.

• The e-commerce website built in 2007 with Zen Cart framework.

In early 2017, Patrick Roger agreed with our proposition to merge the corporate and the e-commerce websites. In order to realize this project, we built the e-commerce part with the Drupal Commerce modules. We wanted also to use an external shopping cart solution with an efficient management and reporting interface to accelerate the implementation of the checkout process.

Retail and online sales share the same stock of products and online orders are carried out in its largest boutique in Paris. Orders are prepared from Monday to Thursday and delivery companies come daily to pick up the orders.

Since we launched the new e-commerce web application last September, we have made some improvements. We have specifically developed an order management dashboard in Drupal including automated generation of shipping labels and export invoices through the FedEx API.

All the orders are synchronized between Drupal and Snipcart.

Do you have experience with e-commerce in general? If so, which tools have you been using the most in your workflows? Why?

Since 1998, we have been designing customized web applications. For years, e-commerce websites were embedded in very classical frameworks and it was difficult to bring innovation in the e-commerce world.

Our first e-commerce experience took place in 2007 when we set up Patrick Roger's e-commerce website with Zen Cart which unexpectedly lasted 10 years. In the same year, we designed the e-commerce website of Yes for lov, a French cosmetic brand. We developed this project as an immersive Flash web application communicating with an external e-commerce management solution through an API.

In 2012, we were commissioned to design an e-commerce website for the French perfume brand called Juliette has a Gun. We used Magento for this project.

For the time being, our e-commerce offer is based on Drupal headless associated with an Angular web application. We offer a bespoke e-commerce experience based on the broad functionalities of Drupal Commerce associated with Snipcart.

How would you qualify the e-commerce needs your client had for this project? Why choose Snipcart?

Since 2003, our client Patrick Roger has relied on us for our creative and technical skills. The old Zen Cart-based website was not responsive, requiring separated websites (e-commerce and corporate) and was stuck into an old framework during 10 years.

A redesign was obviously necessary and the need for an external solution for the e-commerce management quickly arose. We decided to implement a complete solution based on a smart communication with Drupal e-commerce data.

We selected Snipcart as the best solution as the first tests were very conclusive. Beyond his international distribution, Patrick Roger's e-commerce needs are simple and steady with a limited product catalog.

We were looking for an easy e-commerce integration, a smart customization, and a merchant dashboard. We found the perfect solution with Snipcart.

So you integrated Snipcart with a Drupal headless backend and Angular on the frontend. That’s awesome. How did it go? Any interesting parts of your integration to highlight?

Using Angular as a frontend of a headless Drupal backend is the cornerstone of our web projects. We naturally chose to integrate Drupal Commerce in order to provide a seamless experience to our clients when it comes to managing the product catalog which is displayed on the website.

On the other hand, we quickly judged that crafting an e-commerce checkout process ourselves within the Angular frontend was going to be tedious & time-consuming. We decided to limit this approach for specific, tailored e-commerce needs such as, for example, subscription-based content platforms.

For standard e-commerce needs, it was a better move to outsource the checkout flow on a third party solution. We identified Snipcart as a strong candidate... and did not find any real contender on the market at this time. Stripe & Paypal similar solutions do not offer a sufficient level of integration & customization.

To actually implement the integration, we decided to go with data-URI instead of direct attributes on the page for two main reasons. First, we already have an API layer in place to feed the Angular frontend so it was basically only a matter of accommodating the output format to Snipcart’s crawler requirements.

Second, as pages are dynamically rendered at runtime with Angular, using attributes would have required an extra layer of server-side rendering to provide Snipcart with static product page and it was considered architecturally too brittle for such a key part of the project.

How was your experience with Snipcart? How long did it take to get it up and running?

Starting working with Snipcart was really fast and impressive from the very beginning. But as an SPA, we needed to trigger manually some functions that Snipcart handles automatically when the page refreshes while the user navigates.

→ Application boot sequence

We had to manage the boot of Snipcart to ensure the DOM was created when Snipcart was starting. For example, we had to ensure that the cart button was created when Snipcart started and tried to find it.

→ Language switch

The AngularJS application manages all the lifecycle of the components depending on the URL. Even when the language changes, the application stays alive and load the corresponding contents. In this case, we have to tell Snipcart to change the language manually.

→ Customization

Messages
It was easy to customize the look and feel of the cart thanks to CSS extensions. We were also able to personalize some messages like the ‘empty cart’ message.

Regions
The way to inject HTML data in the footer of the cart allowed us to put some strategic information during the check-out process.

Steps and Fields
We were able to add some custom fields and steps to match our Client needs. We had to add a gift message step in the check-out process. The configuration is quite easy.

Thanks to a new version of Snipcart, we were able to check the value of each field. We can now check that the Gift Message has less than 400 characters and manage some custom compulsory fields (ex: phone number for delivery contact).

Did you rely much on our API & webhooks for this integration? If so, how did it go?

We heavily relied on available webhooks for two key parts of the checkout process: shipping providers & taxes calculation.

As the catalog is modeled inside a Drupal Commerce framework, we had the opportunity to leverage the many contributed modules that already exists to provide shipping information and taxes calculation. So we started to use webhooks to replicate Snipcart orders as Drupal Commerce order so we could run Drupal Commerce module logic on it and then send the result back to Snipcart.

A while after the first launch, we added an order fulfillment management feature integrated inside the Drupal Commerce back office. Thanks to order synchronization, we were able to add features like automatic generation of shipping labels & tracking number using carrier APIs.

We started to use Snipcart API at this point to synchronize shipping information back.

Did you get the chance to use advanced Snipcart features (inventory management, abandoned carts, email templates customization, etc.)? If so, how did it go?

We just customized the email templates and proposed a Japanese translation of the Snipcart interface. We have a pretty simple use of Snipcart for the time being.

Inventory management in Snipcart dashboard was not considered as our customer was already used to managing its website content inside Drupal back office. We choose to manage product & stock data inside Drupal Commerce and expose it to Snipcart.

Were our documentation & our support helpful?

Yes absolutely, even if the way to find the information is not always quite easy. If you want to find something you can get it.

What could we improve to make Snipcart an even better e-commerce solution for developers & merchants?

• More documentation about the types of objects sent to/received from the API (JSON-Schema would be great). Currently, the documentation of request & response bodies only consists of sample data.

• More consistency of data types between the various hooks & API methods.

• An API Explorer (!).

• A richer way to handle the Snipcart UI Basket.

We'd like to thank Benoit, Simon, and everyone at Ici La Lune for taking the time to do this. They've been great Snipcart users for a long time and it's nice to have them featured on the blog!

We also want to thank Patrick Roger to let us examine his website in depth. Chocolate lovers, you can't miss his online shop for a taste of his awesome products.

Liked this post? Take a second to share it on Twitter. All of us (Ici La Lune, Patrick Roger & Snipcart) would really appreciate it. We'd also love to hear your thoughts and questions on the integration itself below!