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.
Attachments
after.PNG (180.39 KiB) Viewed 11876 times
before.PNG (185.24 KiB) Viewed 11876 times
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.
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;
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');
}
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 11814 times
before.PNG (386.33 KiB) Viewed 11814 times
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;
}
'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
and add css of
.clearfix {display:none;}
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; }
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.
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!
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!
Users browsing this forum: No registered users and 129 guests