Opencart Category - Product Layout Issue

Question

I am having a slight difficulty with the layout of my products in category view on the Opencart CMS platform.

I have temporarily deleted all of the css overrides I had in place to check that wasn't the cause of the problem. I am using the correct image sizes set in the store settings and they all maintain the correct aspect ratio if they are enlarged.

The products are to be aligned in rows of 4 on a standard computer screen. Currently they are randomly 'muddled'. This is the excerpt of code relating to the category view.

• category.tpl Fiddle here!

• nico_product.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> 

The website with my issue is HERE!

The website is running php 5.5.18 and OC 1.5.6.4

Screenshots of the issue:

Answer 1

Wrap your col-sm-3 (in group of four) in separate rows (divs with class row )

markup should look like

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

Following PHP code should work to generate such markup.

        $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 solution doesn't work very well as is.

my solution was...

in catalog/view/javascript/common.js

remove everything to do with clear fix (after // Adding the clear Fix) and replace it with

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

this tells css if your using layouts with sidebars.

then in stylesheet.css add

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

this will need some altering/finishing depending on how many products you show for each screen size and number of sidebars..

Basically a page with 0 sidebars (.type0) collapses from 4 products per row at full screen (@media (min-width: 1200px)), stays at 4 then 2 then 1.

you can do the same for categories if you have altered opencart to have category images

Answer 3

To fix this issue you can create a custom class and add it to <div class="col-sm-3 custom-width"> it will fix all alignment issue Please check the screenshot

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