无限滚动不起作用

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

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

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


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

如果您在webroot上复制'infinitescroll'文件夹,则文件将以默认主题结束。 在大多数安装中这应该是可以的,因为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)存在兼容性问题。

  • 如果字符串存在,然后插件被正确加载和配置。

  • 最后,一旦你知道插件正在被加载,你将不得不调整系统 - >配置 - >目录 - >无限滚动下的选项,以便正确配置InfiniteScroll选项。 你会发现两种类型的选择器。 第一个是容器,默认情况下称为“分类产品”,其中包含所有项目。 类别产品

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

    这两个选择器是您必须在Content和Items.category-产品下的Infinite Scroll配置中输入的选择器

    下一步:下一步

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

    对于这个扩展可以使用任何主题,主题必须有一个容器div,比如category-products和item-grid这样的item div。

    此外,该主题必须使寻呼机处于活动状态,否则,由于缺少某些选择器,该扩展程序无法工作。

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

    要么

    如果问题没有解决那么

    安装完成后

  • 在layout.xml中添加以下内容:

    strategery / infinitescroll / init.phtml

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

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

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

  • 配置插件:

  • 在包含jQuery字段中始终设置为是
  • 请始终查看您的product-list div类与“内容”字段中的相同。 默认主题是“.category-products”类(点是类名中的第一个符号)
  • 始终在隐藏工具栏上设置“否”
  • 你应该闪存所有可能的缓存:)如果不工作 - 做到这一点:

  • 在页面上手动设置网格模式,你可以在url中看到“mode = grid”。 那就是所有,伙计:)


  • 一些以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
    
    链接地址: http://www.djcxy.com/p/26471.html

    上一篇: InfiniteScroll Not Working

    下一篇: How do I prevent implicit template instantiations for a specific template?