无限滚动不起作用
我想在我的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文件
配置插件:
你应该闪存所有可能的缓存:)如果不工作 - 做到这一点:
在页面上手动设置网格模式,你可以在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?