在Opencart 2.x的类别视图中连续更改产品数量 [英] Change number of products in a row on category view in Opencart 2.x

问题描述

我现在正在一家商店里工作，我想在类别视图中连续显示4种产品，但我不知道该如何解决.当我在浏览器中切换检查元素时，我看到以下代码:

I have a working on a shop right now, and i want to display 4 products in a row in category view, but i cant figure out, how to solve that. When i toggle inspect element in browser i see this code:

<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，看起来像我想要的，但是当我搜索

When here i change from col-lg-4 to col-lg-3, and i delete inbe with clearfix-visible, it looks like i want, but when i search in

目录/视图/主题/默认/模板/产品/category.tpl

  <div class="row">
        <?php foreach ($products as $product) { ?>
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">

但它指的是列表视图.我在哪里可以永久设置它?

but it refers to list view. Where can i setup this permamently?

推荐答案

所以我找到了解决方案:必须在//产品网格处更改商品目录/视图/javascript/common.js:

So i found the solution: must change 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:

And also clearfix in common.js:

//添加清除修订 cols1 = $('#column-right，#column-left').length;

// Adding the clear Fix 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>');

这篇关于在Opencart 2.x的类别视图中连续更改产品数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！