Opencart 类别 - 产品布局问题

Question

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

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

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

category.tpl Fiddle 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!

网站是运行php5.5.18和OC 1.5.6.4

问题截图：

Answer 1

将您的 col-sm-3（四人一组）包裹在单独的行中（带有 class 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

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

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

Answer 3

opencarts clearfix 解决方案不能正常工作。

我的解决方案是...

在catalog/view/javascript/common.js

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

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;
  }
}

这将需要一些 altering/finishing，具体取决于您为每种屏幕尺寸显示的产品数量和边栏数量..

基本上，具有 0 个侧边栏 (.type0) 的页面在全屏时从每行 4 个产品折叠（@media（最小宽度：1200 像素）），保持在 4 然后 2 然后 1。

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

Opencart 类别 - 产品布局问题

Opencart Category - Product Layout Issue

php

css

opencart