Equal height fix for bootstrap

[Jack_mcs]

The following should fix the equal height issue in the Bootstrap version. I haven't tested it thoroughly but it seems to be working in the tests I've done. To apply the change, in the includes/modules/product_listing.php file, find

<?php
  if ($messageStack->size('product_action') > 0) {

and place the following above it

<<script type="text/javascript">
$(document).ready(function(){
  var elements = document.getElementsByClassName('equal-height');
  var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
 });
 var maxHeight = Math.max.apply(null, elementHeights);
 Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
 });
});
</script>

And in includes/modules/new_products.php, find

<?php
  if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {

and place the above code above it. This needs to be done for each module that needs the fix. Ideally, the code should be made global so only one instance is needed.

[♥14steve14]

@@Jack_mcs

 

Shouldnt that code be added to, or amended in the headertags module in the ht_div_equal_heights.php file. Seems silly to add more code and change the core files, when something may be there already. Just out of curiosity have you turned that particular module on.

 

Or have I got this totally wrong and what ever the error you are talking about is something totally unrelated.

[Jack_mcs]

Yes, that's why I said it should be made global.

[burt]

@@Jack_mcs

What does this code do that the core code does not?

[Jack_mcs]

If images are not square, the products are not listed correctly in some cases. So, for example, there may be three products in the first row, one in the second row and then another three in the third one. The reason it does that is because the product boxes are not the same height. If the size of the main div for each box (where the equal height class is used) is set to some high number, the problem goes away. The equal height class should handle that but it doesn't for some reason. This code checks the height of each box after they are loaded and then sets the height for each to the maximum height. I've only tested it in a couple of sites but it fixed the problem in both.

[burt]

That is exactly what the core code does.

Try turning on the module....and testing.

[Jack_mcs]

It's what the core code should do but doesn't always. There are a number of posts here about this issue. The accepted fix was to convert all of the images to square dimensions but that is not practical for some sites.

[burt]

I'd like you look again...

If 1 image is deeper than the rest, eg "speed", here:



this will knock out boxes that come after it.

It is this reason why shopowners should create square thumbnails.

If people don't want to create square thumbnails, they turn on the equal heights module which forces boxes to the height of the tallest box;



----

What we do not want to see now, or in the future, is tips like this.  You could have made this into a Header Tag Module and uploaded to the addons area.  Shopowner then (if he the core one installed and does not like it) turns it off...downloads yours, uploads it, goes into admin and turns it on. 

 

[Jack_mcs]

Yes, I could do a lot of things but don't have the time. This is a long-standing problem and I provided a fix. What anyone does with it is up to them. But not posting fixes because it doesn't fit in with how the code is designed is simply ridiculous, in my opinion. 

[burt]

LOL, ok.  Poor advice.

 

Shopowners;

if you have to use this code to fix a non-problem, don't change the core file as you make your life harder when it comes to updating and our life harder when it comes to providing fixes/changes.