Extending SAP Commerce Cloud to the Metaverse

On July 20/21 of 2022, 3 colleagues at SAP CX and me joined the Hackathon team "MetaVersetiles" and extended SAP Commerce Cloud to "the metaverse", namely Decentraland. In this short article, I'll explain our initial idea and then we'll look at each part of MetaCommerce, our Hackathon creation.

But first - here's the awesome team MetaVersetiles that helped to bring this alive:

• XingXing Zhou (he,him) - our code monster 😈
• Natalie Reed (she/her) - our infrastructure & ideas angel 😇
• Lars Gregori (he/him) - our metaverse boy 👦
• and myself, Sven Haiges (he/him), RESTful idiot 🥰

Here's a wacky picture of us, taken from the 4th floor the downtown SAP building in Munich :

The Decentraland Builder & Smart Items

The core of your hackathon creation is a Decentraland Smart Item . Smart Items can be used in the Decentraland Builder via a simple, easy to use and no-coding-skills-required 3D user interface. The usage of this smart item is shown in the video below:

A Decentraland (DCL) Smart Item is luckily developed via the same Decentraland (DCL) SDK that is used for normal scene development. This means if you have basic skills in developing a DCL scene, you should feel at home as a developer. For testing, a developer simply instantiates a few of the new items in a bare-bones scene.

While most things went smooth and as described in the SDK/SmartItem docs over at the Decentraland Website , we noticed that the scene built with the Decentraland Builder was not working in preview mode once downloaded. Here's what we had to fix in the scene (mainly listing to provide some value for Smart Item Devs and DCL team for fixing):

• The item.ts file was missing in the download from the builder. This meant we had to copy over our item.ts from the smart item dev project to the downloaded builder project.
• The paths in our item.ts (e.g. loading 3D assets for the scene) were incorrect. As the smart item id from the asset.json file ends up as folder name in the downloaded builder project, we needed to correct the path to the assets. Maybe there is also a prefix we could use - but this info was nowhere to be found.

The Resolver Web App

The Commerce Smart Item uses the fields RetailerID and SMID (Smart Item ID) to perform a REST call against our own service, which we called the "Resolver Web App". This web app provides both a RESTful interface for resolving the smart items from a Decentraland scene as well as a web UI which is meant to be used by a metaverse marketing manager. While the UI and the app is quite simplistic, it get's the job done and is able to configure which smart item resolves into which product from the SAP Commerce Cloud backend.

We're also cleaning up the (quite big) JSON response from the SAP Commerce Cloud REST API quite a bit and just pass on what we need for the smart item:

const product = await fetch(url).then((res) => res.json()).then(json => {
    return {
      id : json.code,
      title : json.name,
      description: json.summary,
      imageURL: `${BASE_URL}/${json.images[0].url}`,
      storefrontLink: `${STOREFRONT_URL}/electronics-spa/en/USD/product/${productId}/${json.name}`,
      price: `${json.price.formattedValue}`
    }
  })        

The final end-user experience

Let's now have a look at how an end user, a customer, would experience our Decentraland scene. In the video below we've started the scene that was built in the Decentraland Builder using our Commerce Smart Item in a preview mode (please donate $LAND NFTs to hansamann.eth ). As you can see, the RetailerID/SMIDs are correctly resolved with the help of the RESTful API hosted at the Resolver and with the help of the SAP Commerce Cloud backend. Now if we only had a bit more modern test data... cameras - when did you last buy one?

Recap and summing up...

This was a ~2 days hackathon experience and it was super awesome. Our team worked well together and everybody took the tasks that needed to be done. We organized ourselves on-site the first day (how crazy, IN the office) and went mostly back into a well-known home office setting on day 2. A Mural board (shown below) was used to organize our tasks and to build an architecture diagram (kind of) in a super fun and joint way on day 1.

We just had a small debrief in our internal Wiki and everybody took down the key learnings, the things to improve, what was fun and what not... my personal biggest learning is to really completely block hackathon days, decline all meetings on hackathon days (I still had a couple and that just resulted in a kind of meltdown, especially with late lunch and super hot temperatures out there). As I spend most time at home by now, returning into the office is a challenge as so many things buzz around - starting with a hackathon might have a bit tough in retrospective. But luckily it all turned out well, thx to an awesome team and to Ken Lomax for organizing the hackathon!