As a continuation to my previous posts, let us see how to build a simple Product Grid with OrderCloud using Custom React hooks and Google Firebase ( to store the product images) . I have attached the Organization structure and the Product Catalog structure below. However if you also want to see more about how to create a Product in ordercloud and make it available for buyers, then you can refer this post.

I have stored all the product images in Google Firebase storage. You can read more about it from here. And each image stored in the google firebase has a unique token. So when we build a image url we need the token also to be supplied.

Note:- Alternatively we can also use the Sitecore Content Hub to store all the product images. But I wanted to try the Google Firebase here.

How I store the Product Image details in OrderCloud Product structure ?

I am using the ordercloud product’s extended properties (xp) to store the image details. I have attached one product structure below,

We will see in detail how to convert these extended property to strongly typed Product object.

Middleware Function to get the Me Products

I have the below method in my dotnet core middleware, that returns all the Me Products and the function looks like below,

You can notice that I am returning the Me Products as strongly typed object FSBuyerProduct in our case that inherites from the OrderCloud SDKs BuyerProduct.

As mentioned early, we are using the OrderCloud SDKs extended properties(xp) to store the image details of a product. This extended property is of type dynamic, so we can deserialize this runtime to any of our custom type as needed.

Converting the Extended properties to Strongly types custom Image object

The image details are stored in the OrderCloud product detail as below and as you are seeing, it has an ‘image’ property with ‘name and token’ as their children.

So for image, we can create a new class Image with the properties name and token. And another class ImageXp with a property image of type Image.

This custom ImageXp class can be used now in the FSBuyerProduct class like below.

During the deserialization of the result buyer product model from the Api, this reads the Xp property and converts them to our strongly types object type like below,

You can read more about on the Extended Properties from here.

Calling the middleware function from our front end application using custom React hooks

For the Product Grid, we need to fetch the Me products list from our frond end buyer application. For this I have created a custom react hook that makes the GET request to our middleware and it looks like below.

This generic hook makes the http request to the given end point url. Once the results are returned from the API, then it calls the callback method passed to this http hook.

Also this hook is using the React’s useCallback hook. It is because we are using this useHttp with useEffect. So to avoid the api calls from getting triggered unwantedly in the child components , I need to return the memorised version of it. You can learn more about it from here.

The above useHttp custom hook can be used to call our /product/list middleware function to get the list of Me Products.

I have extracted the sendRequest function like below in our ProductList component,

And now the API call can be made like this with the Authentication token from our authentication context,

The transformProducts is a callback function that converts the returned product object into a custom object to build the product grid.

The entire ProductList function will look like this,

The below one helper function is used to form the firebase image urls. As I have mentioned, we also need to specify the token in the image url. We have already saved this token value in our extended properties of our OrderCloud Product. So we can make use of it while building the image url.

With these setup, at the end I will be having the product list in the meProducts object and I will be forming the grid.

This ProductCard is an another custom component that returns a single card for the given product and it looks like below,

This is a basic Product Grid and I will be working on to introduce the filters and pagination capabilities to it.

So Stay tuned for more….!!!!!!

Demo

The Product Grid will look like this.

Note:- No other components are ready except Product Grid for now. So you ignore the blank home page and focus only on the Product Grid. 🙂