我想以编程方式或通过操作更改产品网格视图系统...
从
<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 吗?提前致谢