jquery - Opencart 3 网格系统 Undestand 类别网格视图

Question

我想以编程方式或通过操作更改产品网格视图系统...

从

<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-3 col-md-3 col-sm-6 col-xs-12"></div>

但是，我不清楚这些类是从哪里生成的。

据我所知，有两个文件需要修改：

category.twig
common.js

category.twig 代码：

 {% if column_left and column_right %}
    {% set class = 'col-md-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-md-8' %}
    {% else %}
    {% set class = 'col-md-10' %}
    {% endif %}

common.js 代码：

// Product Grid
$('#grid-view').click(function() {

    console.log("GRID CLICKED");
    // What a shame bootstrap does not take into account dynamically loaded columns
    var cols = $('#column-right, #column-left').length;

    if (cols == 2) {
        console.log("cols == 2");
        $('#pts-content .product-list').attr('class', 'product-layout product-grid col-lg-6 pts-col-md-6 pts-col-sm-12 col-xs-12');
    } else if (cols == 1) {
        console.log("cols == 1");
        $('#pts-content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 pts-col-sm-6 col-xs-12');
    } else {
        console.log("cols == else");
        $('#pts-content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 pts-col-sm-6 col-xs-12');
    }

    localStorage.setItem('display', 'grid');
});

当我单击网格按钮时，控制台输出为：

cols == 1

但是如果我在 col-lg-3 中发生了变化，col-lg-4 也会保留。

我也清理了缓存和修改的任何提示......

您能帮我理解如何将柱网从 lg-4 更改为 lg-3 吗？提前致谢

标签： jquerygridviewopencartopencart-3opencart-events