为氧化ESHOP建立无限的滚动列表 - 基础知识

钥匙要点

>教程的第二部分将重点关注与新模板一起工作，包括如何正确获取模块URL，使用氧化模板引擎，为新模板添加内容，添加JavaScript来处理无限滚动的执行在文章列表中，更新数据库视图并激活模块。 该教程在氧化ESHOP上具有一些工作经验，并着重于开发新模块扩展的后端实现。下一部分将介绍有关基本前端实现的详细信息，该实现包括自定义模板，并添加JavaScript来处理无限滚动的工作流程。>
• 正式称为氧化ESALES的
> 是一个强大而可扩展的电子商务标准平台，可针对在线业务的每个部分进行优化。作为开发人员将我的大部分“ 9到5”任务与氧化物一起使用，我发现该电子商务系统非常容易自定义和扩展。
• 如果您是氧化的新手或正在为自己的在线业务寻找简单但有效的平台，我建议您阅读 Matthew Setter在氧化ESALES上的系列文章，该系列提出了标准实现以开始的标准实现使用氧化系统。

在这两个部分的教程中，我们将创建一个新的氧化模块扩展名，将无限滚动

实现到文章列表而不是传统分页。在本文中，我试图分享我的个人经验，如果您以后遇到任何氧化剂开发，可能会帮助您加快工作过程。 这是您将要实现的。

>

整个源代码将在系列结束时可用。

这些教程将涵盖以下领域：

第1部分：

• 为新模块扩展创建适当的文件夹结构。
• >使用metadata.php to：
  
  • 延长了必要的控制器。
  >用新模板替换现有模板。
  添加一个新的模块配置选项。
>
• >如何使用后端语言文件来创建显示名称并帮助模块设置的文本。
• 与新的模块控制器一起工作。

第2部分：

• 使用新模板：
  
  >
  • >如何正确获取模块URL。
  • 回顾一下使用氧化模板发动机。
  • 添加新模板的内容。
• >
添加JavaScript以处理文章列表中无限滚动的执行。
更新数据库视图并激活模块。

>

注意：我假设您有氧化eShop的一些工作经验（如果没有，请参见上面链接的Matthew的文章）。因此，对于氧化的基本概念，不会有太多解释。

>

氧化模块文件夹结构

您首先要做的最重要的任务是创建标准文件夹结构。

请转到{your_web_root}/氧化/模块/
• >
创建一个名为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.

>注意：

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

供应商名称 underscore 功能

• 即：sitepoint_infinitesCroll

>供应商名称可以用开发人员名称或组名称代替。取决于您。

>使用metadata.php

> metadata.php对于任何模块开发至关重要。该文件提供了有关模块，要扩展的类，要覆盖的块，要替换的模板的基本详细信息，前端和后端侧面的设置等等。

>

请打开文件元数据。

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

>
• 我们只是为新模块插入了基本信息，并且所有元素都以其术语为单位。

>
• 请注意，ID和标题是强制性变量。特别是，ID的值必须与模块的文件夹名称相同。

• >缩略图是一个可选的元素，可在视觉上描述您的模块。我通常会准备一个漂亮的缩略图，因为我相信一张图片值一千字。有时，您打算通过氧化市场出售一些您喜欢的自发模块，而设计更好的缩略图会吸引更多的买家。

接下来，我们将在电子邮件之后定义更多元素。

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.

• >

  该值扩展指定新模块将扩展的特定核心/控制器类。在这种情况下，它将是Alist.php，位于/氧化/application/。

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

• >注意：

  >

  命名新模板的正确方法是“

  模块名称
  • _旧模板名称” I.E：AHO_INFINITESCROLL_LIST.TPL

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

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

>

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

• >
值：此新设置有助于管理列表的视图类型。在本教程的范围内，我将默认值设置为
• line

  >并继续使用直到结束。 当我们首次激活模块时，将此设置插入两个表

  oxconfig
和>。氧化剂将自动插入值模块：AHO_INFINITESCROLL中

Oxmodule （Table Oxconfig）和 >您可以按照此扩展元数据的在线文档了解更多有关其他可能的参数的信息。> 接下来，我们查看后端翻译。

添加后端翻译 在上一节中，我们添加了新模块的设置。现在是时候进行翻译了。

请打开文件AHO_INFINITESCROLL/OUT/ADMIN/EN/AHO_INFINITESCROLL_LANG.PHPAND添加以下几行。

>

>语法要添加配置选项的翻译shop_module _ setter_column_name。

>语法要添加配置选项的帮助文本help_shop_module _ setting_colum_name。

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

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

>

• 请为文件AHO_INFINITESCROLL/OUT/ADMIN/DE/AHO_INFINITESCROLL_LANG.PHP执行相同的操作。用Value Deustch分配变量$ SLANGNAME，并让专门从事语言的人将所有文本转换为德语，或者只是将Gibberish放入其中，只要它与英语不同，以便您可以看到差异。

  >

  与新控制器一起工作

  请打开AHO_INFINITESCROLL/CONTRORTERS/AHO_INFINITE_ALIST.PHP，并在其中添加以下几行：

  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.

  这个新控制器只能做几件事：
  • 将$ _sthistemplate的值更改为aho_infinitescroll.tpl，我们在metadata.php中定义了该值：请注意，我们只需要在此处指定模板名称。因此，模板名称应该是唯一的。它可以帮助系统快速找到正确的模板。

  >
  • 函数渲染无能为力，但只是返回新的模板名称。
    > getViewTypelist函数将返回在gphp中定义的数据列的sinfinitesCrolllistType的值。模板AHO_INFINITESCROLL.TPL将利用此值来确定将用于文章列表的哪种视图类型。

  • 您可以注意，扩展类的名称是AHO_INFINITESCROLL_ALIST_PARENT。公式是模块控制器名称_父级。

  提示要找到必要的类以扩展

  • >您通常需要知道需要扩展哪些类。有一种简单的方法可以找出当前视图中哪个类正在运行。您只需浏览file/application/views/ {theme_name }/tpl/layout/page.tpl，然后在文件顶部插入以下行：
  >
  上面的行有助于打印当前视图中使用的核心类。如果您想检测执行AJAX请求的核心类，则需要更多的努力来使用Chromedev工具。
  结论
  • 到目前为止，我们已经逐步进行了后端实现，以开发新的模块扩展名。目前，我们能够激活模块，以查看管理仪表板中的内容。如果出现任何问题，请随时在此处发表评论。我将尽力帮助您。
  >
  下一部分将详细介绍基本前端实现，该实现包括自定义模板，并添加JavaScript来处理无限滚动的工作流程。

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

  经常询问有关在氧化eShop中构建无限卷轴列表的问题

  >在氧化eShop中使用无限滚动的目的是什么？内容。在氧化ESHOP的背景下，该技术可用于在用户向下滚动页面时连续显示产品，从而通过允许无缝导航和探索产品来改善用户体验。

  >无限滚动如何改善电子商务网站的性能？无需立即加载所有产品，这可以放慢站点的速度，而是无限滚动最初加载一定数量的产品，然后随着用户继续滚动而加载更多的产品。这不仅可以提高站点速度，还可以提高用户的参与度和保留率。

  >我如何使用PHP？

  Ajax调用和分页系统。您需要修改列表控制器和产品列表模板中的功能，以处理AJAX请求并更新产品列表。可以在文章中找到详细的步骤和代码段。

  >

  >是否存在在氧化eShop中使用无限滚动的潜在缺陷？适用于所有类型的电子商务网站。例如，如果您的网站有一个具有重要链接的页脚，则无限滚动可能会使用户难以与页脚联系。另外，对于想要导航到特定产品或页面的用户，无限卷轴有时会感到困惑。
  我可以在其他电子商务平台中使用无限滚动，除了氧化eShop？无限滚动可以在支持自定义编码的各种电子商务平台中实现。但是，实现过程可能会因平台的体系结构和编码语言而有所不同。建议参考特定平台的文档或向专业开发人员寻求帮助。
  >无限滚动如何影响seo？

  无限滚动可能会影响SEO，因为搜索引擎可能无法造成SEO通过AJAX正确爬网和索引内容。但是，可以通过为搜索引擎实现分页版本以及用于用户的无限滚动版本来缓解这种情况。

  是为电子商务网站推荐php吗？

  由于其灵活性，可扩展性和鲁棒性，因此对电子商务网站的流行选择。它支持各种数据库，并且与包括氧化ESHOP在内的各种电子商务平台兼容。但是，编程语言的选择应取决于您的特定要求和专业知识。
  无限滚动的替代方案是什么选择？分页涉及将内容分为单独的页面，而“加载更多”按钮允许用户手动加载更多内容。这些选项之间的选择取决于您的网站的设计和用户的喜好。

  >

  >如何自定义氧化eShop中无限卷轴的外观？您可以修改加载指示灯，产品列表和其他元素的样式，以匹配您的网站的设计。

  我可以禁用氧化eShop中某些页面的无限滚动吗？可以选择在氧化ESHOP中的某些页面上禁用无限滚动。这可以通过修改列表控制器和产品列表模板中的条件来完成。

以上是为氧化ESHOP建立无限的滚动列表 - 基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！