Opencart 类别 - 产品布局问题

Question

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

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

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

• category.tpl Fiddle here!

• nico_product.tplFiddle here!

      $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>
  

我的问题的网站是HERE!

网站正在运行 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 解决方案的效果不是很好。

我的解决方案是……

在目录/视图/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 (min-width: 1200px)），停留在 4 然后 2 然后 1。

如果您已将 opencart 更改为具有类别图像，则可以对类别执行相同操作

Answer 3

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

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