A full-stack web developer and freelance writer. At the moment, he plays the role of a Technical Lead for the PHP department at Tanner Vietnam, which provides a web-shop solution for European clients with the OXID eSales system; he is also passionate about developing Chrome Extensions and Chrome Apps. The rest of his time is for freelance writing.

Anh's articles

  1. Build an Infinite Scroll List for OXID eShop – Implementation

    This entry is part 2 of 2 in the series Extending OXID eShop

    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:

    "locator noted"

    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:

    "final Locator bar"

  2. Build an Infinite Scroll List for OXID eShop – Basics

    This entry is part 1 of 2 in the series Extending OXID eShop

    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.
    |--- 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/
    |       |--> infinitescroll.css     # Style for infinite scrolling elements.
    |   |--img/
    |       |--> ajax-loader.gif     # image indicates the loading status.
    |   |--js/
    |--- translations/
    |       |--de/
    |           |--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
    |       |--en/ 
    |           |--> aho_infinitescroll_lang.php  # Front-end English text.
    |--- views/
    |       |-- page/
    |           |-- list/
    |               |--> aho_infinitescroll_list.tpl  # new template file.
    |--- metadata.php  # Define extension name, classes and other infos. 
    |--- picture.jpg   # A thumbnail for the module's functionality.