GraphQL Extensibility: A “SelectSingleItem” Query

Sitecore OrderCloud has some predefined properties for different types of entities (product, product variant, order, cart, etc.). Different markets and clients can sell different goods. For each product, there can be different product/variant properties. Usually, it is required to define all of the product properties to store them logically and properly in the commerce engine. Today I want to explain how you can extend Sitecore OrderCloud Headstart to use additional custom product details properties.

If you are not familiar yet with Extended Properties (XP) in Sitecore OrderCloud those two posts will help you get started:

https://ordercloud.io/knowledge-base/extended-properties
https://ordercloud.io/knowledge-base/xp-best-practices

I will extend the existing Sitecore OrderCloud Headstart product model with the new StorageConditions string property. I will have to extend Middleware, Seller, and Buyer applications for that.

Let’s start with the middleware.

Middleware

We need to extend the ProductXp model with the new StorageConditions property.

This model you can find here: \src\Middleware\src\Headstart.Common\Models\Headstart\HSProduct.cs

Once you build and run/deploy your changes you will be able to receive the newly added property from Sitecore OrderCloud.

Seller app

First of all, we have to add the StorageConditions property to the ProductXp interface for SDK.
You can find the file here: src\UI\SDK\src\models\ProductXp.ts

Add StorageConditions property with the empty value to ProductService class to emptyResource object:

File path: src\UI\Seller\src\app\products\product.service.ts

 

 

Add to the ProductForm the new FormControl for StorageConditions field: 

File path: src\UI\Seller\src\app\products\components\product-edit\product-edit.component.ts

 

 

Add some HTML to show the new input field for StorageConditions:

File path: src\UI\Seller\src\app\products\components\product-edit\product-edit.component.html

 

 

Add HTML to show the preview editing value for StorageConditions property:

 

 

When you run Headstart Middleware and Seller applications you will see something like this:

 

 

Now you can manage the StorageConditions property for a product in the Seller UI application.

 

Buyer app

 

We have to do some changes to make our new StorageConditions property value visible on the Buyer UI application.

File path: src\UI\Buyer\src\app\components\products\product-details\product-details.component.html

 

 

Finally on the Product Details Page you should be able to see Storage Conditions value:

 

As far as we can see, it is pretty easy to extend Sitecore OrderCloud Headstart to manage and show a new custom property on Seller and Buyer UI applications.

Happy coding!