在 Opencart 的类别视图中连续更改产品数量 2.x
Change number of products in a row on category view in Opencart 2.x
我现在在一家商店工作,我想在类别视图中连续显示 4 个产品,但我不知道如何解决这个问题。当我在浏览器中切换检查元素时,我看到了这段代码:
<div class="row">
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
<div class="clearfix visible-lg"></div>..</div>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
当我在这里从 col-lg-4 更改为 col-lg-3 时,我用 clearfix-visible 删除了 inbe,看起来我想要,但是当我在
中搜索时
catalog/view/theme/default/template/product/category.tpl
<div class="row">
<?php foreach ($products as $product) { ?>
<div class="product-layout product-list col-xs-12">
<div class="product-thumb">
但它指的是列表视图。我在哪里可以永久设置它?
所以我找到了解决方案:必须更改 catalog/view/javascript/common.js at // Product Grid:
// Product Grid
$('#grid-view').click(function() {
$('#content .product-layout > .clearfix').remove();
// What a shame bootstrap does not take into account dynamically loaded columns
cols = $('#column-right, #column-left').length;
if (cols == 2) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
} else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
} else {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
}
localStorage.setItem('display', 'grid');
});
还有 common.js 中的 clearfix:
// 添加清除修复
cols1 = $('#column-right, #column-left').length;
if (cols1 == 2) {
$('#content .product-layout:nth-child(2n+2)').after('<div class="clearfix visible-md visible-sm"></div>');
} else if (cols1 == 1) {
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix visible-lg"></div>'); /*3n+3*/
} else {
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
我现在在一家商店工作,我想在类别视图中连续显示 4 个产品,但我不知道如何解决这个问题。当我在浏览器中切换检查元素时,我看到了这段代码:
<div class="row">
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
<div class="clearfix visible-lg"></div>..</div>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">..</div>
当我在这里从 col-lg-4 更改为 col-lg-3 时,我用 clearfix-visible 删除了 inbe,看起来我想要,但是当我在
中搜索时catalog/view/theme/default/template/product/category.tpl
<div class="row">
<?php foreach ($products as $product) { ?>
<div class="product-layout product-list col-xs-12">
<div class="product-thumb">
但它指的是列表视图。我在哪里可以永久设置它?
所以我找到了解决方案:必须更改 catalog/view/javascript/common.js at // Product Grid:
// Product Grid
$('#grid-view').click(function() {
$('#content .product-layout > .clearfix').remove();
// What a shame bootstrap does not take into account dynamically loaded columns
cols = $('#column-right, #column-left').length;
if (cols == 2) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
} else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
} else {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
}
localStorage.setItem('display', 'grid');
});
还有 common.js 中的 clearfix:
// 添加清除修复 cols1 = $('#column-right, #column-left').length;
if (cols1 == 2) {
$('#content .product-layout:nth-child(2n+2)').after('<div class="clearfix visible-md visible-sm"></div>');
} else if (cols1 == 1) {
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix visible-lg"></div>'); /*3n+3*/
} else {
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');