Post by vinhpk » Sat Mar 07, 2015 9:35 pm

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!

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by labeshops » Sat Mar 07, 2015 10:52 pm

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 from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by vinhpk » Sun Mar 08, 2015 4:30 pm

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

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by vinhpk » Sun Mar 08, 2015 4:48 pm

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

after.PNG (180.39 KiB) Viewed 10081 times

before.PNG

before.PNG (185.24 KiB) Viewed 10081 times


New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by vinhpk » Fri Mar 13, 2015 7:26 pm

Can anyone help me? Thanks!

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by vinhpk » Wed Mar 18, 2015 10:33 pm

So, change number products per row is impossible?

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by labeshops » Wed Mar 18, 2015 10:41 pm

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 from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by vinhpk » Wed Mar 18, 2015 11:59 pm

labeshops wrote:Not impossible, but I have no clue how bootstrap css works, so you probably need to ask someone who does.
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!

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by OSWorX » Thu Mar 19, 2015 12:23 am

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.


User avatar
Guru Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by vinhpk » Thu Mar 19, 2015 11:47 am

OSWorX wrote:Simply check the ../catalog/view/javascript/common.js and search for & play with:

Code: Select all

cols = $('#column-right, #column-left').length;
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?

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by pprmkr » Thu Mar 19, 2015 2:43 pm

Number of products in a row is set by style.

Example an module:

Code: Select all

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
An template that displays column left and / or right also:

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

Code: Select all

<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
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.

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

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by vinhpk » Thu Mar 19, 2015 4:40 pm

in common.js, I searched for

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

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

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

Attachments

after.PNG

after try this: col-lg-2 col-md-2 col-sm-4 col-xs-12 - after.PNG (396.46 KiB) Viewed 10019 times

before.PNG

before.PNG (386.33 KiB) Viewed 10019 times


New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by vinhpk » Thu Mar 26, 2015 6:20 pm

Does anyone have any idea?

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by corrallforum » Fri Mar 27, 2015 6:50 pm

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

Newbie

Posts

Joined
Fri Mar 27, 2015 6:49 pm

Post by corrallforum » Fri Mar 27, 2015 7:20 pm

to get 3 in a row I found

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

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

Code: Select all

.clearfix {
  display: none;
}
I now have 3 products in a row

Newbie

Posts

Joined
Fri Mar 27, 2015 6:49 pm

Post by corrallforum » Mon Mar 30, 2015 11:11 pm

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

Newbie

Posts

Joined
Fri Mar 27, 2015 6:49 pm

Post by vinhpk » Mon Apr 06, 2015 10:29 am

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 found

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

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

Code: Select all

.clearfix {
  display: none;
}
I now have 3 products in a row

New member

Posts

Joined
Sat Dec 29, 2012 12:13 pm

Post by mcpop » Sat Jun 20, 2015 3:24 pm

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

Image

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.

Newbie

Posts

Joined
Wed May 13, 2015 9:22 am

Post by artcore » Sat Jun 20, 2015 6:17 pm

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

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-->
}
Change the 'row' class in category.tpl and/or module/featured.tpl - basically everywhere you need this

Code: Select all

<div class="row">

Code: Select all

<!--change to--><div class="row flex">
Remove the following from the else block in common.js

Code: Select all

$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
You might want to duplicate the default theme to a new folder and use this as your theme to prevent overwriting on updates.

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+ ;D

Thanks!


User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by mcpop » Mon Jun 22, 2015 12:55 pm

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! :)

Newbie

Posts

Joined
Wed May 13, 2015 9:22 am
Who is online

Users browsing this forum: No registered users and 5 guests