Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

...

Multiexcerpt
hiddentrue
MultiExcerptNameFeature Overview

Allow infinite scrolling to load extensive product list or vast categories instead of the user navigating through pages.



...

Excerpt

Entering a search term on a website can often yield return hundreds of results. For sites with an extensive a large product list or vast many categories, infinite scrolling (or endless scrolling) can be used to load products automatically as the user reaches the end of the page. This saves the user navigating through paging , and can provide provides a more seamless browsing experience.

From version 3.87+, infinite scrolling is available in BPD. This guide details its implementation.

Variations

 


Step-by-step

You can implement infinite scrolling with one of two ways: 

  1. Automatic load - as the user scrolls to the bottom of the page, the next batch of products is automatically loaded with no action required from the user.  
    Automatic LoadImage Removed  You can select to show a 'Loading more...' message.
    Image Added


  2. User-controlled load - when the user scrolls to the bottom of the page, a they can click the 'Show More Products' button appears. The user can choose to click for to view the next batch of products, or not
    User Clicks to LoadImage Removed

 

...

  1. Image Added



Step-by-step guide

To enable Infinite Scrolling:

...

  1. Login to In the CMS.Navigate to Content --> , go to ContentContent Standard Pages

  2. Select the Product List template.

  3. Locate the 'Product List Grid' widget and click 'Edit'.

  4. Tick the 'Toggle ON Use Infinite Scrolling?' option  option and click Infinite Scrolling to expand the options.
    Image RemovedImage Added 
  5. For Option 1, leave 'Enable Click To Show More' unticked.
  6. For Option 2, tick'Enable Click To Show More' and edit the button text if required. 
  7. Tick the 'Pre-Load Data' option if you wish to have data for additional products loaded in the background, before the page has been scrolled or the button has been clicked. 
  8. Click 'Save'.

 

Congratulations - Infinite Scrolling is now implemented!

 

  1. To set automatic or user-controlled scrolling, click the Infinite Scrolling tab.
    Image Added
  2. Set fields for the option you want.

    AutomaticValue

    Enable Click to Show More

    OFF

    Preload Data

    ON - all results will load in the background before page is in view

    OFF - results loads only when in view

    Infinite Scrolling Loading TextDisplays when more results are being loaded. Default: Loading more... 


    User-controlledValue

    Enable Click to Show More

    ON
    Click to Show More Products Button TextDefault: Show More Products 


  3. Click Save.


Additional Information


Multiexcerpt
MultiExcerptNameAdditional Info
-- 


Multiexcerpt
hiddentrue
MultiExcerptNameFeature Title

Infinite / Endless Scrolling

 


Minimum Version Requirements


Multiexcerpt
MultiExcerptNameMinimum Version Requirements
3.07


Prerequisites


Multiexcerpt
MultiExcerptNamePre reqs

--


Self Configurable


Multiexcerpt
MultiExcerptNameSelf Configurable

Yes


Business Function


Multiexcerpt
MultiExcerptNameBusiness Function

Site Structure


BPD Only?


Multiexcerpt
MultiExcerptNameBPD Only

yes


B2B/B2C/Both


Multiexcerpt
MultiExcerptNameB2B/B2C/Both

Both


Third Party Costs


Multiexcerpt
MultiExcerptNameThird Party Costs

n/a



Related help

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
showSpacefalse
reversetrue
typepage
cqllabel in ("how-to","cms") and type = "page" and space = "KB"
labelshow-to cms