Opencart类别 - 产品布局问题

Question

我在Opencart CMS平台的类别视图中对我的产品布局有些困难。

我暂时删除了我所有的css覆盖，以检查是不是问题的原因。 我使用在商店设置中设置的正确图像尺寸，如果它们被放大，它们都保持正确的宽高比。

产品将在标准计算机屏幕上以4行对齐。 目前他们是随机“混乱”。 这是与类别视图相关的代码的摘录。

• category.tpl 这里小提琴！

• nico_product.tpl 在这里小提琴！

    $category_page_products_row = nico_get_config('category_page_products_row'); if (empty($category_page_products_row)) $category_page_products_row = 3; include($nico_include_path . '/template/module/nico_product.tpl'); foreach ($products as $product) { ?> <div class="col-md-<?php echo $category_page_products_row;?>"> <?php nico_product($product);?> </div> <?php } ?> </div> 

我的问题网站就在这里！

该网站运行的是PHP 5.5.18和OC 1.5.6.4

问题截图：

Answer 1

将col-sm-3 （以四个为一组）包装在单独的行中（带有类row div）

标记应该看起来像

        <div class ="row">
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
        </div> 

        <div class ="row">
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
        </div> 

以下PHP代码应该可以生成这样的标记。

        $i = 0;
        foreach ($products as $product) {
          if ( $i == 0 ) {
            echo "<div class='row'>";
          }
        ?>
        <div class="col-md-<?php echo $category_page_products_row;?>">
            <?php nico_product($product);?>
        </div>
        <?php 
          $i++;
          if ( $i == 12/$category_page_products_row ) {
            echo "</div>";
            $i = 0;
          } 
        }
        ?>

Answer 2

opencarts clearfix解决方案不能很好地工作。

我的解决方案是......

在catalog / view / javascript / common.js中

删除所有与清除修复相关的内容（在//添加清除修复之后）并将其替换为

cols1 = $('#column-right, #column-left').length;

if (cols1 == 2) {
  $('#content .product-layout').parent('.row').addClass('type2');
} else if (cols1 == 1) {
  $('#content .product-layout').parent('.row').addClass('type1');
} else {
  $('#content .product-layout').parent('.row').addClass('type0');
}

这告诉css你是否使用带侧边栏的布局。

然后在stylesheet.css中添加

@media (max-width: 768px) {
  .product-layout:nth-of-type(1n+2) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .product-layout:nth-of-type(2n+3) {
    clear: left;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .type1 .product-layout:nth-of-type(3n+4) {
    clear: left;
  }
  .type0 .product-layout:nth-of-type(4n+5) {
    clear: left;
  }
}
@media (min-width: 1200px) {
  .type1 .product-layout:nth-of-type(3n+4) {
    clear: left;
  }
  .type0 .product-layout:nth-of-type(4n+5) {
    clear: left;
  }
}

根据您为每个屏幕尺寸和侧边栏数量显示的产品数量，这将需要一些更改/完成。

基本上，带有0个侧边栏（.type0）的页面在全屏幕上每行4个产品折叠（@media（最小宽度：1200px）），保持在4然后是2然后是1。

如果您更改了opencart以获得类别图像，则可以对类别执行相同操作

Answer 3

要解决此问题，您可以创建自定义类并将其添加到<div class="col-sm-3 custom-width">它将修复所有对齐问题请检查屏幕截图

.custom-width {
width: 20% !important;}