dcom oxid_为OXID eShop建立无限滚动列表-基础知识

dcom oxid

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.

OXID eShop ，正式称为OXID eSales ，是一个功能强大且可扩展的电子商务标准平台，已针对在线业务的每个细分市场进行了优化。 当开发人员将大部分的“ 9至5”任务与OXID一起使用时，我发现此电子商务系统非常易于定制和扩展。

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.

如果您不熟悉OXID，或者正在为自己的在线业务寻找一个简单而有效的平台，建议您阅读Matthew Setter撰写的有关OXID eSales的系列，该系列提供了标准实现，以开始使用OXID系统。

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.

在这个分为两部分的教程中，我们将创建一个新的OXID模块扩展，该扩展实现无限滚动到文章列表，而不是传统的分页。 在本文中，我尝试分享我的个人经验，如果以后遇到任何OXID开发，可能会帮助您加快工作流程。

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:

第1部分：

• Creating proper folder structure for new module extension.
  为新的模块扩展创建正确的文件夹结构。

• Working with metadata.php to:

  使用metadata.php可以：

  • Extend a necessary controller.
    扩展必要的控制器。
  • Replace the existing template with a new template.
    用新模板替换现有模板。
  • Add a new module configuration option.
    添加新的模块配置选项。

  Working with metadata.php to:

  使用metadata.php可以：

• 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:

第2部分：

• Working with the new template:

  使用新模板：

  • How to properly get the module URL.
    如何正确获取模块URL。
  • Recap to working with OXID template engine.
    回顾一下使用OXID模板引擎。
  • Adding content for the new template.
    为新模板添加内容。
• Adding JavaScript to handle the execution of infinite scrolling on article list.
  添加JavaScript以处理文章列表上无限滚动的执行。
• 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.

注意 ：我假设您具有OXID eShop的一些工作经验 (如果没有，请参阅上面链接的Matthew的文章)。 因此，对于OXID的基本概念没有太多解释。

OXID模块文件夹结构 (OXID Module 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/
  请转到{your_web_root} / oxid / modules /

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

  创建一个名为aho_infinitescroll的新文件夹，然后创建其后续文件夹/文件。

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/
|		|--> 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.

NOTE: The best practice of naming a new module is to combine the name of vendor/developer/group and the module’s functionality. It helps to reveal instantly the vendor and functionality of the new module for team collaboration. Thus, the formula can be as follows:

注意：命名新模块的最佳做法是将供应商/开发人员/组的名称与模块的功能结合在一起。 它有助于即时揭示用于团队协作的新模块的供应商和功能。 因此，公式可以如下：

vendor name + underscore + functionality

供应商名称 + 下划线 + 功能

• i.e: sitepoint_infinitescroll
  即：sitepoint_infinitescroll

Vendor name can be replaced by either developer name or group name. It’s up to you.

供应商名称可以替换为developer name或group name 。 由你决定。

使用Metadata.php (Working with Metadata.php)

Metadata.php is essential to any module development. That file provides basic details about module, classes to be extended, blocks to be overidden, templates to be replaced, settings for both front-end and back-end sides, etc.

Metadata.php对于任何模块开发都是必不可少的。 该文件提供有关模块，要扩展的类，要覆盖的块，要替换的模板，前端和后端侧的设置等的基本详细信息。

Please open the file metadata.php and add the following lines of code into it:

请打开文件metadata.php并在其中添加以下代码行：

<?php

$sMetadataVersion = '1.0';  # Define version of this file

// An array to store modules' details
$aModule = array
(
    'id' => 'aho_infinitescroll',
    'title' => '[AHO] Infinite Scrolling List', 
    'description' => 'Infinite Scrolling for article list',
    'thumbnail' => 'picture.jpg',
    'version' => '1.0.0',
    'author' => 'Tuan Anh Ho',
    'url' => '',
    'email' => 'anhhothai@gmail.com'
);

• We’ve just inserted basic information for our new module, and all elements are self-descriptive by their terms.

  我们刚刚为新模块插入了基本信息，并且所有元素均按其术语进行自我描述。

• Please note that the id and title are mandatory variables. Especially, the value of id has to be the same as the module’s folder name.

  请注意， id和title是必需变量。 特别是， id的值必须与模块的文件夹名称相同。

• thumbnail is an optional element that describes your module visually. I usually prepare a good-looking thumbnail because I believe that a picture is worth a thousand words. Sometimes, you intend to sell some of your favourite self-developed modules via OXID market, and a better designed thumbnail entices more buyers.

  thumbnail是一个可选元素，以可视方式描述您的模块。 我通常会准备一个漂亮的缩略图，因为我认为一张图片值得一千个字。 有时，您打算通过OXID市场出售一些您喜欢的自行开发的模块，而更好的设计缩略图会吸引更多的购买者。

Next, we’re going to define some more elements, right after email.

接下来，我们将在email之后定义更多元素。

'extend' => array(
        'alist' => 'aho_infinitescroll/controllers/aho_infinitescroll_alist'
    ),
    'templates' => array(
        'aho_infinitescroll_list.tpl' 
            => 'aho_infinitescroll/views/page/list/aho_infinitescroll_list.tpl'
    )

• The value extend specifies a particular core/controller class from which the new module will extend. In this case, it will be alist.php, located at /oxid/application/controllers/.

  extend值指定一个新的模块将从其extend的特定核心/控制器类。 在这种情况下，它将是alist.php ，位于/oxid/application/controllers/ alist.php /oxid/application/controllers/ 。

• The value templates is an array, which stores all registered templates of the new module. It’s recommended we create the same folder structure of the template to be replaced, for easy team collaboration. Please note that both items and values of templates need to include the file name extension .tpl

  值templates是一个数组，用于存储新模块的所有已注册模板。 建议我们创建与要替换的模板相同的文件夹结构，以方便团队协作。 请注意， templates项目和值都必须包含文件扩展名.tpl

  NOTE:

  注意 ：

  • module namemodule name_ + _ + the old template name”the old template name ”
  • i.e: aho_infinitescroll_list.tpl
    即：aho_infinitescroll_list.tpl

We leave the new template file empty at the moment and continue with the file metadata.php. Please insert an array called settings just after the item templates:

目前，我们将新模板文件留空，并继续使用metadata.php文件。 请在项目templates之后插入一个名为settings的数组：

'settings' => array(
    array(
        'group' => 'aho_infinitescroll',
        'name' => 'sInfiniteScrollListType',
        'type' => 'str',
        'value' => 'line'
    )
)

• The value settings is a place to register all configuration options of a new module. group always has the value identical to the module’s id.

  值settings是注册新模块的所有配置选项的地方。 group的值始终与模块的ID相同。

• Value: this new setting helps to manage the view type of list. In the scope of this tutorial, I will set the default value as line and keep using it till the end.

  值：此新设置有助于管理列表的视图类型。 在本教程的范围内，我将默认值设置为line并一直使用到最后。

• As we activate the module for the first time, this setting is inserted into two tables oxconfig and oxconfigdisplay. OXID will automatically insert the value module:aho_infinitescroll into columns OXMODULE (table oxconfig) and OXCFGMODULE (table oxconfigdisplay) with the value module:aho_infinitescroll. This is very handy as it happens automatically.

  当我们第一次激活模块时，此设置被插入到两个表oxconfig和oxconfigdisplay 。 OXID会自动将值module:aho_infinitescroll成列OXMODULE (表oxconfig )和OXCFGMODULE (表oxconfigdisplay)值为module:aho_infinitescroll 。 这非常方便，因为它会自动发生。

You can follow this online document of extension metadata to read more about other possible arguments.

您可以按照此扩展元数据在线文档来阅读有关其他可能参数的更多信息。

Next, we look into the back-end translations.

接下来，我们研究后端翻译。

添加后端翻译 (Adding Back-end Translations)

In the last section, we added the settings for the new module. Now it’s time to work with its translation. Please open the file aho_infinitescroll/out/admin/en/aho_infinitescroll_lang.phpand add the following lines in it.

在上一节中，我们添加了新模块的设置。 现在是时候进行翻译了。 请打开文件aho_infinitescroll/out/admin/en/aho_infinitescroll_lang.php并在其中添加以下几行。

<?php
$sLangName = 'English'; // English or Deustch
        
$aLang = array(
    'charset' => 'UTF-8',
    'SHOP_MODULE_GROUP_aho_infinitescroll' => 'Settings', 
    
    'SHOP_MODULE_sInfiniteScrollListType' => 'Select the type of list that will be applied for infinite scrolling.',
    
    'HELP_SHOP_MODULE_sInfiniteScrollListType' => 'OXID supports 3 default view types as `line`,`grid` and  `infogrid`. If you define an extra view type, make sure it has been created in your shop directory.'
);

• Syntax to add translation for a configuration option SHOP_MODULE + _ + setting_column_name.

  为配置选项SHOP_MODULE + _ + setting_column_name添加翻译的语法。

• Syntax to add the help text for a configuration option HELP_SHOP_MODULE + _ + setting_colum_name.

  为配置选项HELP_SHOP_MODULE + _ + setting_colum_name添加帮助文本的语法。

The above lines of codes will result in output as in the figure below. Later, when you activate the module, please enter line into the text box:

上面的代码行将导致输出，如下图所示。 稍后，当您激活模块时，请在文本框中输入line ：

---

---

---

---

Please do the same for the file aho_infinitescroll/out/admin/de/aho_infinitescroll_lang.php. Assign the variable $sLangName with value Deustch and have someone specializing in language translate all the text into German, or just put gibberish in there, as long as it’s different from English so you can see the difference.

请对文件aho_infinitescroll/out/admin/de/aho_infinitescroll_lang.php执行相同的操作。 给变量$sLangName赋值Deustch ，让专业语言的人将所有文本翻译成德语，或者在其中放些乱七八糟的东西，只要它与英语不同即可，以便您能看到差异。

使用新控制器 (Working with the new controller)

Please open aho_infinitescroll/controllers/aho_infinite_alist.php and add the following lines in it:

请打开aho_infinitescroll/controllers/aho_infinite_alist.php并在其中添加以下几行：

<?php

class aho_infinitescroll_alist extends aho_infinitescroll_alist_parent 
{
    protected $_sThisTemplate = 'aho_infinitescroll_list.tpl';
    
    /**
     * @Todo: Change the template view
     * @return string
     */
    public function render(){
        parent::render();
        return $this->_sThisTemplate;
    }

    /** @Todo: Get the module option of view type 
     *  @return string
     */
    public function getViewTypeList(){
        return $this->getConfig()->getConfigParam('sInfiniteScrollListType');
    }
}

This new controller does just a few things:

这个新的控制器只做几件事：

• Change the value of $_sThisTemplate to aho_infinitescroll.tpl, which we have defined in metadata.php: Please note that we only need to specify the template name here. Thus, template name should be unique. It helps the system find the correct template quickly.

  将$_sThisTemplate的值更改为aho_infinitescroll.tpl ，该值已在metadata.php定义：请注意，我们只需要在此处指定模板名称即可。 因此，模板名称应该是唯一的。 它有助于系统快速找到正确的模板。

• The function render does nothing but just returns the new template name.

  函数render不执行任何操作，仅返回新的模板名称。

• The function getViewTypeList will return value of data column sInfiniteScrollListType that is defined in metadata.php. The template aho_infinitescroll.tpl will make use of this value to determine which view type will be applied for the article list.

  函数getViewTypeList将返回在metadata.php定义的数据列sInfiniteScrollListType值。 模板aho_infinitescroll.tpl将使用此值来确定将哪种视图类型应用于文章列表。

• You can note that the name of the extended class is aho_infinitescroll_alist_parent. The formula is module controller name + _ + parent.

  您可以注意到扩展类的名称是aho_infinitescroll_alist_parent 。 公式为module controller name + _ + parent 。

找到必要的扩展类的提示 (Tips to find the necessary class to extend)

• You usually need to know which classes need to be extended. There is an easy way to find out which class is running in the current view. You just browse the file /application/views/{theme_name}/tpl/layout/page.tpl and insert the following line in the top of the file:

  您通常需要知道哪些类需要扩展。 有一种简单的方法可以找出当前视图中正在运行的类。 您只需浏览文件/application/views/{theme_name}/tpl/layout/page.tpl并将以下行插入文件顶部：

[{$oViewConf->getActiveClassName()}]

The above line helps print out which core class is used in the current view. If you want to detect the core class that performs Ajax requests, you will need a little more effort working with ChromeDev Tools.

上一行有助于打印出当前视图中使用的核心类。 如果您想检测执行Ajax请求的核心类，则需要花费更多的精力来使用ChromeDev Tools 。

结论 (Conclusion)

So far, we’ve gone through the step-by-step back-end implementation to develop a new module extension. At the moment, we are able to activate the module to see what we will have in the administration dashboard. If any issues come up, please feel free to leave your comment here. I’m going to do my best to help you out.

到目前为止，我们已经逐步完成了后端实现，以开发新的模块扩展。 目前，我们能够激活该模块以查看管理仪表板中将包含的内容。 如果有任何问题，请随时在此处发表您的评论。 我将尽力帮助您。

The next part will go into details about essential front-end implementation, which consists of customizing the template, and adding JavaScript to handle workflow for infinite scrolling.

下一部分将详细介绍基本的前端实现，其中包括自定义模板，并添加JavaScript以处理无限滚动的工作流。

翻译自: https://www.sitepoint.com/build-infinite-scroll-list-oxid-eshop-basics/

dcom oxid