Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

The Duo of Decoupled Drupal Commerce and React Native

Parent Feed: 

According to Statista, nearly 2 billion digital buyers in 2019 have been estimated in 2019 alone. Online shopping, since it was invented by Michael Aldrich in 1979 in the form of teleshopping, has evolved into a mammoth industry. A lot has changed since the first products were sold online in the 1990s. Today, the eCommerce shift is an important, palpable movement in most economies. Digital innovation in customer experience, business models and technology has been changing digital commerce.

Image including a laptop and mobile phone being used for shopping for representing decoupled drupal commerce and react native based ecommerce platform


Remarkable eCommerce solutions propel great customer journeys. In other words, the technology you use has to deliver on the customer promise. Being a leading content management system and enabler of digital transformation, Drupal can’t be far behind. Its eCommerce solution in Drupal Commerce is built to deliver marvellous customer experience. And when another great solution called React Native is used in tandem, there is no limit to what can be achieved.

The decoupled approach with Drupal Commerce

A shopping cart on left and 'Drupal Commerce' written on right


Drupal Commerce is one of the prolific e-commerce solutions that is powering thousands and thousands of online stores of all sizes. It integrates commerce, content and community for creating engrossing web experiences. As a matter of fact, it is the only commerce platform to have been built upon an enterprise CMS which makes it an immensely content-driven solution. Moreover, being an open-source eCommerce framework, highly modular and configurable, easy to use and highly extensible, Drupal Commerce helps organisations in powering product marketing solutions to a great extent.

Graphical representation with light and dark blue regionsUsage statistics of Drupal Commerce | Source: Drupal.org

Decoupling Drupal Commerce can be even better for enhancing scalability and flexibility. In decoupled Drupal commerce, the frontend of your shopping experience is separated from the backend. In this, Drupal’s astounding content management capabilities are leveraged for greater flexibility in developing your commerce experience. And the fast and reactive JavaScript interfaces communicate with powerful Drupal backends through REST API.

Decoupling Drupal Commerce can be even better for enhancing scalability and flexibility

There is a plentitude of modules that can come handy in the development of your Decoupled Drupal Commerce-powered shopping platform. First up is the Drupal Commerce module that is your go-to option for building a Drupal-powered digital commerce platform. You can replace the default cart block and use Commerce Cart Flyout module for a progressively decoupled implementation. If you need to give a RESTful interface that can communicate with carts in Drupal Commerce through a lightweight public API, there’s Commerce Cart API module that helps in building fully decoupled or progressively decoupled cart experiences.

And the modules like JSON: API and JSON: API Extras can be highly useful. While JSON: API module allows you to generate API server for implementing JSON: API specification, JSON: API Extras helps in customising your API. JSON: API is now also part of the Drupal core which makes it even more quintessential asset.

To get a complete list of essential modules in decoupled Drupal ecosystem, check them out here.

React Native: An efficacious mobile app solution

Oval shaped circles overlapping each on top and 'React Native' written at bottom


React Native, a native version of the JavaScript library, helps in building native mobile applications. And the applications built using React Native are distinct in nature when compared to the apps built using Java or Objective-C.

React Native, with its top-of-the-line business value, offers new perspectives

React native allows you to iterate at lightning speed, works tremendously well on targeted platforms and streamlines the debugging process. It leverages the same fundamental UI (user interface) building blocks as the regular iOS and Android applications but the difference is that you assemble the building blocks with the help of React and JavaScript. It works well with the components written in Swift, Java or Objective-C.

Since its inception in the form of Facebook’s internal hackathon project in 2013, React Native has since become one of the most sought after frameworks. Shoutem states that the first public preview of React Native was done in 2015 at React.js Con. Later, in the same year, React Native was made an open-source framework and was available on GitHub.

Today, React Native, with its top-of-the-line business value, offers new perspectives and in various contexts for building mobile applications. Not surprisingly, top-rated mobile apps show an inclination towards React Native for a great mobile presence.

Icons resembling folder, arrow, cloud, camera stacked together


Decoupled Drupal Commerce + React Native

Think about the astronomical preeminence you can attain in your e-commerce venture when you combine the greatness of Drupal Commerce and React Native. Decoupled Drupal Commerce, when leveraged along with React Native, can work wonders.
 
This is exactly what Eldum Rétt, an Icelandic subscription service that delivers food boxes to private households and has been a market leader, opted for their digital commerce presence. Powered by Drupal 7 and Drupal Commerce, when the original website of Eldum Rétt was first built, the demand for more flexibility arose after a period of time which eventually called for an upgrade. A digital agency helped them move up the ladder i.e to Drupal 8 and Drupal Commerce 2 in addition to a React Native-based mobile application that can interact with the main Drupal-powered website.

Homepage of Eldum Rett website with a girl holding balloons


Redressal of Eldum Rétt was crucial for their pursuit of exploration of new market opportunities, offering better user experience via a native application, and enabling fantastic customer engagement. A modern solution required modern tech stack. A spectacular content store like Drupal and its provision for commerce suite in the form of Drupal Commerce ensured that Eldum Rétt gets a modern e-commerce platform that could improve their digital presence. Moreover, being open source and highly extensible, Drupal made it easy to extend the features via its APIs and enable intricate functionalities. Here, Drupal acted as the main data store for all its products, user data and information on orders and expose these to mobile applications for the customers to interact with.
 
A flexible subscription system was created where any product declared as subscribable can be bought as a subscription. It also enables the flexible configuration of meal kits and menus. Schedules can also be easily set. Moreover, it uses smart packing algorithm and the shipping process offers the customer to choose small deliveries instead of bundle deliveries. It has an advanced notification system and also leverages OAuth for authentication purposes. Recipes include comprehensive and structured information and most of the data was migrated from the old system to the new one.

Conclusion

The combination of decoupled Drupal Commerce and React Native can be fruitful for a great digital commerce presence.
 
We have been offering digital innovation solution with our expertise in Drupal Commerce. Contact us at [email protected] and let us know how you want us to build a unique and innovative solution using Drupal Commerce.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web