![]()

#### 

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/extended-properties)

[https://ordercloud.io/knowledge-base/xp-best-practices](https://ordercloud.io/knowledge-base/extended-properties)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_1.png)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_2.png?h=563&w=640&hash=220277AD00AE89B69034970EE9BC7474)

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

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_3.png)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_4.png)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_5.png?h=392&w=700&hash=F30889576438A7714A79B13493365023)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_6.png?h=506&w=700&hash=162A743FE6BAE8D1194F94800F5662B7)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_7.png?h=299&w=700&hash=3309FAD581259E6C0EA47EE84A6D405D)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_8.png?h=359&w=700&hash=2E0BC74E0D220D5CFB6DADD39A78CE14)

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

![](https://www.brimit.com/-/media/images/blog/ordercloud/ordercloud_extendedproperties_9.png?h=389&w=700&hash=EFABE6643A9052E7A442AFBF5FCADCE8)

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!

###### Author

[!\[apaliakou\](https://www.brimit.com/-/jssmedia/feature/blogs/authors/apaliakou.jpg?h=216&iar=0&w=360&hash=5BE96F17AE5B47F66D9F684B87773675)
Andrei Paliakou
Sitecore MVP/ Lead Developer](https://www.brimit.com/blog/author?authors=Andrei%20Paliakou)

###### More By Categories

[#E-commerce](https://www.brimit.com/blog?categories=#E-commerce)[#How-to](https://www.brimit.com/blog?categories=#How-to)[#Guides](https://www.brimit.com/blog?categories=#Guides)[Tech Talks](https://www.brimit.com/blog?categories=Tech%20Talks)[#OrderCloud](https://www.brimit.com/blog?categories=#OrderCloud)

###### More by Platform

[Data and AI](https://www.brimit.com/blog?platforms=Data%20and%20AI)[DXP](https://www.brimit.com/blog?platforms=DXP)[E-commerce](https://www.brimit.com/blog?platforms=E-commerce)[Internet of Things](https://www.brimit.com/blog?platforms=Internet%20of%20Things)[Sales and marketing automation](https://www.brimit.com/blog?platforms=Sales%20and%20marketing%20automation)

#### More on Sitecore

[!\[How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2024/vercel_cover-image.png)
#Guides#How-toDXPE-commerce
##### How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects
Optimize and accelerate the development and deployment of complex multisite Sitecore projects.
Alexei Vershalovich on July 17, 2024](https://www.brimit.com/blog/how-vercel-will-help-you-save-effort-when-deploying-sophisticated-sitecore-projects)

[!\[Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2023/sitecore-mentoring---cover-image.png)
#How-toDXP
##### Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story
How to participate in the Sitecore Mentor program and help younger colleagues jump-start a career in Sitecore development.
Sergey Baranov on October 2, 2023](https://www.brimit.com/blog/training-up-tomorrows-sitecore-mvps)

[!\[Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2022/headless/adobestock_456986731.jpg)
#How-toDXPE-commerce
##### Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)
Discover how a headless CMS can benefit organizations that use Sitecore.
Daniil Raschupkin, Palina Trokhautsava on September 15, 2022](https://www.brimit.com/blog/going-headless-part-2-when-a-headless-cms-is-your-best-bet-if-you-have-sitecore)

![](https://bat.bing.net/action/0?ti=187017043&tm=gtm002&Ver=2&mid=ed8bd00d-5ff1-4dcb-acbb-e33649b1f1a4&bo=2&gtm_tag_source=1&pi=0&lg=en-US&sw=800&sh=600&sc=24&nwd=1&tl=How%20to%20extend%20Sitecore%20OrderCloud%20product%20by%20using%20Extended%20Properties&kw=How%20to%20extend%20Sitecore%20OrderCloud%20product%20by%20using%20Extended%20Properties&p=https%3A%2F%2Fwww.brimit.com%2Fblog%2Fextending-sitecore-ordercloud-product-by-using-extended-properties&r=&lt=338&evt=pageLoad&sv=2&asc=D&cdb=AQAY&rn=716617)