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