Name: Extending the SAP Commerce Cloud Composable Storefront with Outlets
Uploaded: 2023-11-22
Duration: 511 s
Description: In this video, you will learn about the outlets concept and how to utilize it to customize the Composable Storefront UI.

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>In this video, you will learn about the outlets concept and how to utilize it to customize the Composable Storefront UI.</div></div></div>

Extending the SAP Commerce Cloud Composable Storefront with Outlets

Hello everyone.  In this video, we will discuss outlets and how outlets can be utilized to customize the standard UI provided by Composable Storefront.  So, what are outlets? An outlet is a provision in the composable  storefront which enables developers to  customize the standard UI by injecting custom UI into the DOM Outlets are places in the application UI where a customization can be injected.  This comes in handy whenever there is a need  to change the UI at granular level or when one  doesn’t have any access to template code to customize the storefront.  Outlets are generally referenced via a name string.  How can we find the list of available outlets in a page?   It can be found by inspecting the HTML source  code using Chrome browser developer tools.  This is the local instance of  the electronics Composable Storefront which is using Spartacus sample data.  When you perform a text search for “cx-outlet”  under the elements tab, we can locate all the available outlet references in the page that can be leveraged for customization.  In this example, we can see outlet options  available for header, footer, and even  for cx-storefront.  Now let us take a look at the types of outlet  references that are available The first type are Data-Driven Outlet  references, also known as CMS-driven outlets.  The second type are Software-Driven outlet  references, which are hard-coded outlets that come built-in by default  in Composable Storefront.  Let us take a detailed look at  these available options.  As inferred from the name,  CMS outlet references are provided by  the CMS structure.  Below are the three types of these  outlet references The first type references the name of  the CMS Page Layout.  The next type references CMS Page  slot positions.  The last type references CMS component  types -  Each component type is available  as an outlet that can be customized.  Next up are Software-driven outlet references, which are hardcoded.  These outlet references are explicitly  hard-coded into composable storefront.  The outlets listed on this slide are prime examples of software-driven outlets.  For example, cx-storefront can be useful when you wish to introduce additional UI to the storefront, either to replace existing UI,  or to add UI before or after.  Similarly, cx-header, cx-footer, and  navigation outlets are wrapper outlets for  header, footer, and navigation sections.   So how do we use these outlets?   The syntax is very simple.   We create an ng-template block and use the cxOutletRef attribute.  The HTML of the UI customization is enclosed  within this ng-template element.  The above changes would be sufficient  to override the UI in the targeted outlet.  If you require adding UI content before or after  an outlet reference instead of replacing it,  then the cxOutletPos attribute comes in handy.   Its value can be before, after, or replace.  The types of outlets where we use ng-template  and the cxOutletRef attribute for customizing UI are called Template-Driven Outlets.  Now we will take at a look at how to override  parts of the UI using template-driven outlets  and outlet positions.  So, to demonstrate template-driven outlets, let us replace quantity and the add to cart  button in the product details page  with a custom add to cart button.   These screenshots are the before and after  snapshots of the PDP page  after the outlet changes.  Now let us get into the demo... This is the codebase of a local instance  of the electronics storefront.    To save time, we will use a pre-written code snippet to demonstrate template-driven outlets.  Currently in product details page,  clicking the add to cart button will show the added item in the cart.   We will override this behavior via a template-driven outlet.  This is the code snippet that will be  used for the demo.  This snippet has an ng-template block with an outlet reference of  ProductAddToCartComponent.   The Product Add to Cart Component contains  both the quantity and add to  cart  button elements.   As seen earlier in CMS-driven outlets,  this is a component-type outlet reference.  We will be adding our outlet changes in app.component.html.  Within this ng-template block,  there is an HTML snippet that creates our  custom button in the specified outlet.  There is also an onclick event handler in the snippet which will  display a popup  window showing “cart button has been clicked”.  Once this change gets compiled, we will see the default quantity and add to cart button replaced with our “Custom Add to cart” button  And when I click on it, a popup appears, with the expected message.  This is one of the simplest examples  to demonstrate the capability of  template-driven outlets.  Now let us see how to use outlet positions for customizing UI.  Let us take the Section 1 page slot  of homepage as an example of injecting custom UI before and after this page slot.  For simplicity, we will insert HTML text  before and after an outlet.  cxOutletPos is the attribute to be used for adding UI before or after the outlet references.   In order to do that, corresponding variables  must first be defined in the component class.   In this case, the snippet is to be added to AppComponent, therefore outlet position  variables are declared in  the app.component.ts typescript file.   Since we will be adding UI before and after an outlet reference, both BEFORE and AFTER  positions have to be declared.  On adding the snippet to App Component, and once it gets compiled, we can see HTML  text prepended before the Section 1 banner  and some more HTML text appended  after the Section 1 banner.  This is how we use outlet positions.  Moving on, let us look into  what is an outlet context.  Whenever an outlet is created, the given UI  context can be injected into the outlet template.  This is achieved by using let-[var] syntax  where “var” can be any identifier  that references the outlet context.  In the screenshot, we can see the Section1  page slot outlet context being available via a model variable and the same being used  rendering data in the UI.  Now let us look at some granular static outlets  available in the product listing  and product details pages,  in addition to the various CMS-driven outlets.  This is to provide flexibility for developers to customize different sections of these pages  based on business requirements.  Now, starting with the product details page, fine-grained outlets are available for price,  summary, share, and introduction fragments,  as depicted in the screenshot.  Similarly, in a product listing page, there are a  couple of fine-grained outlets available  that can be used for customization.  These outlets are around the “Add to cart”  button and the product description section.  This concludes our  “Extensibility with Outlets” video.  There is detailed documentation about this  topic in the SAP Help portal.   Do take a look, and happy learning!