Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

@@burt

 

It's code that I wrote. Why do you ask?


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

Share this post


Link to post
Share on other sites

No problem. Just trying to help.

 

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

Share this post


Link to post
Share on other sites

I had saved this code that was linked to earlier

 

function equalHeight(group) {    
    tallest = 0;    
    group.each(function() {       
        thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
}

$(document).ready(function() {   
    equalHeight($(".thumbnail"));
});

 

this looks more generic, I'm not sure what the difference is between the two


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

Even better. The boxes are all the same height.

 

:thumbsup:


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

Share this post


Link to post
Share on other sites

I've combined both scripts above because I like how using the thumbnail class makes the all boxes a consistent size, but I'm concerned that the thumbnail class could be found elsewhere so better to still restrict it to the parent container that holds the grid. Using just the col-md-4 class creates a uniform grid but doesn't size the boxes consistently, so using with thumbnail class works well.

 

All this relies on the fact that these classes will remain in the code, for the script to work, but a simple search and replace would find all occurrences for any alterations. 

 

cheers

<script><!--

$(document).ready(function() {
  tallest = 0;
  $('.col-md-4:first').parent().each(function() {
    $(this).children('.col-md-4').each(function() {
      thisHeight = $(this).children('.thumbnail').height();
      if (thisHeight > tallest) {
        tallest = thisHeight;
      }
    });
  });

  $('.col-md-4:first').parent().each(function() {
    $(this).children('.col-md-4').each(function() {
      $(this).children('.thumbnail').height(tallest);
    });
  });
});

//--></script>


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

Share this post


Link to post
Share on other sites

Could someone try this:

 

/includes/modules/new_products.php

 

From:

 

     $new_prods_content .= '  <div class="thumbnail">';

 

To:

 

     $new_prods_content .= '  <div class="thumbnail equal-height">';

 

 

And add at the bottom of the same file:

 

 

<script><!--
 
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
 
$(document).ready(function(){
equalHeight($(".equal-height"));
});
 
//--></script>

Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

@@burt

 

Yes all good. Works for me.

 

thanks burt


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

Share this post


Link to post
Share on other sites

@@burt

 

It didn't appear to work when I first loaded it but after clearing cache and then reloading and refreshing to make sure it  now appears to be OK.

 

screen shot attached


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

Share this post


Link to post
Share on other sites

 oops!

 

now attached

post-290729-0-93641000-1416308946_thumb.jpg


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

Share this post


Link to post
Share on other sites

@@burt

 

I have used similar scripts quite a bit and one issue that can happen is that on the initial page load sometimes the dom is ready before the images have loaded so it will make all the boxes have a very tiny height.  Reloading the page fixes it but it still can be a problem.  It mostly happened when using Chrome.  I ended up using basically the same function but waiting until dom loaded instead of dom ready.


Matt

Share this post


Link to post
Share on other sites
$(window).load(function() {
	var maxHeight = 0;
	$(".your-class").each(function() {
		if ($(this).height() > maxHeight) {
			maxHeight = $(this).height();
		}
	});
	$(".your-class").height(maxHeight);
});

Essentialy doing the same thing but waiting a bit longer.  This of course does not go inside the normal document.ready functions.

Edited by mattjt83

Matt

Share this post


Link to post
Share on other sites

Team work for the community, I hope that @@bruyndoncx @@auzStar and @@mattjt83 get some thank you's.

Equal Heights module now ships with Core - doesn't need to be turned on if you don't need it, as the core code only gets screwy for those with odd shaped images or long product names.

 

https://github.com/gburton/osCommerce-234-bootstrap/commit/60701bef1b0dd150cfe666e62d2159006bea7b67

 

Please note that if you want to have this in your shop and just want to do this change, there are in fact TWO new files, and TWO updated files.  Once done, go admin > modules > header tags > install > "equal heights divs (jquery)"

Edited by burt

Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

I don't deserve the credit - someone, but I can't find who has posted this code a few weeks/months ago, and I was so smart to save it thinking this is going to come in handy sometime ...


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

How can I change the default sort order?

I managed to change the default sort listing, but I need it to sort descending.

../catalog/index.php

    if ( (!isset($HTTP_GET_VARS['sort'])) || (!preg_match('/^[1-8][ad]$/', $HTTP_GET_VARS['sort'])) || (substr($HTTP_GET_VARS['sort'], 0, 1) > sizeof($column_list)) ) {
      for ($i=0, $n=sizeof($column_list); $i<$n; $i++) {
        if ($column_list[$i] == 'PRODUCT_LIST_MODEL') {
          $HTTP_GET_VARS['sort'] = $i+1 . 'a';
          $listing_sql .= " order by p.products_model";
          break;
        }
      }
    } else {

Share this post


Link to post
Share on other sites

@@newburns this is not a thread for advice.  This thread is solely for discussion about bootstrap, bugs in our implementation, ideas and so on.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

Alright. Sorry about that.

 

Just an idea... Not sure it's possible,

Allow the end user to select how the products are listed and sorted by default...

Defaults to grid|list

defaults to model|name|price|etc.

Share this post


Link to post
Share on other sites

@@newburns - probably not.  But good way to rephrase your question :D :thumbsup:

 

Ask in a new thread and see if one of the other users can help you.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

:D

I'm going to keep at it, and hopefully be able to make a suggestion to how other users can change it.

The way I understand coding, if it's a value, then it is something that can be put into the mysql database.

Therefore, an option can be listed under configuration or the header_tags modules to change that value.

Which is reflected in the code for what happens by default.

 

I like making suggestions more than asking questions. It's kinda fun on this side of the fence.

Share this post


Link to post
Share on other sites

Team work for the community, I hope that @@bruyndoncx @@auzStar and @@mattjt83 get some thank you's.

 

Equal Heights module now ships with Core - doesn't need to be turned on if you don't need it, as the core code only gets screwy for those with odd shaped images or long product names.

 

https://github.com/gburton/osCommerce-234-bootstrap/commit/1f0cac5890b4e215f5a21fdea7f4ff7efeeb42a6

 

Please note that if you want to have this in your shop and just want to do this change, there are in fact TWO new files, and TWO updated files.  Once done, go admin > modules > header tags > install > "equal heights divs (jquery)"

 

@@burt

 

Works a treat :thumbsup:

 

Just one small error though: :(

 

in "catalog\includes\modules\header_tags\ht_div_equal_heights.php"

inside the "install function()"

for the "configuration_title" you have "Enable Clickable Table Rows Module" instead of "Enable Equal Height Divs Module"

 

Too many chardonnays :D


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

Share this post


Link to post
Share on other sites

@@burt

 

:( Sorry! When I checked this I only viewed in grid views to check there were no holes. But discovered that when you switch from grid to list or vice versa the maxHeight is applied to both. So if you're in list view then refresh the page and then switch back to grid view the boxes are too small.

 

This is because we've applied the "equal-height" class to the product_listing module. It's not an issue with the new_products module (no grid or list option), which is what my initial report was based on when I reported there were holes in the "New Products" display. 

 

We either remove the "equal-height" class from the product_listing module or change the script to one that addresses this problem.

 

I came up with something that will reset the height when ever the "Grid" or "List" options are clicked and on window resize. Works quite well. Just need some else to test please.

<script>
<!--
var equal_height = $(".equal-height");

function equalHeight(group) {
  var maxHeight = 0;
  clearTimeout(timer);
  var timer = setTimeout(function() { // needed to set a slight delay to wait for grid to to appear before adjusting height
    group.height('auto'); // needed this for window resize
    group.each(function() {
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
      }
    });
    group.height(maxHeight);
  }, 10);
}

function autoHeight(group) {
  group.height('auto');
}

$(document).ready(function() {
  $("#list").click(function() {
    autoHeight(equal_height); // reset heights to auto for list view
  });
  $("#grid").click(function() {
    equalHeight(equal_height); // adjust heights in grid view
  });
});

$(window).resize(function() { // corrects each box size when resizing window otherwise boxes will be too small or too large
  if (!$('#product-listing .inline-span').hasClass('one-across fluid-one-across')) { // don't adjust when in list view
    equalHeight(equal_height);
  }
});

$(window).load(function() {
  if (!$('#product-listing .inline-span').hasClass('one-across fluid-one-across')) { // don't adjust when in list view
    equalHeight(equal_height);
  }
});
//-->
</script>

 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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×