[Addon] New Equal Height Module for osC 2.3.4 bootstrap

[auzStar]

Support thread for the "New Equal Height Module for osC 2.3.4 bootstrap" add-on.

(Header Tag Module)

 

Report problems here.

 

Feedback and comments appreciated.

 

Download link:

http://addons.oscommerce.com/info/9505

 

------------------------------------------------------------------------------

This add-on corrects grid and list resizing issues when switching between grid view and list view, and when resizing window. It's compatible with the latest BS EDGE version which has recently had jQuery updated to version 3.1.0.

 

Use this new add-on to replace the current "Equal Height Divs (jQuery)" header tag module.

 

------------------------------------------------------------------------------

Demo:

https://www.auzcommerce.com.au/osc234bs_test_sec/products_new.php

 

cheers

Edited September 27, 2016 by auzStar

[ecommunlimited]

Hello,

I've just installed this and I'm getting an error you can see below. I'm running v2.3.4 BS Responsive, PHP 7.0.9 (Zend: 3.0.0) and MySQL 5.6.29. When I went to Modules - Header Tags - Install Module and tried to install the New Equal Height Divs (jQuery), I got the error. I uninstalled the old one first and then re-installed, I've tried PHP versions all the way back to 5.3 to no avail. I'd appreciate a little help, thank you.

 

Fatal error: Cannot redeclare ht_div_equal_heights_show_pages() (previously declared in /home/ecommu5/public_html/includes/modules/header_tags/ht_div_equal_heights.php:139) in /home/ecommu5/public_html/includes/modules/header_tags/ht_div_equal_heights1.php on line 86

[auzStar]

@@ecommunlimited

 

Seems like you may have 2 instances of the module loaded. Uninstall the module making sure there are no "Equal Height Divs (jQuery)" installed, even go as far as checking the database configuration table ensuring there are no entries with MODULE_HEADER_TAGS_DIV_EQUAL_HEIGHTS_*, delete if there are any. Also, try renaming original files as "ht_div_equal_heights.php.orig" not as "ht_div_equal_heights1.php". Try re-installing the new add-on on supported PHP version (the original module should be removed first and not used).

 

As far as PHP 7 is concerned I'm not supporting those installations. I don't think stock standard osC 234BS is completely PHP 7 ready.

 

cheers

[ecommunlimited]

Thank you, your brilliant. Renaming the original files to ht_div_equal_heights.php.orig worked. The first I renamed it to ht_div_equal_heights1.php. Thanks again.

 

Wish you the best,

Bill

[piernas]

It works nicely, but the store where I've installed has some modifications (mainly to align the text in boxes) and I can't find the difference in practice. What exactly does this new module compared to the stock one?

[auzStar]

@@piernas

It works nicely, but the store where I've installed has some modifications (mainly to align the text in boxes) and I can't find the difference in practice. What exactly does this new module compared to the stock one?

 

It re-adjusts the height of the grid boxes to equal height (and list boxes to auto height) when switching between grid view and list view, and also re-adjusts if you resize windows on desktop. Otherwise heights are not automatically re-adjusted.

 

It resets the height to auto in list view since equal height is not required in list view, thus removing unnecessary white space in list boxes.

 

This is much cleaner in my opinion.

 

cheers

[piernas]

@@auzStar thanks for the explanation. I've tested deeply and it works really well! Thanks a lot

[Mikepo]

I thought the equal heights module was standard in BS.  I'm running the gold version and the module was preinstalled, and works well!

 

Am I missing something?

[auzStar]

@@Mikepo

I thought the equal heights module was standard in BS.  I'm running the gold version and the module was preinstalled, and works well!

 

Am I missing something?

 

Read all the comments above. Does the equal heights module that is standard in BS do this? Am I missing something?

 

No-one's forcing you to use it if you don't see a difference. Stick to the original.

Edited September 28, 2016 by auzStar

[ecommunlimited]

The New Equal Height Module works beautifully for me. The old one has been driving me nuts for a while now. Thanks for the new mod and thanks again for your help earlier @@auzStar.

[Omar_one]

Hi auzStar.

I installed the addon but it is not working well,the products dont seem to be displaying correctly, there is some empty product column,

and uninstall it and install the old one ... and still the same problem.

any help plz?

 

BR

Omar

[auzStar]

@@Omar_one

 

Did you already have the problem with the old one? Have you made any core changes?

 

Are you using recent a version of osCommere 2.3.4 bootstrap or an older version i.e. Gold?

 

Please paste the contents of your "catalog\includes\modules\product_listing.php" file.

 

[Omar_one]

@@auzStar thank you for your reply 

No, i haven't this problem with the old one.. my oscommerce version is OSC 2.3 BS Edge.

here is  product_listing.php

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2016 osCommerce

  Released under the GNU General Public License
*/

  $num_list = (isset($_GET['view']) && ($_GET['view'] == 'all') ) ? 999999 : MAX_DISPLAY_SEARCH_RESULTS; 
  $listing_split = new splitPageResults($listing_sql, $num_list, 'p.products_id');
?>

<?php
  if ($messageStack->size('product_action') > 0) {
    echo $messageStack->output('product_action');
  }
?>

  <div class="contentText">

<?php
  if ( ($listing_split->number_of_rows > 0) && ( (PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3') ) ) {
?>
<div class="row">
  <div class="col-sm-6 pagenumber hidden-xs">
    <?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?>
  </div>
  <div class="col-sm-6">
    <div class="pull-right pagenav"><ul class="pagination"><?php echo $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></ul></div>
    <span class="pull-right"><?php echo TEXT_RESULT_PAGE; ?></span>
  </div>
</div>
<?php
  }

  if ($listing_split->number_of_rows > 0) { ?>
    <div class="well well-sm">
      <div class="btn-group btn-group-sm pull-right">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <?php echo TEXT_SORT_BY; ?><span class="caret"></span>
        </button>

        <ul class="dropdown-menu text-left">
          <?php
          $lc_show_model = false;
          $lc_show_manu = false;
          $lc_show_qty = false;
          $lc_show_lbs = false;
          for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
			  //sort order
        if ($column_list[$col] == 'PRODUCT_LIST_SORT_ORDER'){break;}
             //end sort order

            switch ($column_list[$col]) {
              case 'PRODUCT_LIST_MODEL':
              $lc_text = TABLE_HEADING_MODEL;
		          $lc_show_model = true;
              break;
              case 'PRODUCT_LIST_NAME':
              $lc_text = TABLE_HEADING_PRODUCTS;
              break;
              case 'PRODUCT_LIST_MANUFACTURER':
              $lc_text = TABLE_HEADING_MANUFACTURER;
		          $lc_show_manu = true;
              break;
              case 'PRODUCT_LIST_PRICE':
              $lc_text = TABLE_HEADING_PRICE;
              break;
              case 'PRODUCT_LIST_QUANTITY':
              $lc_text = TABLE_HEADING_QUANTITY;
              $lc_show_qty = true;
              break;
              case 'PRODUCT_LIST_WEIGHT':
              $lc_text = TABLE_HEADING_WEIGHT;
              $lc_show_lbs = true;
              break;
              case 'PRODUCT_LIST_IMAGE':
              $lc_text = TABLE_HEADING_IMAGE;
              break;
              case 'PRODUCT_LIST_BUY_NOW':
              $lc_text = TABLE_HEADING_BUY_NOW;
              break;
              case 'PRODUCT_LIST_ID':
              $lc_text = TABLE_HEADING_LATEST_ADDED;
              break;
            }

            //sort order
    if ($column_list[$col] == 'PRODUCT_LIST_SORT_ORDER'){break;}
    if ( ($column_list[$col] != 'PRODUCT_LIST_BUY_NOW') && ($column_list[$col] != 'PRODUCT_LIST_IMAGE') && ($column_list[$col] != 'PRODUCT_LIST_MULTIPLE')) {
   // if ( ($column_list[$col] != 'PRODUCT_LIST_BUY_NOW') && ($column_list[$col] != 'PRODUCT_LIST_IMAGE') ) {
//end sort order
              $lc_text = tep_create_sort_heading($HTTP_GET_VARS['sort'], $col+1, $lc_text);
	            echo '        <li>' . $lc_text . '</li>';
            }
          }
		      ?>
        </ul>
      </div>

    <?php
    if ( (defined('MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS') && MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS == 'True') && (strpos(MODULE_HEADER_TAGS_GRID_LIST_VIEW_PAGES, basename($PHP_SELF)) !== false) ) {
      ?>
      <strong><?php echo TEXT_VIEW; ?></strong>
      <div class="btn-group">
        <a href="#" id="list" class="btn btn-default btn-sm"><span class="fa fa-th-list"></span><?php echo TEXT_VIEW_LIST; ?></a>
        <a href="#" id="grid" class="btn btn-default btn-sm"><span class="fa fa-th"></span><?php echo TEXT_VIEW_GRID; ?></a>
      </div>
      <?php
    }
    ?>
    <div class="clearfix"></div>
  </div>

  <?php
  $listing_query = tep_db_query($listing_split->sql_query);

  $prod_list_contents = NULL;

  while ($listing = tep_db_fetch_array($listing_query)) {
    $prod_list_contents .= '<div class="item list-group-item col-sm-6" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product">';
	  $prod_list_contents .= '  <div class="productHolder equal-height">';
    
    if (PRODUCT_LIST_IMAGE > 0) {
      if (isset($HTTP_GET_VARS['manufacturers_id'])  && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
        $prod_list_contents .= '    <a href="' . tep_href_link('product_info.php', 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'itemprop="image"', NULL, 'img-responsive thumbnail group list-group-image') . '</a>';
      } else {
        $prod_list_contents .= '    <a href="' . tep_href_link('product_info.php', (isset($sort) ? 'sort=' . $sort . '&' : '') . ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'itemprop="image"', NULL, 'img-responsive thumbnail group list-group-image') . '</a>';
      }
    }
    
    $prod_list_contents .= '    <div class="caption">';
    
    if (PRODUCT_LIST_NAME > 0) {
      $prod_list_contents .= '      <h2 class="group inner list-group-item-heading">';
      if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
        $prod_list_contents .= '    <a itemprop="url" href="' . tep_href_link('product_info.php', 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '"><span itemprop="name">' . $listing['products_name'] . '</span></a>';
      } else {
        $prod_list_contents .= '    <a itemprop="url" href="' . tep_href_link('product_info.php', ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '"><span itemprop="name">' . $listing['products_name'] . '</span></a>';
      }
      $prod_list_contents .= '      </h2>';
    }    

    $prod_list_contents .= '      <p class="group inner list-group-item-text" itemprop="description">' . strip_tags($listing['products_description'], '<br>') . '…</p><div class="clearfix"></div>';

    $extra_list_contents = NULL;
	  if ( (PRODUCT_LIST_MANUFACTURER > 0) && tep_not_null($listing['manufacturers_id']) ) {
      $extra_list_contents .= '<dt>' . TABLE_HEADING_MANUFACTURER . '</dt>';
      $extra_list_contents .= '<dd><a href="' . tep_href_link('index.php', 'manufacturers_id=' . (int)$listing['manufacturers_id']) . '">' . $listing['manufacturers_name'] . '</a></dd>';
    }
	  if ( (PRODUCT_LIST_MODEL > 0) && tep_not_null($listing['products_model']) ) {
      $extra_list_contents .= '<dt>' . TABLE_HEADING_MODEL . '</dt>';
      $extra_list_contents .= '<dd>' . $listing['products_model'] . '</dd>';
    }
	  if ( (PRODUCT_LIST_QUANTITY > 0) && (tep_get_products_stock($listing['products_id']) > 0) ) {
      $extra_list_contents .= '<dt>' . TABLE_HEADING_QUANTITY . '</dt>';
      $extra_list_contents .= '<dd>' . tep_get_products_stock($listing['products_id']) . '</dd>';
    }
	  if (PRODUCT_LIST_WEIGHT > 0) {
      $extra_list_contents .= '<dt>' . TABLE_HEADING_WEIGHT . '</dt>';
      $extra_list_contents .= '<dd>' . $listing['products_weight'] . '</dd>';
    }

    if (tep_not_null($extra_list_contents)) {
       $prod_list_contents .= '    <dl class="dl-horizontal list-group-item-text">';
       $prod_list_contents .=  $extra_list_contents;
       $prod_list_contents .= '    </dl>';
    }

	  if ( (PRODUCT_LIST_PRICE > 0) || (PRODUCT_LIST_BUY_NOW > 0) ) {
      $prod_list_contents .= '      <div class="row">';
    
      if (PRODUCT_LIST_PRICE > 0) {
        if (tep_not_null($listing['specials_new_products_price'])) {
          $prod_list_contents .= '      <div class="col-xs-6" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="' . tep_output_string($currency) . '" /><div class="btn-group" role="group"><button type="button" class="btn btn-default"><del>' .  $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</del></span>  <span class="productSpecialPrice" itemprop="price" content="' . $currencies->display_raw($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span></button></div></div>';
        } else {
          $prod_list_contents .= '      <div class="col-xs-6" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="' . tep_output_string($currency) . '" /><div class="btn-group" role="group"><button type="button" class="btn btn-default"><span itemprop="price" content="' . $currencies->display_raw($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '">' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span></button></div></div>';
        }
      }
    
      if (PRODUCT_LIST_BUY_NOW > 0) {
        $prod_list_contents .= '       <div class="col-xs-6 text-right">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'fa fa-shopping-cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';
      }
      $prod_list_contents .= '      </div>';
    }

    $prod_list_contents .= '    </div>';
    $prod_list_contents .= '  </div>';
    $prod_list_contents .= '</div>';

  }

  echo '<div id="products" class="row list-group" itemtype="http://schema.org/ItemList">';
  echo '  <meta itemprop="numberOfItems" content="' . (int)$listing_split->number_of_rows . '" />';
  echo $prod_list_contents;
  echo '</div>';
} else {
?>

  <div class="alert alert-info"><?php echo TEXT_NO_PRODUCTS; ?></div>

<?php
}

if ( ($listing_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3')) ) {
  ?>
<div class="row">
  <div class="col-sm-6 pagenumber hidden-xs">
    <?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?>
  </div>
  <div class="col-sm-6">
    <div class="pull-right pagenav"><ul class="pagination"><?php echo $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></ul></div>
    <span class="pull-right"><?php echo TEXT_RESULT_PAGE; ?></span>
  </div>
</div>
  <?php
  }
?>

</div>

[auzStar]

@@Omar_one

 

On your previous post you said you installed the old one and still have the same issue. So the issue may not be with this add-on

 

Anyway, thanks. File looks OK. The add-on is known to work as you can see from the comments above. Can you check if you get any error message in developer console. If you don't know how to do this can you PM me a link to your website so I can check.

 

Also, did you set the sort order of this "New Equal Height Header Tag Module" to a higher number than the sort order of the "Grid List Javascript (jQuery)" header tag module as per instructions.

 

cheers

Edited September 28, 2016 by auzStar

[Omar_one]

@auzStar thank you for your reply..

 

There is nothing wrong with your add-on New Equal Height Module its works well .

another add-on make that mess

 

Thank you for this add-on and for your help

BR

Omar

[piernas]

@@auzStar after testing deeper I found some cases where grid breaks with longer descriptions.

It doesn't work at first load but fixes when switching to list and back to grid.

Anyone else found this problem?

[auzStar]

@@piernas

It works nicely, but the store where I've installed has some modifications (mainly to align the text in boxes) and I can't find the difference in practice. What exactly does this new module compared to the stock one?

 
Didn't you say in an earlier post (see quote above) that you have some modifications in the boxes? Could that be the reason?
 
I'm not able to replicate the issue when I increase the description text which appears in list view. (Grid doesn't display description in stock osC.)
 
Did you set the sort order of this "New Equal Height Header Tag Module" to a higher number than the sort order of the "Grid List Javascript (jQuery)" header tag module as per instructions. This could be another possibility. 

 

If you're saying you have description in grid view, why would you have large amounts of description? Large amounts of white space would appear in boxes that would only have small descriptions.
 
cheers

[auzStar]

@@Omar_one

@auzStar thank you for your reply..

 

There is nothing wrong with your add-on New Equal Height Module its works well .

another add-on make that mess

 

Thank you for this add-on and for your help

BR

Omar

 

What other add-on was causing the issue and how did you fix it. I may help others.

[Omar_one]

@@auzStar

the add-on was Miinify Code (http://addons.oscommerce.com/info/9480/v,23

i didn't  fix it .. I just uninstall it  :D

 

BR

Omar

[piernas]

@@piernas

 

Didn't you say in an earlier post (see quote above) that you have some modifications in the boxes? Could that be the reason?

 

I'm not able to replicate the issue when I increase the description text which appears in list view. (Grid doesn't display description in stock osC.)

 

Did you set the sort order of this "New Equal Height Header Tag Module" to a higher number than the sort order of the "Grid List Javascript (jQuery)" header tag module as per instructions. This could be another possibility. 

 

If you're saying you have description in grid view, why would you have large amounts of description? Large amounts of white space would appear in boxes that would only have small descriptions.

 

cheers

 

@auzStar silly me, when i installed and uninstalled the module I forgot the ordering and it lost the sort order. That's surely why this worked first time and not the second! Thanks for the tip!

 

BTW I meant longer titles. Description only shows on list view, not in grid view.

 

Edited September 29, 2016 by piernas

[ecommunlimited]

@@crimble crumble

 

I'm not sure if it applies to also_purchased_products.php or not because I don't use it. I use also_consider.php from another mod and it works perfect with it on the product info page. You can look in the Equal Height Divs (jQuery) and see if there is a box to check mark for that or anything else you want the Equal Height to work on.

 

Take care

 

Bill

[auzStar]

@@crimble crumble

Does this module apply to the "also_purchased_products.php" module on the product info page? I'm having a problem with heights sometimes not being equal if the product title is long in certain resolutions. I have "$also_pur_prods_content .= '  <div class="thumbnail equal-height">';" included but perhaps this only apply to the image and not the box? Thanks.

 
With what you already have "$also_pur_prods_content .= '  <div class="thumbnail equal-height">';" you need to (as William said above) also make sure product_info.php is ticked for the Equal Height Divs (jQuery) module and if you have cache turned on also clear the cache for "Also Purchased Module" in "admin->tools->cache control", every time you make changes to the also_purchased_products.php file.
 
cheers

[vampirehunter]

Excellent Module.

Many Thanks

I always noticed the list view in mobile was not showing properly, and this has fixed it.

Now the text, and buttons fit perfectly especially on narrow screens.

Absolutely brilliant.

Edited December 21, 2016 by vampirehunter

[annuity]

Great mod thanks very much for your hard work. I was wondering is there a way to add the same equal height functionality to the sub-categories section on a nested category page please?

[annuity]

Also is it possible to set the elements within the container to equal height as well? For example in grid product listing the price and buy now buttons are at different heights as you look along the row of products depending on the length of the product title. I would like each element(product image, title, price & buy now) to be level regardless of title length.

 

I wonder if a work around would be to set the price & buy now element to a fixed point from the bottom of the container? So you would have different white space between the title and price and buy now elements but the price and buy now elements would all be level across the row of products.

Edited January 7, 2017 by annuity