dcom oxid_为OXID eShop建立无限滚动列表-实施

dcom oxid

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.

在上一部分中，我们检查了为infinite scrolling列表提供服务的模块的后端实现的逐步过程。 我们还为控制器添加了一些代码，但当时并没有带来任何明确的结果。

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.

第二部分将帮助您完成剩下的任务，以实现无限滚动列表。 让我们看看如何使用新模板和JavaScript代码来处理无限滚动的逻辑。 然后，我将向您展示激活新模块的正确方法，并将包括一些提示，这些提示将使您远离意外问题。

自定义OXID定位器栏 (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.

请打开模板/application/views/azure/tpl/page/list/list.tpl ，复制其内容并将其粘贴到新文件/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:

打开文件aho_infinitescroll_list.tpl ，然后搜索包含以下代码的行：

[{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.

  locator=$oView->getPageNavigationLimitedTop()将显示不再需要的传统分页。

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

  listDisplayType=true列出所有可用的视图选项。 我们也不需要这个。 新模块将使用模块设置中定义的视图类型。

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

  itemsPerPage=true决定用户是否可以选择每页显示多少篇文章。 在本教程中，我们还将关闭此功能。

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

  sort=true控制排序条件。 我们继续。

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:

结果如下：

实现无限滚动负载 (Implementing Infinite Scrolling Load)

1- Preparing the stylesheet

1-准备样式表

Open the file /modules/aho_infinitescroll/out/css/infiniteloading.css and paste the following code:

打开文件/modules/aho_infinitescroll/out/css/infiniteloading.css并粘贴以下代码：

.loader-container{
    border-top: 2px solid #EAEAEA;
    margin:20px 0;
    text-align: center;
    width:100%;
}
#loader-btn{
    border-radius: 3px;
    color:#FFF;
    cursor:pointer;
    padding:10px;
    margin:20px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
}
.endlist{
    background-color: #F5F5F5;
    color: #909090 !important;
    cursor: not-allowed !important;
}
#loader-icon{
    display:none;
}

2- HTML elements Reopen aho_infinitescroll_list.tpl. After the line of including the template locator.tpl, we put the following lines:

2- HTML元素重新打开aho_infinitescroll_list.tpl 。 在包含模板locator.tpl的行之后，我们添加了以下几行：

[{assign var="sModuleUrl" value=$oViewConf->getModuleUrl('aho_infinitescroll')}]
[{oxstyle include="`$sModuleUrl`out/css/infiniteloading.css"}]

<div id="newList"></div>

<div class="loader-container">
    <img src="[{$sModuleUrl}]out/img/ajax-loader.gif" border=0 id="loader-icon" />
    <button id="loader-btn" class="FXgradOrange">[{oxmultilang ident="BTN_LOAD_MORE"}]</button>
</div>

• The first line defines a variable to get the proper module’s URL. If you have several JavaScript or CSS files to include, this will be really useful. Please note that you should never add any raw URL for such files, they may fail to load due to different OXID versions.
  第一行定义一个变量，以获取正确的模块的URL。 如果要包含多个JavaScript或CSS文件，这将非常有用。 请注意，您永远不要为此类文件添加任何原始URL，因为它们可能会因OXID版本不同而无法加载。
• The second line will include a stylesheet for this module.
  第二行将包含此模块的样式表。
• The third line adds a div that will temporarily hold next-page loaded articles.
  第三行添加了一个div，它将临时保存下一页已加载的文章。
• The next block will create a wrapper with two subsequent elements: loader icon and button to trigger an Ajax request.
  下一个块将创建一个包含两个后续元素的包装器：加载程序图标和触发Ajax请求的按钮。

The result after applying CSS will be:

应用CSS后的结果将是：

---

---

---

---

3- Adding JavaScript code

3-添加JavaScript代码

Put the below JavaScript code into the opening aho_infinitescroll_list.tpl, just after div.loader-container

把下面JavaScript代码到开口aho_infinitescroll_list.tpl ，刚过div.loader-container

[{assign var="pages" value=$oView->getPageNavigationLimitedBottom() }]

[{capture assign="js_infiniteloading"}]
    $(document).ready(function(){
        var oBtn = $('#loader-btn');
        var oLoaderImg = $('#loader-icon');
        var oList = $('#productList');
        var oNewList = $('#newList');
        var iCurPgNr = parseInt("[{$pages->actPage}]");
        var iMaxPgNr = parseInt("[{$pages->NrOfPages}]");
        if(iCurPgNr == iMaxPgNr){
            oBtn.remove();
            return false;
        }
        var sUrl = "[{$pages->firstpage}]" ;
        var blFlag = true;
        oBtn.on('click', function(e){
            e.preventDefault();
            var iNextPgNr = iCurPgNr + 1;
            if(iNextPgNr <= iMaxPgNr ){
                oBtn.hide();
                oLoaderImg.show();
                blFlag = false;
                oNewList.load(sUrl + iNextPgNr +" #productList", function(response, status){
                    if(status == 'success'){
                        oList.append(oNewList.find('ul').html());
                        oNewList.html("");
                        iCurPgNr += 1;
                        if(iCurPgNr == iMaxPgNr){
                            oBtn.removeClass("FXgradOrange")
                                .addClass("endlist")
                                .text("[{oxmultilang ident="NO_MORE_ARTICLE"}]");
                        }else{
                            blFlag = true;
                        }
                        oBtn.show();
                        oLoaderImg.hide();
                    }
                });
            }else{
                oBtn.removeClass("FXgradOrange")
                    .addClass("endlist")
                    .text("[{oxmultilang ident="NO_MORE_ARTICLE"}]");
            }
        });
    });
[{/capture}]
[{oxscript add=$js_infiniteloading priority=12}]

• The first line defines an important template variable. It will fetch essential values such as total pages, current page, next page, first page, last page and URLs for each page returned. You can use [{$pages|var_dump}] to examine all values of $pages.

  第一行定义了一个重要的模板变量。 它将获取基本值，例如总页数，当前页，下一页，第一页，最后一页以及返回的每一页的URL。 您可以使用[{$pages|var_dump}]检查$pages所有值。

• The remaining code implements the logic of infinite loading with the below workflow.

  其余代码通过以下工作流程实现了无限加载的逻辑。

  • We will have an extra button to trigger the request to load articles of the next page.
    我们将有一个额外的按钮来触发请求以加载下一页的文章。
  • A hidden loading image toggles to prevent re-clicking.
    隐藏的加载图像会切换以防止再次单击。
  • New articles will be appended to the end of the list.
    新文章将添加到列表的末尾。
  • Every click of the button will repeat that process until there are no more articles to be loaded. At that moment, the button is disabled.
    每次单击按钮都会重复该过程，直到没有更多文章可以加载为止。 此时，该按钮被禁用。

4- Front-end translation

4-前端翻译

Please go to /modules/aho_infinitescroll/translations/. For bothen/aho_infinitescroll_lang.php and de/aho_infinitescroll_lang.php, we add the following:

请转到/modules/aho_infinitescroll/translations/ 。 对于en/aho_infinitescroll_lang.php和de/aho_infinitescroll_lang.php ，我们添加以下内容：

<?php
$sLangName = 'Deustch'; // 'English' for en file OR 'Deustch' for de file
        
$aLang = array(
    'charset' => 'UTF-8',
    'BTN_LOAD_MORE' => 'SHOW MORE PRODUCTS',
    'NO_MORE_ARTICLE' => 'NO MORE ARTICLE FOUND'
);

Please assign the correct value of variable $sLangName for each file. The name of the front-end language file always follows this formula:

请为每个文件分配变量$sLangName的正确值。 前端语言文件的名称始终遵循以下公式：

module folder name+ _ + lang.php

module folder name + _ + lang.php

激活模块 (Activating the module)

Activating the module usually seems totally effortless with a couple of clicks in the back-end. Sometimes, however, the module might not work for an unknown reason. If you encounter such a problem, please check the following steps:

只需在后端单击几下，激活模块通常似乎就毫不费力。 但是，有时该模块可能由于未知原因而无法工作。 如果遇到此类问题，请检查以下步骤：

• If you make any changes in metadata.php, you have to disable the module, then re-enable it.

  如果您对metadata.php进行了任何更改，则必须禁用该模块 ，然后重新启用它。

• If you have made any changes relating to the database, you have to update the database view. You can do it via Service > Tools > Update DB Views now.

  如果您进行了与数据库有关的任何更改，则必须更新数据库视图。 您可以通过服务 > 工具 >立即更新数据库视图来执行此操作。

• You have to clear the tmp folder after any changes.

  进行任何更改后，您必须清除tmp文件夹。

• You should always set proper permission mode for /log/EXCEPTION_LOG.txt to inspect the logs.

  您应该始终为/log/EXCEPTION_LOG.txt设置适当的权限模式以检查日志。

To help your testing to go well, you can go to the back-end and decrease the number of items per page. Go to Extensions > Themes > {Pick active theme} > Settings > Display, change the value as in the follwing figure:

为了使测试顺利进行，您可以转到后端并减少每页的项目数。 转到扩展 >主题> {选择活动主题} > 设置 > 显示 ，如下图所示更改值：

---

---

---

---

The above adjustment is just for OXID’s default data, which has few articles . If you already have a long-list of articles of your own data installed, that change is unnecessary.

上面的调整仅适用于OXID的默认数据，该文章很少。 如果您已经安装了自己的数据文章列表，则无需进行此更改。

进一步增强 (Further Enhancements)

There will be a variety of approaches to implement infinite scrolling for OXID eShop. We’ve attempted to bring you an essential implementation from back-end to front-end. There will be a lot of improvements that you can do for this module:

将有多种方法来实现OXID eShop的无限滚动。 我们试图为您提供从后端到前端的基本实现。 您可以为此模块做很多改进：

• Using a third party jQuery plugin to achieve infinite scrolling effect instead of using manual trigger. You can grab a good plugin from infinite-scroll.com by Paul Irish.

  使用第三方jQuery插件来实现无限滚动效果，而不是使用手动触发器。 您可以从Paul Irish的 infinite-scroll.com网站上获得一个好的插件。

• We have set the view option to line as default value. You can customize this to make it work for all view options.

  我们将view选项设置为line作为默认值。 您可以对其进行自定义，以使其适用于所有视图选项。

• Applying the SEO-friendly approach for your module. This article seems very helpful for reference.

  将SEO友好方法应用于您的模块。 本文似乎对参考很有帮助。

• Extending the functionality to the search page.

  将功能扩展到搜索页面。

结论 (Conclusion)

You can watch the final result on YouTube and download the code from GitHub.

您可以在YouTube上观看最终结果，并从GitHub下载代码 。

Despite the old-fashioned appearance of the back-end, OXID eShop is flexible enough to achieve as much functionality as other e-commerce systems. I hope this tutorial taught you something new, and that you may find out that OXID is a worthy option to consider for your next e-shop.

尽管后端具有老式外观，但是OXID eShop足够灵活，可以实现与其他电子商务系统一样多的功能。 我希望本教程可以教给您一些新知识，并且您可能会发现OXID是您下一个网上商店值得考虑的选择。

Please feel free to share your perspectives with me in the comments below!

请随时在下面的评论中与我分享您的观点！

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

dcom oxid