Name: Configuring Infinite Scroll in SAP Commerce Cloud Composable Storefront
Uploaded: 2023-11-28
Duration: 459 s
Description: In this video, you will learn what Infinite Scroll in Composable Storefront is, and how you can configure it according to your business needs.

Share feedback

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

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div>In this video, you will learn what Infinite Scroll in Composable Storefront is, and how you can configure it according to your business needs.</div></div>

Configuring Infinite Scroll in SAP Commerce Cloud Composable Storefront

Hello everyone. In this video, we will be  discussing the infinite scroll feature  of Composable Storefront.  Infinite scroll is a web design and user interface  technique that allows users to continuously  view content on a webpage without having to  click on pagination links or load new pages.  Instead of breaking content into separate pages, infinite scroll loads more content as the user scrolls down the page.  The primary advantage of this is that it keeps  the users engaged by providing a steady  stream of content without the need for them to manually navigate between pages.  This provides a fluid and native experience  especially in mobile devices, where having  to click on pagination links degrades  the user experience.  In composable storefront, infinite scroll applies  to product-search-result pages  and category pages in both list and grid views.  “ngx-infinite-scroll” is the Angular library which implements this feature.  By default, the UI displays product lists  via conventional pagination with  infinite scroll disabled.  Infinite scroll can be enabled via certain  settings in SpartacusConfigurationModule.  We will discuss these configuration properties  in the upcoming slides.  Now let us look at the ViewConfig object,  through which the infinite scroll feature  is configured.  ViewConfig holds  the application’s view configuration.  This object also holds the properties  that control infinite scroll.  The screenshot on the left reveals the structure  of the ViewConfig class.  We can see the defaultPageSize setting  for list-type pages and a few other properties  that affect infinite scroll.  The screenshot to the right is the default  ViewConfig configuration for list-type pages.  This is the source code from the version 6.3 of composable storefront.   Here is the defaultViewConfig listing.  In this Config, we can see the default  page size is 12, which means, by default, 12 products are shown in each of the listing  pages via pagination.  In infinite scroll view, 12 products will be  retrieved at a time from the backend and listed  continuously as the user scrolls the page.  As can be seen, Infinite scroll is disabled by default, along with its  other associated properties.  In the source code, we can see that  the defaultViewConfig is being used in the ProductList module, which means  that these property values are assigned  by default in the product listing module.  Now let us get an understanding  of these properties before seeing them  in action in the demo.  As mentioned earlier, the defaultPageSize  property controls the number of products  listed per page.  The active property under infiniteScroll  determines whether or not  infinite scroll is enabled.  The productLimit property determines  the number of products the user can scroll  through before prompting for more items  via a Show More button.  In a storefront listing page, this is  the show more button we are referring to.   Clicking on it loads the next set of products.  When this property is configured, the “Show More” button will appear after displaying the number of products  configured via this property.  This value should be greater than  the “defaultPageSize” property, and if it is set  to 0 or empty, it becomes disabled.  The last property is showMoreButton.   If it is enabled, then a “Show More” button  appears after displaying  the number of products specified in the defaultPageSize property.   The productLimit property is ignored, in this case.  The productLimit property can be used when  we need more products to be listed during  scroll than the defaultPageSize number before displaying the “Show More” button.   Otherwise, the “Show More” property  can be enabled.  Let’s take a look at this in the following demo... This is a local instance of composable storefront.   As we can see, infinite scroll is disabled  by default and pagination is enabled.  Both the list view and grid view of a product  listing page show the use of pagination.  Now, we will override the default viewConfig  and enable infinite scroll.  To do this, we will use the provideConfig()  helper function and perform these changes in  SpartacusConfigurationModule.   This is the module where configurations  are generally maintained.  In this demo, we will change one property at a time and examine its impact on the listing  page, with respect to infinite scroll.  This is an empty ViewConfigContainer which  we will use to override the default properties.  This product listing page,  which we will use for our demo, lists 102  products, with pagination enabled.  Since the defaultPageSize is 12, we will see 12  products per page whether in list or grid view.  First, let us override  the defaultPageSize property.   For demo purposes, for easy visualization to the learners, we will assign  this property a value of 2. Now, when we refresh in the current pagination view, we can see 2 products out of 102 products listed on each page.  Next, we will enable infinite scroll.   This can be done by adding an infinite scroll  container within the viewConfig container.  After adding the container, we will  activate infinite scroll by setting the active  property to true.  As soon as we are done, the pagination view  switches to infinite scroll in the listing page.  As we can see, all the products get loaded  continuously as we scroll the page.  But most times, it is suboptimal to  enable infinite scroll for potentially  large lists of products.  When we open the Developer Tools network tab in the browser, we can see the search backend OCC API getting fired  regularly as the user scrolls the page.  We risk degradation of performance when a large list of products is rendered.  This can be mitigated via the productLimit  and showMoreButton properties.  First, let us try adding the productLimit  property to this view config.  It is generally preferable for it to be a multiple of defaultPageSize or, at least,  greater than defaultPageSize.  Let us try adding productLimit  with a value of 8.   We expect that 8 products will get loaded  into the scroll before being presented  with a Show More button.  In the storefront, we now see 8 products in  the scroll followed by a Show More button.  Clicking on the Show More button loads and  displays the next set of products, and so on.  This is how the productLimit property can help us control the number of products  available for the scroll.  The last property is showMoreButton.   When this property is added and enabled, we  find that the productLimit property is ignored.   Previously, 8 products got listed  before displaying a Show More button.   Now that we added this property, it went down  to 2, which is the value of defaultPageSize.  Enabling the “Show More” button renders the button based on the value of  defaultPageSize, which in this case is 2, and the productLimit property is ignored.  These are the key properties for configuring infinite scroll in composable storefront.  This concludes our coverage of Infinite Scroll.   There is more-detailed documentation about Infinite Scroll in the SAP help portal.   Do take a look and happy learning!