策略 - InfiniteScroll 不工作答案

【问题标题】：Strategery - InfiniteScroll Not Working策略 - InfiniteScroll 不工作
【发布时间】：2015-05-26 09:57:00
【问题描述】：

我想在我的 magento 网站中实现无限滚动，所以我安装了 Strategery - InfiniteScroll 扩展但它不起作用，首先我认为这是因为我仍然有分页，但即使在删除分页工具栏后它也不起作用。我删除了那些工具栏 div

<div class="toolbar-top">
    <?php echo $this->getToolbarHtml() ?>
</div>

从顶部和底部。你能帮我配置一下 Strategery - InfiniteScroll 扩展吗？

【问题讨论】：

您是否检查过控制台日志。是否存在错误？
是的，它是 Uncaught Error: Syntax error, unrecognized expression: listing":"
\r\n ....而且代码很大..
经过大量搜索后，我发现为了加载下一个项目，它需要 html 响应，但它得到的是 json 响应..
@MaX 你有解决这个问题的办法吗？
你能在这里分享一个网站链接吗？

标签： php magento infinite-scroll magento-1.9

【解决方案1】：

来自https://github.com/Strategery-Inc/Magento-InfiniteScroll/wiki/Installation-under-a-different-package---theme：

如果您将“infinitescroll”文件夹复制到您的 webroot 上，文件将在默认主题下结束。这在大多数情况下应该没问题安装，因为 Magento 在安装时会退回到默认主题可以在自定义主题中找到文件。本文的其余部分涵盖插件未从默认值正确加载的场景包/主题。

您应该做的第一件事是将它们移动到您正在使用的包/主题中使用，只是为了确保它们会被加载。

浏览存储库以查看文件所在的位置。 'app/design/frontend/default/default' 中的那些应该是移动到你的包/主题：'app/design/frontend/package/theme'。

访问以下网址：http://www.yourwebsite.com/infinitescroll2/js 并确保有一些 Javascript 正在打印。如果你得到一个 404 那么模块不是正确加载。如果它是空白的或者你得到一个异常，那么模块可能很难找到布局或模板文件。

一旦上述 URL 返回 javascript，请访问目录中的页面并查看其来源。确保您可以找到以下内容源中的字符串：“infinitescroll/js” - 它应该作为 SCRIPT 标记的 URL 的一部分。如果你找不到它，那么你有一个布局文件的兼容性问题（在存储库中是位于 app/design/frontend/default/default/layout/strategery-infinitescroll.xml）。

如果字符串存在，则插件已正确加载和配置。

最后，一旦您知道插件正在加载，您将不得不调整系统 -> 配置 -> 目录 -> 下的选项 Infinite Scroll 以便正确配置 InfiniteScroll 选项。您会发现两种类型的选择器。第一个是容器，默认称为“category-products”，它“包含”所有这几项。分类-产品

然后你会发现另一个名为“products-grid”的选择器是项目选择器。项目

这两个选择器是你必须在无限滚动中输入的选择器 Content和Items.category-products下的配置

下一个：下一个

您可以通过第二次点击屏幕并选择任何现代浏览器中的“检查元素”。

要使此扩展程序与任何主题一起使用，主题必须具有容器 div，如 category-products 和 item div 产品网格。

此外，主题必须激活寻呼机，否则扩展由于缺少一些选择器而无法工作。

有关如何配置选项的更多信息，请点击此链接： http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

或

如果问题没有解决，那么

安装后

在 layout.xml 中添加以下内容：

策略/无限滚动/init.phtml

从 app/design/frontend/base/default/template/strategery 路径复制到主题中的相同路径

从 skin/frontend/base/default/js/infinitescroll 路径复制到皮肤主题中的相同路径

确保 /js/jquery/infinitescroll 路径存在并且里面有四个 *.js 文件

配置插件：

始终在“包含 jQuery”字段上设置“是”

始终认为您的产品列表 div 类与内容字段中的相同。默认主题是“.category-products”类（点是首次登录类名）

始终在“隐藏工具栏”字段中设置“否”

当然，您应该刷新所有可能的缓存 :) 如果不工作 - 这样做：

在页面上手动设置网格模式，您可以在 url 中看到“mode=grid”。就是这样，伙计们:)

【讨论】：

第二点不起作用，但它仍然向我显示“恭喜，您已经到达互联网的尽头”所以我认为无限滚动已正确加载但无限滚动没有触发更多产品或不显示加载更多按钮

【解决方案2】：

由于某些扩展会以 JSON 格式而不是 HTML 格式修改系统的输出 - 我以这种方式解决了这个问题：在 JQuery-ias.js 中，第 340 行

return $.get(loadEvent.url, null, $.proxy(function(data) {
            $itemContainer = $(this.itemsContainerSelector, data).eq(0);
            if (0 === $itemContainer.length) {
                $itemContainer = $(data).filter(this.itemsContainerSelector).eq(0);
            }

            if ($itemContainer) {
                $itemContainer.find(this.itemSelector).each(function() {
                    items.push(this);
                });
            }

            self.fire('loaded', [data, items]);

            if (callback) {
                timeDiff = +new Date() - timeStart;
                if (timeDiff < delay) {
                    setTimeout(function() {
                        callback.call(self, data, items);
                    }, delay - timeDiff);
                } else {
                    callback.call(self, data, items);
                }
            }
        }, self), 'html');

我是这样改的：

return $.get(loadEvent.url, null, $.proxy(function(data) {
                data = data['maincontent']; // HERE TO CATCH THE RIGHT HTML CONTENT
                $itemContainer = $(this.itemsContainerSelector, data).eq(0);
                if (0 === $itemContainer.length) {
                    $itemContainer = $(data).filter(this.itemsContainerSelector).eq(0);
                }

                if ($itemContainer) {
                    $itemContainer.find(this.itemSelector).each(function() {
                        items.push(this);
                    });
                }

                self.fire('loaded', [data, items]);

                if (callback) {
                    timeDiff = +new Date() - timeStart;
                    if (timeDiff < delay) {
                        setTimeout(function() {
                            callback.call(self, data, items);
                        }, delay - timeDiff);
                    } else {
                        callback.call(self, data, items);
                    }
                }
            }, self), 'json'); // I've changed html by JSon

【讨论】：