Name: Working with Configurable Products in SAP Commerce Cloud
Uploaded: 2023-8-29
Duration: 330 s
Description: This video introduces how to work with the out-of-the-box configurable products in SAP Commerce Cloud, as well as how to implement custom configurable properties.

Share feedback

<p>Planned maintenance of Practice Systems</p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Subscribe now

Learn more

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div>This video introduces how to work with the out-of-the-box configurable products in SAP Commerce Cloud, as well as how to implement custom configurable properties.<br></div></div></div></div>

Working with Configurable Products in SAP Commerce Cloud

Hello, let’s talk about the “Configurable Products” feature in SAP Commerce Cloud.  For a normal product, I can add it directly  to the shopping cart.   But for a configurable product, there is an additional “configure” button  that directs me to a simple configuration page where I can use user input fields to provide additional data for the product I want to purchase.  These input fields can be drop-downs,  checkboxes, radio buttons, or free-form text.   For example, in this case, I can provide text  that will be engraved onto the related camera  and specify the font type and size.   How is this feature implemented?   It’s done using categories.   Specifically, a Configuration Category,  which extends the normal category type.   In addition to a normal category’s ability  to group products, a Configuration Category references one or more Configurators.  When a regular product assigned to a configuration category is to be added to or in the cart, the customer may then specify values  for the configurable properties defined by each configurator.  These values will qualify the product not only while it’s in the cart,  but also when the cart becomes an order.  Let’s check the existing sample configuration categories in Backoffice.   I’ll navigate to the category node,  and limit the search to the subtype “configurable category,” the localized name for a configuration category.   If I open any of the configurable categories shown, I can see the list of configurator settings at the bottom here.   For example, this configuration category has 3 configurator settings, namely engraved text,   font type and font size.  Let me turn a normal product into a configurable product.  I’ll use this product as an example.  Keep in mind that, right now,  it’s a normal product.  To make it configurable, all I need to do is assign it to the configuration category I just looked at.  For simplicity’s sake,  I’ll directly modify the online version.   Let me check the product again  on the storefront.   It now contains a configure button on the product detail page.   Clicking it will direct me to the configuration page,  where the 3 configurable properties are listed.   Please note that the shopping cart’s ability  to contain a configurable product depends on  the order entry type having been extended to store the configurable properties.   This is done by the Abstract Order Entry Product Info type,   which specifies the configurator type  and the status of the product information,  namely the configurable property.   Out-of-the-box, if a configurable property is filled accordingly,  the status of the product information is “success”.  But if anything goes wrong, the “error” status is set.  For example, if I didn’t fill in the engraved text property,  I can check out how the backend data is represented in Backoffice.   Via the Cart ID,  I can locate the current cart and the order entry with the configurable product.  The product has 3 configurable properties,   and I can see the first product information  has the status “error’, indicating the missing value for the “Engraved Text”,  while the other 2 product information instances have the status “success”.  Furthermore, SAP Commerce Cloud typically uses a “Facades & Data Transfer Object (DTO)” to handle mapping to the presentation layer.  As the backend data needs to be displayed on the front end and,  the DTO Order Entry Data is extended to hold a list of Configuration Info Data objects,  each containing the label and value of a configurable property as well as the configurator type and its product info status  similar to the one in the backend.  Based on this extension, the cart page can display the configurable product with its configurable properties, and show problems if the product is not configured properly.   This is how the out-of-the-box configurable products are managed in Backoffice and used on the storefront.   In addition to this out-of-the-box implementation let’s also look at how to create a new Configurator type.  This can typically be done in the following steps:  First, I need to prepare custom data models  for the new configurator type.  For instance, I need to create a new configurator type as an additional enumeration value,   then extend the configurator setting  and the configured product info  to hold the new configurator type.  Second, I need to implement a corresponding handler to handle the new configurator type on the service layer.   At the façade level, I first need to extend the configuration Info Data as the DTO  to hold the new configurator type, and implement a populator to populate the extended DTO.  Next, I’ll implement the configuration merge strategy to merge  the new DTO into the shopping cart DTO.   Finally, I’ll prepare the frontend files, either for use with Composable Storefront  or as JSPs (if I choose to use the Accelerator storefront),  and the related controller to handle the rendering logic.   If you want to practice the steps for creating a new configurator type,   you can use this trail here on the help portal.   That’s it for a brief introduction  to the “Configurable Products”  feature in SAP Commerce Cloud.   Thank you for watching.