Post by mat7688 » Wed Nov 30, 2016 11:49 pm

Hey all,

Can anyone point me in the right direction of getting these product boxes to become the same height?
I messed with min-height but that changes ALL of the product boxes, so I'd have perfect sized ones in the reviews page, and way too big ones on the main page (see screenshot for reference).

So then I tried using PHP to detect the url, and resize the boxes accordingly (depending on the URL) but failed miserably. No idea why it wasn't working and I lost the code I was using.

The main issue here is the content in each box varies. So on a page like Customer Reviews, it looks sloppy because all of the boxes are different heights. Same with some of the products page (just not as bad).

I assume I have to modify this code but not sure what to change. This is the min-height I've been playing with.

Code: Select all

@media (min-width:767px){.product-list .product-thumb .image{float:left;padding:0 15px}}.product-thumb .caption{padding:0 20px;min-height:150px}.product-list .product-thumb .caption{margin-left:230px}
Thanks in advance.

Attachments

reviewspg.png

reviews page. all the boxes are different heights. - reviewspg.png (298.37 KiB) Viewed 1944 times

mainpg.png

main page. these boxes get huge if i modify the review boxes to 340px where I need them. - mainpg.png (289.12 KiB) Viewed 1944 times


Newbie

Posts

Joined
Thu Jan 17, 2013 12:19 pm

Post by artcore » Thu Dec 01, 2016 12:14 am

I solved this with javascript. You can this in the footer.tpl of your template:
I added a comment on the grid variable. Mine is set to 'caption' class of the product box but you can try other divs, classes etc...

Code: Select all

<script>var highest = 0;

		function sortNumber(a, b) {
			return a - b;
		}

		var maxHeight = function () {
			var heights = [],
				grid = $('.caption');//this is the part that changes in height. change to suit your needs

			grid.each(function () {
				$(this).css('height', 'auto');
				heights.push($(this).height());
				heights = heights.sort(sortNumber).reverse();
			});
			highest = heights[0];
			grid.each(function () {
				$(this).css('height', highest);
			});

		};
		$('#grid-view,#list-view').click(function () {
			maxHeight();
		});
		$(window).resize(maxHeight());</script>

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: I moved on to Laravel ;D

Thanks!


User avatar
Active Member

Posts

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

Post by mat7688 » Thu Dec 01, 2016 1:00 am

wow. I spent hours messing with this (I suck with code), THANK YOU. !!!!

Newbie

Posts

Joined
Thu Jan 17, 2013 12:19 pm

Post by artcore » Thu Dec 01, 2016 3:12 am

So did I ;D
Good this also solved it for you,
Cheers

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: I moved on to Laravel ;D

Thanks!


User avatar
Active Member

Posts

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

Post by korisnik » Sat Aug 05, 2017 11:26 pm

I need this,but i don't know to implement.
Where in footer.tpl,need to paste this code?
I use opencart 2.3.0.2

New member

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by artcore » Sun Aug 06, 2017 2:55 am

Just above </body></html> is usually the spot. Don't forget to include the <script> tags.
Clear the ocmod cache; Do some googling if you don't know how to do this.
Your footer should be at catalog/view/theme/default/template/common/footer.tpl

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: I moved on to Laravel ;D

Thanks!


User avatar
Active Member

Posts

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

Post by korisnik » Sun Aug 06, 2017 9:29 am

I did it...
Now all caption equals like smallest caption,is it possible opposite(all caption height like biggest caption height)?

New member

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by artcore » Sun Aug 06, 2017 3:20 pm

It already takes the highest height of a .caption element and applies it to others. You can also try other elements by looking at the html markup via browser developer tool (F12)

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: I moved on to Laravel ;D

Thanks!


User avatar
Active Member

Posts

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

Post by korisnik » Sat Aug 26, 2017 8:05 am

How to use multi classes in this code?

New member

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by artcore » Sat Aug 26, 2017 1:20 pm

Code: Select all

grid = $('.caption, .css-class2, .class-nth');

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: I moved on to Laravel ;D

Thanks!


User avatar
Active Member

Posts

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

Post by korisnik » Sat Aug 26, 2017 7:02 pm

Thanks.

New member

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by umutalparslan » Mon Dec 18, 2017 7:23 pm

Hello, The JS code I run from the Chrome Console does not work when I add it to header.twig or into custom.js. Can you help? I use to Bigshop Theme

Newbie

Posts

Joined
Mon Mar 20, 2017 5:25 pm
Who is online

Users browsing this forum: No registered users and 10 guests