How to Build a LCNC OrderCloud Backoffice Application

As solution providers, we often think to build something that meets our clients specific requirements we need to build it from scratch. Given the time, budget, and resource constraints it’s usually not viable to build a great working poc or demo for a potential client that will blow their socks off. With OrderCloud while it is an amazing platform enabling you to build all sorts of B2B and B2C commerce solutions, whether it’s a fully fledged commerce website or a simple tool that meets the needs of a business user to allow them to manage promotions you need to build it! But what if you took an alternative approach? What if you could utilize a Low-code/No-code platform to quickly and more easily create that winning poc or internal back office applications? This is a topic I shared during SUGCON Europe 2024 in Dublin.

Pillars of Modern Ecommerce

To be successful in e-commerce you need a great Product, and a vision along with some smart people, loyal customers and the right technology stack to help execute and support your vision.

We’ve seen a shift from Monolithic all-in-one e-commerce platforms towards modern composable headless platforms. These Modern platforms provide:

  • Flexibility – greater flexibility flexibility allows development teams to make changes easily and rollout new features much quicker than before.
  • Integrations – They can easily integrate with existing systems and support new integrations.
  • Omnichannel support– With the explosion of channels over recent years the ability to create a seamless customer experience across all channels and touchpoints is key. So, irrespective of whether the customer orders online or chooses a product in-store and asks for it to be delivered to their address, their experience with your brand should be seamless and positive at every stage of their journey.
  • Customizable – No two businesses are the same they all have a different customer base with different user journeys and requirements. While all commerce platforms share a common set of features these should be easily customizable to meet the specific needs of the business now and as it evolves.
  • Scalable – And as the business grows the platform must be capable of scaling up to handle the increased traffic without performance degradation.

OrderCloud

OrderCloud is a SaaS Ecommerce platform. Due to high degree of configurability it is capable of handling complex B2B, B2C and B2X scenarios. Through its powerful features and headless Rest API architecture you can assemble a commerce solution to meet your clients exact requirements. Whatever commerce functionality a client might need you can build it with OrderCloud.

Once you’ve defined these requirements then you can start building the required applications needed to support it. Were not just talking about creating their online store, were also talking about POS, Backoffice applications. They might need a back office application for managing the products, catalogs and prices, managing order and prices you can build it.

Complex Retail Customer Journeys

I attended Klaus Petersons session during SUGCON titled: Retail Order Management – the real examples. Klaus is an long-time experienced expert in Sitecore and ecommerce. In this he described the simple to more complex Omnichannel user journeys in retail. Some of those journeys might include the following:

  • Buy In Store with immediate delivery.
  • Buy online and pick up in store with own stock.
  • Buy online and pick up in store without own stock (click and collect).
  • Buy in store, split between immediate order pick up and pick up in a different store.
  • Buy in store split between immediate order and delivery at home.
  • Buy in store split between immediate order and pickup from different store (no stock).
  • Buy online and spilt between delivery to home and pick up in store with stock.

In his session described how you need to really thing about each of these journeys as a they directly impact how you go about constructing your OrderCloud solution and configure the entities available in OrderCloud.

What is OrderCloud?

Describing OrderCloud to a potential client can be a challenge. As it is a bit of a black box. All of its features are hidden away behind its RestAPI. While you can completely customize the Buyer and Seller Applications you must Build It!

This is also its Strength. As you can Build to the exact requirements after you’ve determined the operational approach. To help you build, OrderCloud provides some Developer Tools, SDKs, and some additional tools and there is some great sample implementations that can help you get started.

Interactive Console

The interactive API Console is the only thing you get that resembles an interface OOTB. Allowing you to run queries against your data. I’ve heard it described by someone in the community as “Postman on Steriods..”

PLAY! Summit- Custom Buyer Interface

The Demo team created PLAY! Summit  – A headless commerce solution built to showcase the power of Composable Sitecore DXP. Using Sitecore XM, Content Hub, CDP and Personalize, Discover and OrderCloud. Which is great for demos or just wanting to learning. It might not represent exactly what it is the customer wants but helps tell the story of what is possible!

Headstart React Admin

The Headstart React Admin is a example of a seller application built on top of OrderCloud JavaScript SDK. It’s not a production ready application but is a great starting point to teach developers how you could implement a back-office application using OrderCloud Javascript sdk and APIs.

It was Built using react, nextjs, typescript, chakra ui, and various other tools. Features include ability to manage:

  • Products inc facets, prices, catalogs
  • Promotions
  • Buyers
  • Orders and their returns.
  • Suppliers
  • Security

Tech Transformation Initiative Backlog

So whatever you need you can build it. You just need the budget, developers, and time to build it. With these constraints many companies often have a backlog of tech transformation initiatives they need to implement.

With the onset of the pandemic most companies had to accelerate these initiatives. Many discovered there was a shortage of available skilled resources capable of implementing their projects. So they started looking at alternatives being offered through Low Code and No Code Platforms.

”70% of new applications developed by organizations will use low-code or no-code technologies by 2025, up from less than 25% in 2020” Gartner Research

Increase in LCNC Platforms

There has been a steady increase in the number of LCNC platforms while existing platforms have been adding Low Code / No Code features to their platforms.

We’ve increasingly seen these features being added to the Sitecore products so that non-developers can assist in implementing solutions that were normally only something a developer could do.

Sitecore Personalize – when you create decision models in Personalize you are using a Low Code / No Code interface, allowing you to drag and drop decision elements onto the canvas to construct your Decision Model.

Sitecore Connect – is Workato under the hood allowing you to create workflows using a drag & drop application to construct your system integrations.

Sitecore 10.4 – provides the ability to customize visitor profiles without a needing a developer – through a new no-code user interface to allow marketers to extend visitor schemas to support common scenarios without developer involvement, while still retaining the advanced customization capabilities already available for developers

Benefits of Low Code / No Code

The reason being is some of the Benefits that these low code / no code platforms offer to businesses LCNC have:

  • Democratized – the delivery of applications, by enabling more people within the business to get involved in ideation, poc’s and implementations of tools that help and support the business.
  • Reduce Costs – as applications can be built quicker and in theory by non-technical people the can have a significant reduction in costs.
  • Faster-time-to-market – using LCNC platforms enable applications and new features to be delivered much quicker than traditional methods. This an accelerated time-to-market enabling businesses to be more agile and can give them a competitive edge.
  • Improved Efficiency – by enabling non-technical folks to deliver or manage feature enhancements themselves this provides efficiencies for the business by allowing your technical team to focus on other more critical applications while providing more of a consultancy role rather than always being hands on.

Citizen Vs Traditional Developer

The idea of non-technical users developing solutions is nothing new. The term “citizen developer” was first coined by Gartner in 2009 but has grown in popularity with the rise of LCNC platforms.

These individuals have little to no coding knowledge and work outside the IT department, yet they possess the ability to create custom applications for themselves, fellow employees, and even customers. They leverage low-code/no-code platforms with visual interfaces and drag-and-drop builders to connect components and create software without writing code.

Traditional Developers get to benefit from Low Code / No Code tools. These tools help streamline the development process by removing some of the more mundane tasks. As development languages, tools and platforms continue to evolve so has the developer experience, making it easier in some ways for us to deliver solutions more quickly and more efficiently, by enabling us to focus on more complex and critical tasks.

Using LCNC with OrderCloud

While exploring the Low Code platform: Retool it occurred to be why not try and build a backoffice application for OrderCloud, providing similar features as those provided with the Headstart React Admin.

I could have chosen any of the LCNC platform but I was interested in Retool having read some articles about the platform and how it is mainly used by engineering teams to quickly create utilities to improve efficiencies.

Retool is a Low Code platform targeted at developers to help them build internal applications quickly and efficiently. It supports RestAPIs, GraphQL and SQL and allows you to create poc’s and simple applications in hours and days rather than weeks.

Useful Info

Sitecore Demo Portal

If you’ve been involved recently with Sitecore on any client pitches for OrderCloud or CDP & Personalize then you would have seen Sitecore Sales engineers demonstrate the power of these applications running on the demo portal using the PLAY Summit. It has been made available to all Sitecore MVPs this week and allows you to quickly and easily spin up an environment and instance to easily demonstrate Sitecore products. For Partners you need to be onboarded via the partner team, you can contact your partner manager to get access.

If you’ve ever been involved in pre-sales then you know how much effort can go into standing up a demo Sitecore Solution to provide your Sales and Marketing teams with something that can be shown to potential new or existing clients.

The goal of the Portal and what the Sitecore Demo team have continually been striving towards – to simplify the process of spinning up a working Sitecore solution, allowing you to quickly demonstrate the main features with each new Sitecore release. It has to be said they’ve had their work cut out recently with all the recent acquisitions and new Products being added to Sitecore. But it has to be said this most recent incarnation of their demo solution and portal is their best work yet! It demonstrates how to spin up a ComposableDXP with Sitecore with a few clicks and some simple configuration. The portal will do its thing and you can review the progress or go make yourself a cuppa coffee and wait until you receive an email indicating your demo instance is ready in around 10-15mins. Awesome!

Taking it for a spin

I was fortunate to get early access to take it for a spin. If you’ve not already accessed the demo portal you’ll want to head over and sign in with your Sitecore Partner account. Once signed in you’ll be presented with the portal home screen which will list any current demo instances you’ve created:

As you can see here I have several demo instances available one for each of the demo templates that are currently available.

To spin up and new demo instance Select the Get a Demo menu option or click Quick Demo for a faster wizard-like experience.

Continue reading

Using Postman with OrderCloud

The OrderCloud API Console is a pretty awesome tool and an excellent feature to have within the OrderCloud platform. However, I like to utilize Postman when developing against APIs. As I’ve previously demonstrated by utilizing Postman with Sitecore CDP & Personalize and Sitecore Send, in this post I’ll look at using Postman with the OrderCloud API.

Importing the OrderCloud API into Postman

OrderCloud provides an OpenAPI spec and is available at OrderCloud Developer Tools. You can use this definition to import into Postman and create a collection. To import follow these steps:

1. In Postman create a new Workspace -> New Workspace let’s call it OrderCloud API

2. Now copy the OrderCloud OpenApi URL documentation endpoint and click on the Link tab and enter the copied URL and click Continue.

3. Use the default setting and click Import.

4. The OrderCloud API definition is imported and a collection of APIs are created and divided into the various functional areas as described by OrderCloud API definition as described in the API Reference guide.

Using the Collection

Once the collection has been created there are a few things you’ll need to set up:

  • Register for an account on the OrderCloud Portal.
  • Create or have an existing Marketplace.
  • Create or have existing API clients: Seller Client, Buyer Client.
  • Create or have an existing Admin User account and security profile with full access.

All of these details are covered in the OrderCloud Establishing API Access guide.

Note: If you have used the Vercel Commerce template and added the OrderCloud Integration or the headstart-nextjs application then these would have been created during the setup of the integration.

Authentication and Access Tokens

OrderCloud uses OAuth 2.0 for token-based authentication. This means that each API request to OrderCloud requires a valid access token which can be acquired through a variety of OAuth workflows.

Encrypted in the token are the identity of the user as well as the roles that the user has access to. Once validated, the OrderCloud API has enough information from this token to determine which endpoints and data a user can read and/or write.

Tokens are valid for 8hrs and you can renew or create a new token. Generated tokens can then be stored in a variable and reused.

OrderCloud API Exercises

While the APIs are well documented in the Reference guide there is a great OrderCloud Postman Tutorial. These postman exercises will guide you through the steps, data and api requests involved in setting up a fictitious Coffee Shop. This is a really good starting place to learn the various APIs and data structures and how they interact with your OrderCloud data.

To import the exercises into your own local or web postman instance simply click on the simply click on the Run In Postman button located at the top of the exercises to import into with your web or desktop postman instance.

You will also want to import the variables used in the exercises and update them accordingly to your OrderCloud environment instance as you progress through the exercises.

Have Fun!

How to Integrate OrderCloud with Vercel Next.js Commerce

In my previous post, I demonstrated how to get the Sitecore OrderCloud headstart-nextjs running and deployed to Vercel. In this post, I will show you how to create a Vercel project using the Commerce template and steps to add Sitecore OrderCloud integration. How to then set up the project for local dev, make some basic changes and deploy those changes to Vercel.

Next.js Commerce Template

Vercel gives you the ability to create new projects, deploy existing projects or you can choose from one of their Templates. These templates are a great starting point to wrap your head around some of the Vercel concepts without having to start from scratch. I recommend checking them out.

The Commerce project template uses Next.js Commerce an all-in-one starter kit for high-performance e-commerce sites. It already boasts integrations out-of-the-box with the following commerce platforms: BigCommerce, Shopify, Swell, Saleor,Vendure and OrderCloud. With plans to support other platforms. Features include:

  • Performant by default
  • SEO Ready
  • Internationalization
  • Responsive
  • UI Components
  • Theming
  • Standardized Data Hooks
  • Integrations – seamless with the most common ecommerce platforms (Shopify, BigCommerce, Swell, Vendure, Saleor and OrderCloud).
Continue reading

Spin up Sitecore OrderCloud Next.js app on Vercel

In this post, I will introduce you to some of the handy developers tools provided by Sitecore OrderCloud to help you get up and running quickly with OrderCloud and Next.js. We will look at how to seed OrderCloud with some sample data, use the Console API to query the data, spin up an instance of the headstart-nextjs application and finally deploy the application to Vercel.

Continue reading