Build an Infinite Scroll List for OXID eShop – Implementation

In the previous part we have examined the step-by-step process of back-end implementation for the module serving the infinite scrolling list. We also added some code for the controller but it didn’t bring any clear-cut result at that moment.

This second part will help you finish the remaining tasks to achieve an infinite scrolling list. Let’s see how to work with the new template and JavaScript code to handle the logic of infinite scrolling. I will then show you the proper way of activating a new module, and will include some hints that will keep you away from unexpected issues.

Customizing the OXID locator bar

It feels pretty good to find out you only have to replace some blocks of the current template. Sometimes, you don’t get that lucky, and you need to have a whole template file replaced.

Please open the template /application/views/azure/tpl/page/list/list.tpl, copy its content and paste it into the new file /modules/aho_infinitescroll/views/page/list/aho_infinitescroll_list.tpl.

Open the file aho_infinitescroll_list.tpl, and search for the line containing the following code:

[{include file="widget/locator/listlocator.tpl" locator=$oView->getPageNavigationLimitedTop() attributes=$oView->getAttributes() listDisplayType=true itemsPerPage=true sort=true }] 

• locator=$oView->getPageNavigationLimitedTop() will display the traditional pagination that will no longer be necessary.


• listDisplayType=true lists out all available view options. We don’t need this either. The new module will use the view type defined in the module’s settings.


• itemsPerPage=true determines whether the user can select how many articles to display per page. In this tutorial, we also turn off this feature.


• sort=true controls the sorting conditions. We’ll leave this on.

Let’s examine the below figure to study the locator’s elements with their corresponding position:

---

---

Please replace the above line with the below line to drop unnecessary elements:

[{include file="widget/locator/listlocator.tpl" attributes=$oView->getAttributes() listDisplayType=false itemsPerPage=false sort=true }] 

We also look for and remove the following line to turn off the bottom locator:

[{include file="widget/locator/listlocator.tpl" locator=$oView->getPageNavigationLimitedBottom() place="bottom"}] 

Here is the result:

Continue reading %Build an Infinite Scroll List for OXID eShop – Implementation%

more