Build an Infinite Scroll List for OXID eShop – Basics

OXID eShop, officially known as OXID eSales, is a powerful and scalable ecommerce standard platform optimized for every segment of online business. As a developer spending most of my “9-to-5” tasks with OXID, I found out that this e-commerce system is extremely easy to customize and extend.

If you are new to OXID or are looking for a simple but effective platform for your own online business, I recommend you read Matthew Setter’s series on OXID eSales that came up with a standard implementation to get started with OXID system.

In this 2-part tutorial, we will create a new OXID module extension that implements infinite scrolling to the article list instead of traditional pagination. During this article, I attempt to share my personal experience that may help you speed up your working process if you encounter any OXID development later.

Here is what you will achieve. The entire source code will be available at the end of the series.

The tutorials will cover the following areas:

Part 1:

• Creating proper folder structure for new module extension.


• Working with metadata.php to:
  
  
  
  
  • Extend a necessary controller.
  
  
  • Replace the existing template with a new template.
  
  
  • Add a new module configuration option.
  
  
  
  


• How to work with back-end language files to create a display name and help text for the module’s settings.


• Work with the new module controller.

Part 2:

• Working with the new template:
  
  
  
  
  • How to properly get the module URL.
  
  
  • Recap to working with OXID template engine.
  
  
  • Adding content for the new template.
  
  
  
  


• Adding JavaScript to handle the execution of infinite scrolling on article list.


• Updating the database views and activating the module.

Note: I assume that you have some working experience with OXID eShop (if not, see Matthew’s article, linked above). Thus, there won’t be much explanation for basic concepts of OXID.

Folder Structure

The most important task you have to do first is to create a standard folder structure.

• Please go to {your_web_root}/oxid/modules/


• Create a new folder called aho_infinitescroll followed by its subsequent folders/files.

aho_infinitescroll/
|   
|--- controllers/
|       |-- aho_infinite_alist.php  # A new controller that extends alist.php
|
|--- out/
|   |--admin/
|       |--en/
|           |-- aho_infinitescroll_lang.php     # Back-end English text.
|       |--de/
|           |-- aho_infinitescroll_lang.php     # Back-end Deustch text.
|
|   |--css/
|        

Truncated by Planet PHP, read more at the original (another 3584 bytes)

more