Opencart Category - Product Layout Issue
I have a little problem with the layout of my products in a category view on the Opensart CMS platform.
I temporarily removed any css overrides I had to check that this is not 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 when enlarged.
Products should be aligned to 4 lines on a standard computer screen. They are currently "confused" randomly. This is a code snippet for a category view.
- category.tpl Spell here
-
nico_product.tpl Spell 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 site with my problem is HERE!
The website is running php 5.5.18 and OC 1.5.6.4
Screenshots of the problem:
source to share
Wrap col-sm-3
(in a group of four) in separate lines (divs with class row
)
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>
The following PHP code should work to create 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;
}
}
?>
source to share
The opencarts clearfix solution doesn't work as well as it does.
my solution was ...
in the /view/javascript/common.js directory
remove whatever needs to be done with a clear fix (after // adding a 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 says css if you are using sidebar layouts.
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 require some change / finishing depending on how many products you display for each screen size and number of sidebars.
Basically a page with 0 sidebars (.type0) collapses with 4 products per line to full screen (@media (min-width: 1200px)), stays at 4, then 2, then 1.
you can do the same for categories if you changed opencart to have category images
source to share
