战略- InfiniteScroll无效

Question

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

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

从上到下。您能帮我配置一下Strategery - InfiniteScroll扩展吗？

Answer 1

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

如果你在你的webroot上复制'infinitescroll‘文件夹，这些文件将在默认主题下结束。这在大多数安装中都是可以的，因为Magento可以在自定义主题中找到文件时返回到默认主题。本文的其余部分介绍了插件无法从默认包/主题中正确加载的场景。 您应该做的第一件事是将它们移动到您正在使用的包/主题，以确保它们将被加载。

1. 浏览存储库，查看文件的位置。在‘app/design/前端/默认’内部的那些应该移动到您的包/主题：‘app/design/前端/包/主题’。
2. 访问下面的url：http://www.yourwebsite.com/infinitescroll2/js，并确保打印了一些Javascript。如果您得到一个404，那么模块没有正确加载。如果它是空的，或者您得到了一个异常，那么该模块可能很难找到布局或模板文件。
3. 一旦上面的URL返回javascript，访问目录中的一个页面并查看其源。确保您可以在源中找到以下字符串："infinitescroll/js“-它应该作为脚本标记的URL的一部分存在。如果找不到它，那么就会遇到与布局文件(存储库中位于app/design/frontend/default/default/layout/strategery-infinitescroll.xml). )的兼容性问题。
4. 但是，如果字符串存在，则正确地加载和配置插件。
5. 最后，一旦您知道插件正在加载，您就必须调整System -> Configuration -> Catalog -> Infinite下的选项，以便正确配置InfiniteScroll选项。您将发现两种类型的选择器。第一个是容器，默认情况下称为“类别-产品”，它“包含”所有项目。类别-产品

然后，您将找到另一个名为"products-grid“的选择器，即项目选择器。项目

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

下一个:下一个

您可以通过在屏幕上进行第二次单击并在任何现代浏览器中选择“检查元素”来获得代码。

为了使这个扩展与任何主题一起工作，主题必须有一个容器div，比如分类产品，以及一个类似于products-grid的项目div。

此外，主题必须有寻呼机活动，否则扩展将无法工作，因为缺少一些选择器。

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

或

如果问题没有解决，那么

安装后

1. 在layout.xml中添加以下内容： 战略/无穷大/init.php
2. 从app/design/frontend/base/default/template/strategery路径复制到主题中的相同路径
3. 将皮肤/前端/基/默认/js/无穷长路径复制到皮肤主题中的相同路径
4. 确保/js/jquery/infinitescroll路径存在并在其中包含4个*.js文件
5. 配置插件：

- always set Yes on Include jQuery field
- always view that your product-list div class is same as in Content field. In default theme is ".category-products" class (with the dot is   a first sign in class name)
- always set No on Hide Toolbar field

​

1. 当然，您应该闪存所有可能的缓存:)如果不能工作-这样做：
2. 在页面设置网格模式下，您可以在url中看到"mode=grid“。就这样，伙计们:)

Answer 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