Getting products in the store
Your Commerce experience all starts with your products. Products are the items or services you offer for sale in your store. In Commerce products are associated with a catalog, which enables you to categorize, organize, and request your products efficiently for different selling scenarios.
The codebase is using a service layer to abstract away the details inside products-service.ts. That's good! You only have to wire up your products data.
One thing usually found in an online store is is a listing of all the products. Let's do this by using the JS-SDK all products methos.
EPCC.ShopperCatalog.Products.All()
The function getProducts is expecting data from the JS-SDK response. It just needs the raw response of type ResourceList<ProductResponse> that comes back from the JS-SDK.
export async function getProducts(): Promise<ResourceList<ProductResponse>> {
...
}
Thankfully the JS-SDK is already connected for you, so just make the request. Don't worry, we will explain all that when we discuss authentication. Let's not let it slow you down now.
Try wiring up the getProducts function.
See if you can get the store products to display in the store list page by replacing the empty mock data const epccResponse = { data: [] } with a real response!
Showing what the product looks like
Having a nice summary card displayed for each product in the store looks good, but currently you don't have an image for your products 🤔 We definitely need some images.
Commerce provides a lot of flexibility around handling image files and how they're associated. We need to make a small tweak to the JS-SDK request asking it to include the product main image as part of your all products' response data.
EPCC.ShopperCatalog.Products.With(['main_image']).All()
Adding .With(['main_image]) to our SDK request will let Commerce know you want to include each product's primary image data on the response.
Try and make this change to get product images showing in your store:
Some more info on products
Products have a name, description, stock-keeping unit (SKU), and unit price. Products can be physical or digital. They also often have additional information attached to them, such as an image, inventory status, and maybe even variations such as sizes or colors.
Some of the products properties used in the product list page
| Name | Type | Description |
|---|---|---|
id | string | A unique product ID that is generated when you create the product. |
attributes | object | The attributes that describe the product. |
attributes.name | string | A name for the product. |
attributes.description | string | A description for the product. |
attributes.sku | string | The unique stock keeping unit of the product. |
meta.display_price.without_tax.formatted | string | The formatted product price including currency symbol e.g. $19.99 |