Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Equal Height - possible new approach


Recommended Posts

:D perfect!

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

@@wHiTeHaT

 

$prod_list_contents .= '<div class="item list-group-item col-xs-a col-sm-b col-md-c col-lg-d">';

 

and so on ... if I am understanding you correctly.   Changing abcd to numbers as appropriate.

 

In v4 bootstrap there is an extra breakpoint dealing with the flip from landscape to portrait in (eg) ipad.

Link to comment
Share on other sites

  • 1 year later...

How would one go about implementing this inside the also purchased module (or any other module... example: an content index module that displays all categories) that does not use the list-group class and grid javascript????

        $also_pur_prods_content .= '<div class="col-sm-6 col-md-4">';
        $also_pur_prods_content .= '  <div class="thumbnail">';
        $also_pur_prods_content .= '    <a href="' . tep_href_link('product_info.php', 'products_id=' . (int)$orders['products_id']) . '">' . tep_image('images/' . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
        $also_pur_prods_content .= '    <div class="caption">';
        $also_pur_prods_content .= '      <h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="' . tep_href_link('product_info.php', 'products_id=' . (int)$orders['products_id']) . '"><span itemprop="name">' . $orders['products_name'] . '</span></a><meta itemprop="position" content="' . (int)$position . '" /></h5>';
        $also_pur_prods_content .= '    </div>';
        $also_pur_prods_content .= '  </div>';
        $also_pur_prods_content .= '</div>';

Or

      <div class="col-xs-6 col-sm-4 equal-height">
        <div class="thumbnail">
          <a href="<?php echo tep_href_link('index.php', $cPath_new); ?>"><?php echo tep_image_legacy('images/' . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT); ?></a>

          <div class="caption text-center">
            <h5><a href="<?php echo tep_href_link('index.php', $cPath_new); ?>"><?php echo $categories['categories_name']; ?></a></h5>
          </div>
        </div>
      </div>
Link to comment
Share on other sites

Just a comment/continue some of the discussion already noted here....

I'm having issues getting the current (original) equal height header tag module to work "perfectly" with jquery 3.1.0 or above. Anyone else???? Or is this broken?

 

Although @@burt your css  solution seems to work - as a shop owner I find the single column on -sm- devices rather limiting.

 

Would it not be wise to leave the flexibility in the core, or even extend it with @@Gergely jquery solution (which does not seem to have any issues for me...) as an option for shop owners? I guess it can always just be an "add on".... but why take it away (especially since the equal-height class is still in the product_listing).

 

Trying to comment out

/*@[member=media] only screen and (max-width : 768px) {.list-group {flex-direction: column; }}*/

allows me to control the number of columns on -sm- devices but does not work seamlessly on IOS.

Link to comment
Share on other sites

I guess it can always just be an "add on".... but why take it away (especially since the equal-height class is still in the product_listing).

The .css solution is superior in every respect to any .js solution.

 

The equal-heights stayed in the core code to allow shopowners to do exactly as you have done ... have the flexibility to revert back to the old module or use Gergelys (did not know he had one) or use the other one made by auzstar (if I recall correctly).

Link to comment
Share on other sites

@@burt ok perfect...

 

Ya it wasn't really a solution... it was more Gergley making  a js suggesting to in place of your css.... here.... http://www.oscommerce.com/forums/topic/408314-equal-height-possible-new-approach/?p=1734214

 

The next problem I have is the current equal-height header tag mod seems to break (as well as a just about ANY other jquery mod I've installed.... including jquery.mobile.custom.min.js) under jquery 3.1.*....

 

Have you experienced issues with jquery.mobile.custom.min.js? It could be I have another conflict causing a cascade of issues.....

Link to comment
Share on other sites

@@greasemonkey

 

jQuery 3.1 breaks the old equal-heights module.

 

New version of equal-heights here: http://addons.oscommerce.com/info/9505#tabs-hist works with jQuery 3.1.

 

Attached is v1.5 of jquery.mobile.custom.min.js (zip file) which also works with jQuery 3.1.

 

cheers

jquery.mobile.custom.min.js.zip

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

next problem I have is the current equal-height header tag mod seems to break (as well as a just about ANY other jquery mod I've installed.... including jquery.mobile.custom.min.js) under jquery 3.1.*....

 

Have you experienced issues with jquery.mobile.custom.min.js? It could be I have another conflict causing a cascade of issues.....

One reason (albeit it a minor one) that I removed the EQ-height module from Core was the upgrade to 3.1 js. Although I can say that I have had no problems with the latest mobile.js script (used it the other day in fact) ...

 

I'd highly suggest moving to the .css solution as that will be built into Bootstrap v4.

Link to comment
Share on other sites

 

I'd highly suggest moving to the .css solution as that will be built into Bootstrap v4.

 

Agreed... @@burt.... I will move to this type of css solution as I figure out how to make this better suits my specific needs.

 

Although I can say that I have had no problems with the latest mobile.js script (used it the other day in fact) ...

Yep, all I had to do was update our carousel slider to 1.5.0...

 

Anyway... that is off topic.... I'm all sorted for the time being on equal-height using Dominic's jquery....

Link to comment
Share on other sites

@@burt

 

BTW, the original (Included) equal-height header tag module can be fixed to work with jquery 3.1.* by updating the load function on line 49

 

From

$(window).load(function() {

To

 $(window).on('load', function () {

If anyone else could confirm that would be great....

Link to comment
Share on other sites

@@greasemonkey

@@burt

 

BTW, the original (Included) equal-height header tag module can be fixed to work with jquery 3.1.* by updating the load function on line 49

 

From

$(window).load(function() {

To

 $(window).on('load', function () {

If anyone else could confirm that would be great....

 

confirmed Scott  :thumbsup:

though the new Equal-Height module corrects a few other issues

 

cheers

 

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

  • 2 months later...

@@greasemonkey

 

jQuery 3.1 breaks the old equal-heights module.

 

New version of equal-heights here: http://addons.oscommerce.com/info/9505#tabs-hist works with jQuery 3.1.

 

Attached is v1.5 of jquery.mobile.custom.min.js (zip file) which also works with jQuery 3.1.

 

cheers

 

Thank you for this great update.

 

I have noticed that DIV resize could be not perfect when you come from list display to grid display (a randomly margin of about 4px appears at the bottom of the DIV).

 

To resolve this you have to change the delay to 200 (instead of 10):

function equalHeight(group, resize) {
  var resize = resize || false;
  var maxHeight = 0;
  clearTimeout(timer);
  var timer = setTimeout(function() { // need to set a slight delay
    if (resize) {
      group.height('auto'); // need this for window resize
    }
    group.each(function() {
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
      }
    });
    group.height(maxHeight);
  }, 200);
}

NB: Maybe you could adapt this delay according to your server speed.

Osc v2.3.4 BS "custom"
PHP 7.3 compatible (710 modified files => o_O')

Link to comment
Share on other sites

We've totally moved away from "equal heights" for each product in a list.  

Instead we now have equal height for each row of products.

 

As it originally was (showing the problem):

post-69-0-79860700-1491903697_thumb.jpg

You can plainly see that the "fire down below" product has a larger image than the rest.  This breaks the layout.

 

With the original Equal Height solution (javascript):

post-69-0-47669500-1491903858_thumb.jpg

This sets all the individual boxes to the height of the tallest box.  This leaves gaps at the bottom of most of the boxes.

 

And as it is now (css solution):

post-69-0-69867000-1491904010_thumb.jpg

Now each row takes on the height of the biggest box within the row.  You can see that each box is only as big as what it is holding inside it.

 

 

The default solution is the .css solution as this is less code, no javascript, no module to load.  This is included in the out of the box installation of Edge.  There is *nothing* to stop you from using the original equal heights module, or any other addon that does similar.

 

Got questions on this... ask away.

Link to comment
Share on other sites

@@frankl - I'm going from memory here, so might not be 100% correct...

 

1.  turn off the equal heights HT module @ admin > modules > header_tags

This will break the display as shown in the first image above.

 

2.  add this css code to user.css

 

 

.row.list-group {display: flex; flex-flow: row wrap;}
.row.list-group.container:after, .row.list-group.container:before, .row.list-group.row:after, .row.list-group.row:before{content:normal}
.row.list-group {display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-flex-flow: row wrap; }
@[member=media] only screen and (max-width : 768px) {.row.list-group {-webkit-flex-direction: column; flex-direction: column; }}

 

Save and upload.  At this point, things will still look broken.

 

3.  change some modules - potentially difficult, but not overly so;

Each list of products must have class="row list-group" and this must be on the outer div that holds the list, eg's

https://github.com/gburton/Responsive-osCommerce/blob/master/includes/modules/product_listing.php#L181

https://github.com/gburton/Responsive-osCommerce/blob/master/includes/modules/content/index/templates/new_products.php#L17

and so on.

 

Once all 3 steps are done.  Everything should look as image 3 in the post above.

 

If you then prefer to have the boxes all equal-height...

just turn on the equal height HT module again...

 

So you can actually have these .css things...and still use the equal height module as well!

Link to comment
Share on other sites

@@burt
 

Thanks to the different screenshots, I have just understood the interest of the solution css that you propose and which, indeed, seems the best from the point of view of simplicity and economy of line.
Thank you very much !  :thumbsup:

Osc v2.3.4 BS "custom"
PHP 7.3 compatible (710 modified files => o_O')

Link to comment
Share on other sites

You nee to change includes/modules/also_purchased_products.php too

  • The clever one learn from everything and from everybody
  • The normal one learn from his experience
  • The silly one knows everything better

[socrates, 412 before Christ]

Computers help us with the problems we wouldn't have without them!
99.9% of the bugs sit in front of the computer!
My programmed add-ons: WDW EasyTabs 1.0.3, WDW Facebook Like 1.0.0

if(isset($this) || !isset($this)){ // that's the question...

 

Link to comment
Share on other sites

@@burt

Today, I have noticed a size bug for product images from "products_listing" page.
The size of images are not equal, sometimes regular, sometimes smaller than expected "100 x 80" format (set from admin).

 

I have tried to delete the css attributs "img-responsive thumbnail group list-group-image" but size displays continue to be different.

 

Here is a screenshot that shows the differents (110 x 90 is the good size because of thumbnail class, 100 x 82 is not an expected size).

Have you noticed this bug at home?  :wacko: 

 

NB: My product images have same size ratio (100 x 80). No exception.

 

post-136115-0-37200800-1492354318_thumb.jpg

Osc v2.3.4 BS "custom"
PHP 7.3 compatible (710 modified files => o_O')

Link to comment
Share on other sites

Ok, this bug occurs when the 2 fields "SMALL_IMAGE_WIDTH" and "SMALL_IMAGE_HEIGHT" are filled in from admin.

So you must fill one of the two but not the two fields at the same time.

Osc v2.3.4 BS "custom"
PHP 7.3 compatible (710 modified files => o_O')

Link to comment
Share on other sites

@@milerwan  This has always been the case with osCommerce images. For best results, leave both SMALL_IMAGE_WIDTH and SMALL_IMAGE_HEIGHT blank and make your main images the size you want them to be on the page.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...