Release Candidate Generic Top Hero For Com 1500X500px 1@2X

Umbraco Commerce 12.1 release candidate

Try out the new features for the ecommerce add-on

Matt Brailsford 500X500
Written by Matt Brailsford

In a few short weeks we will be making a new minor release of Umbraco Commerce available containing an exciting new feature, the Umbraco Commerce Storefront API. This new API will bring headless cart management and checkout processing capabilities to Umbraco Commerce, opening up some exciting new possibilities. You can read more about this new feature and how to try it out below

As the Storefront API is a large new addition, and to be consistent across the other Umbraco commercial product offerings, we are first issuing a release candidate to allow you to evaluate it before it is made officially available. We do this to give the community an opportunity to test and feedback on any immediate issues they might find, allowing us to ensure that when we do release, it’s as solid as it can possibly be.

How to get access to the new version and where to submit any comments and report issues, is discussed at the bottom of this post.

Let’s have a look at what you can expect in this latest release 👀

What’s new in Umbraco Commerce 12.1

This release is primarily around the new Storefront API adding headless capabilities to Umbraco Commerce to bring it inline with the new Content Delivery API for the main CMS. Along with this, there have been a few non-breaking updates to enhance existing functionality when used in a headless setup, as well as a few minor bug fixes.

Storefront API

The Storefront API is a REST/JSON-based API providing extensive cart management and checkout processing functionality. With the new Storefront API it opens up a plethora of omnichannel possibilities that just weren’t possible with the core C# API (without implementing your own REST API at least).

We’ve created REST endpoints covering every feature of the C# API, ensuring that whatever was possible within C# is also possible via REST. 

We’ve also exposed two ways of completing checkouts, allowing for our preferred “redirects” based approach, but also endpoints to allow inline/onsite checkout implementations. So no matter how you want to take payments, the Storefront API can handle it.

For a full technical overview of the Storefront API, you can access the Swagger docs on an installation at /umbraco/swagger

Umbraco Commerce 12.1 Swagger Documentation 1495X971

Property Editor Value Converter updates

As Umbraco Commerce uses Umbraco content nodes for product data, it is necessary to use the Umbraco Content Delivery API for accessing product catalogs and product data. To aid with this, Umbraco Commerce 12.1 also ships with some Value Converter updates for the core Umbraco Commerce property editors to make them Content Delivery API compatible.

This includes returning Storefront API models for store entity pickers, ready-to-use localized and formatted prices for price fields, and a custom mutli-variants model for the variants property editor.

Other updates

The other updates included in the release are as follows:

  • Added templating functionality to payment provider settings to allow dynamic value resolution, e.g. the template `{Order.OrderNumber}` would inject the order number into the given setting value.
  • Default order number template has been set to `ORDER-{0}`
  • Fixed default Product Adapter not correctly falling back to parent product property values when using child node-based variants.
  • Added `IProductSnapshotWithImage` interface to allow product snapshots to expose a product image.

Additional releases

In addition to Umbraco 12.1.0-RC, we’ll also be releasing a number of additional resources to make exploring the new Storefront API even easier

Storefront API documentation

As well as the Swagger docs exposed in an Umbraco installation, we have also added full Storefront API docs to the Umbraco documentation website. 

You can access these at https://docs.umbraco.com/umbraco-commerce/reference/storefront-api

Umbraco Commerce 12.1 Storefront Documentation 1432X925

Demos

With new API’s it can be hard to know where to get started, so to help with this we have not one, but two headless commerce demos for you to try out.

Vercel Commerce Demo

Umbraco Commerce 12.1 Versel Demo Site 1626X972

The Vercel Commerce demo is an implementation of the official Vercel Commerce demo running on top of the Storefront API. 

The Vercel Commerce demo is a really great example solution produced by Vercel using the latest NextJS features and really shows how the new Storefront API can be made to fit these types of templates.

You can view a running version of this demo online at https://vercel-commerce-demo.umbraco.com and can access the backoffice behind this at https://admin.vercel-commerce-demo.umbraco.com/umbraco. The full source code is also available on GitHub at https://github.com/umbraco/Umbraco.VercelCommerce.Demo 

Umbraco Headless Demo

Umbraco Commerce 12.1 Headless Demo Site 1626X972

As great as the Vercel Commerce demo is, it didn’t allow us to show the breadth of the Storefront API’s capabilities, especially when it comes to the checkout process, so in order to more thoroughly demonstrate all of the Storefront API’s features we also decided to create our own demo solution.

For the Umbraco Headless Demo, we reused the design of the official Umbraco swag store and re-implemented it in a headless manner, extending the design further to showcase every possible feature, including quick add dialogs for complex variants, and a search/filter dialog. By reusing the swag store concept we were able to ensure we built a demo that covered the needs of a real-world solution.

Whilst we are introducing the Umbraco Headless Demo here as a way to showcase the Storefront API, our goal is to make this a single solution to demonstrate the headless capabilities of the CMS and add-ons, so we’ll be adding Umbraco Forms examples to it in the near future.

You can view a running version of this demo online at https://headless-demo.umbraco.com and can access the backoffice behind this at https://admin.headless-demo.umbraco.com/umbraco. The full source code is also available on GitHub at https://github.com/umbraco/Umbraco.Headless.Demo

Stripe Payment Provider 12.1.0

To allow showing a real-world payment provider example in the headless demo, we made an update to the Stripe payment provider to allow using its callback endpoint to initiate a payment intent for use in the inline payment form example. This shows how payment providers can be updated to expose some simple API methods to help with inline payment processing. 

These updates are non-breaking from the 12.0.0 release.

Umbraco Commerce 10.0.1

As Umbraco Commerce 12.1 contains some bug fixes, we’ll also be releasing an Umbraco Commerce 10.0.1 patch with those fixes applied in line with our LTS policy.

How to test

You can either create a new installation using the package available from the link below or upgrade an existing project. Or, if you just want to try out one of the example solutions, you can find “Getting Started” instructions on the GitHub repos linked above.

Whichever scenario you choose, they can all provide valuable feedback. 

If you find anything in the release candidate that is not working as you’d expect, we’d be grateful for feedback on the GitHub issue trackers for Umbraco Commerce. You’re welcome to submit new bug reports indicating that you have been working with the release candidates.

Release Candidate Generic Top Hero For Com 1500X500px 1@2X

How to get your hands on the Release Candidate

The release candidate is available from the usual NuGet feed and you can find configuration instructions on the Umbraco Documentation website.

When is the Public Release?

We’re aiming for a full public release on August 30, 2023, when Umbraco Commerce 12.1 (and 10.0.1) be available for new and existing projects via NuGet.

A big H5YR 🙌  to everyone who we spoke to to get feedback on our approach. And thanks to everyone willing to lend a hand in testing it out.

Bug reports are best handled on the issue tracker and as always, we welcome you to submit product feedback and questions to product@umbraco.com.