I am starting with opencart 2.0.1 and using default theme. But I need add more products on a row, default I have 4 products in row at home / defautl page, I want change to 5. And in category, search,... I want 4 instead 3 as default. I tried resize image size, change css to make width of product smaller but nothing change. Can anyone help me? Thanks!
The 2.0 default template is responsive, so the wider or narrower your browser window or device screen, the more/less products will be shown on a row.
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
But I tried edit width of product css, I fixed to 250px or 200px instead 33.33333% but nothing change, have a space enough for another product on row, but it still break to another row.labeshops wrote:The 2.0 default template is responsive, so the wider or narrower your browser window or device screen, the more/less products will be shown on a row.
You can see images I attached below, before and after edited css width, I fixed width 210px, and make sure have enough space for another product, but it still 3 products per rows.
Attachments
after.PNG (180.39 KiB) Viewed 11877 times
before.PNG (185.24 KiB) Viewed 11877 times
Not impossible, but I have no clue how bootstrap css works, so you probably need to ask someone who does.
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
I asked some contact listed on opencart but they replied only that from opencart 2.0 and above, have to modify core files to ad/remove products per row. But they give me no clue about that!labeshops wrote:Not impossible, but I have no clue how bootstrap css works, so you probably need to ask someone who does.
Simply check the ../catalog/view/javascript/common.js and search for & play with:
Code: Select all
cols = $('#column-right, #column-left').length;Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.
I checked and replaced content when cols = 2 and 1 with class of cols = 0, product width resize smaller, but still no change number products per row. Can you have commercial support with this case?OSWorX wrote:Simply check the ../catalog/view/javascript/common.js and search for & play with:Code: Select all
cols = $('#column-right, #column-left').length;
Number of products in a row is set by style.
Example an module:
An template that displays column left and / or right also:
Bootstrap has differenty sections for all possible screen width.
lg = large screen
md = medium
sm = small
xs = very small
The numbers represent number off columns used.
The whole screen contains 12 columns.
3 columns for column-left and 3 for column-right, remaining columns for content.
When class coll-lg-3 is set, it means that the remaining space is divided in 4 parts.
If you want to display more products per row, lower the numbers.
Example:
Display 6 , 3 or 1 per row in a module
6 x 2 = 12
3 x 4 = 12
1 x 12 = 12
Display 6 product per row on product/category, edit common.js where grid view is set.
Example an module:
Code: Select all
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Code: Select all
<?php if ($column_left && $column_right) { ?>
<?php $class = 'col-sm-6'; ?>
<?php } elseif ($column_left || $column_right) { ?>
<?php $class = 'col-sm-9'; ?>
<?php } else { ?>
<?php $class = 'col-sm-12'; ?>
<?php } ?>
lg = large screen
md = medium
sm = small
xs = very small
The numbers represent number off columns used.
The whole screen contains 12 columns.
3 columns for column-left and 3 for column-right, remaining columns for content.
When class coll-lg-3 is set, it means that the remaining space is divided in 4 parts.
If you want to display more products per row, lower the numbers.
Example:
Display 6 , 3 or 1 per row in a module
Code: Select all
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">3 x 4 = 12
1 x 12 = 12
Display 6 product per row on product/category, edit common.js where grid view is set.
Code: Select all
if (cols == 2) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
} else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
} else {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
}
in common.js, I searched for
I replaced
with this
as you said: When class coll-lg-3 is set, it means that the remaining space is divided in 4 parts. So I decrease number, set col-lg-2, I think the remaining space is divided in 6 parts. And the truth, have space for 6 parts, but still have 3 parts per row. You can see the attachment below. ~~
Code: Select all
if (cols == 2) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
} else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
} else {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
}
Code: Select all
else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
}
Code: Select all
else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-2 col-md-2 col-sm-4 col-xs-12');
}
Attachments
after try this: col-lg-2 col-md-2 col-sm-4 col-xs-12 - after.PNG (396.46 KiB) Viewed 11815 times
before.PNG (386.33 KiB) Viewed 11815 times
Trying to do similar, get 3 products in a row instead of 4. I can't believe that something so simple that could be achieved easy with css has to no be controlled with js
to get 3 in a row I found
and replaces with
I then added
I now have 3 products in a row
Code: Select all
// Product Grid
jQuery('#grid-view').click(function() {
jQuery('#content_oc .product-layout > .clearfix').remove();
// What a shame bootstrap does not take into account dynamically loaded columns
cols = jQuery('#column-right, #column-left').length;
if (cols == 2) {
jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
} else if (cols == 1) {
jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
} else {
jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
}Code: Select all
// Product Grid
jQuery('#grid-view').click(function() {
jQuery('#content_oc .product-layout > .clearfix').remove();
// What a shame bootstrap does not take into account dynamically loaded columns
cols = jQuery('#column-right, #column-left').length;
if (cols == 2) {
jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
} else if (cols == 1) {
jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
} else {
jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
}Code: Select all
.clearfix {
display: none;
}you need to change the last line
'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
and add css of
.clearfix {display:none;}
'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
and add css of
.clearfix {display:none;}
Thanks for your reply, but I am trying to display 4 per row instead 3 as default, be cause product grid will be so big when have only 3 per row. Thanks you!
corrallforum wrote:to get 3 in a row I foundand replaces withCode: Select all
// Product Grid jQuery('#grid-view').click(function() { jQuery('#content_oc .product-layout > .clearfix').remove(); // What a shame bootstrap does not take into account dynamically loaded columns cols = jQuery('#column-right, #column-left').length; if (cols == 2) { jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12'); } else if (cols == 1) { jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12'); } else { jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12'); }
I then addedCode: Select all
// Product Grid jQuery('#grid-view').click(function() { jQuery('#content_oc .product-layout > .clearfix').remove(); // What a shame bootstrap does not take into account dynamically loaded columns cols = jQuery('#column-right, #column-left').length; if (cols == 2) { jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12'); } else if (cols == 1) { jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12'); } else { jQuery('#content_oc .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12'); }I now have 3 products in a rowCode: Select all
.clearfix { display: none; }
I too wanted three columns and tried the above solution by corrallforum . There seems to be a side-effect of the clearfix display: none part of the solution, though.
The three columns display perfectly but when proceeding to the checkout, the "continue" buttons on each step of the checkout aren't rendered.
So, let that be a warning to anyone else who is seeking three columns: check your checkout buttons.
I don't have a solution yet. It seems all the modern clearfix solutions don't result in three column displaying properly. The rows alternate between three and one products. eg
I'm thinking of rendering the checkout buttons with a special "clearfix2" style that doesn't do display:none....
Anyone got any ideas that aren't hacky?
This is in 2.0.2.0.
The three columns display perfectly but when proceeding to the checkout, the "continue" buttons on each step of the checkout aren't rendered.
So, let that be a warning to anyone else who is seeking three columns: check your checkout buttons.
I don't have a solution yet. It seems all the modern clearfix solutions don't result in three column displaying properly. The rows alternate between three and one products. eg
I'm thinking of rendering the checkout buttons with a special "clearfix2" style that doesn't do display:none....
Anyone got any ideas that aren't hacky?
This is in 2.0.2.0.
I had a similar grief and used flex to solve my problem. The nice part is that there won't be orphaned items on a next row.
Add this to the stylesheet.css
Change the 'row' class in category.tpl and/or module/featured.tpl - basically everywhere you need this
Remove the following from the else block in common.js
You might want to duplicate the default theme to a new folder and use this as your theme to prevent overwriting on updates.
Add this to the stylesheet.css
Code: Select all
.row.flex {
display: flex;
flex-flow: row wrap;
}
.product-layout {
flex: 1 1 0;
margin: 0 10px;
min-width: 265px; <!--change to your preferred min-width-->
}
Code: Select all
<div class="row">Code: Select all
<!--change to--><div class="row flex">
Code: Select all
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+ 
Thanks!
Bravo artcore, that works a treat. Thanks so much.
I did add one little bit to the css, a max-width setting to prevent the last row items from expanding to take the full width. It didn't look good on my site to have the final products stretched out so far.
There is a small problem with this solution, where the List view for the products is now messed up. I'll have to investigate this further, but when I remove the "flex" class using Chrome's inspector, the List view works fine.
If it ain't one thing, it's another!
I did add one little bit to the css, a max-width setting to prevent the last row items from expanding to take the full width. It didn't look good on my site to have the final products stretched out so far.
There is a small problem with this solution, where the List view for the products is now messed up. I'll have to investigate this further, but when I remove the "flex" class using Chrome's inspector, the List view works fine.
If it ain't one thing, it's another!
Who is online
Users browsing this forum: No registered users and 154 guests
