tgely Posted September 24, 2015 Share Posted September 24, 2015 :D perfect! 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 More sharing options...
burt Posted September 25, 2015 Author Share Posted September 25, 2015 @@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 More sharing options...
greasemonkey Posted January 17, 2017 Share Posted January 17, 2017 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 More sharing options...
burt Posted January 18, 2017 Author Share Posted January 18, 2017 @@greasemonkey and all other interested parties... In also_purchased try changing L22 to: $also_pur_prods_content .= '<div class="list-group-item col-sm-6 col-md-4">'; and L43 to: <div class="row list-group"> Please report your findings here. Link to comment Share on other sites More sharing options...
greasemonkey Posted January 19, 2017 Share Posted January 19, 2017 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 More sharing options...
burt Posted January 19, 2017 Author Share Posted January 19, 2017 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 More sharing options...
greasemonkey Posted January 19, 2017 Share Posted January 19, 2017 @@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 More sharing options...
auzStar Posted January 19, 2017 Share Posted January 19, 2017 @@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-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
burt Posted January 20, 2017 Author Share Posted January 20, 2017 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 More sharing options...
greasemonkey Posted January 20, 2017 Share Posted January 20, 2017 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 More sharing options...
greasemonkey Posted January 20, 2017 Share Posted January 20, 2017 @@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 More sharing options...
auzStar Posted January 22, 2017 Share Posted January 22, 2017 @@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-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
milerwan Posted April 3, 2017 Share Posted April 3, 2017 @@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 More sharing options...
burt Posted April 11, 2017 Author Share Posted April 11, 2017 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): 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): 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): 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 More sharing options...
frankl Posted April 11, 2017 Share Posted April 11, 2017 @@burt What changes are required on an older Edge or Gold store? osCommerce user since 2003! Link to comment Share on other sites More sharing options...
burt Posted April 11, 2017 Author Share Posted April 11, 2017 @@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 More sharing options...
milerwan Posted April 11, 2017 Share Posted April 11, 2017 @@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 More sharing options...
mcmannehan Posted April 12, 2017 Share Posted April 12, 2017 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 More sharing options...
milerwan Posted April 12, 2017 Share Posted April 12, 2017 You nee to change includes/modules/also_purchased_products.php too Already changed. :thumbsup: Osc v2.3.4 BS "custom" PHP 7.3 compatible (710 modified files => o_O') Link to comment Share on other sites More sharing options...
milerwan Posted April 16, 2017 Share Posted April 16, 2017 @@burtToday, 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. Osc v2.3.4 BS "custom" PHP 7.3 compatible (710 modified files => o_O') Link to comment Share on other sites More sharing options...
milerwan Posted April 16, 2017 Share Posted April 16, 2017 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 More sharing options...
♥kymation Posted April 16, 2017 Share Posted April 16, 2017 @@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 More sharing options...
burt Posted April 18, 2017 Author Share Posted April 18, 2017 The Responsice images code does not need (and in fact, should not have) dimensions... Images are fit 100% wide into their "space"... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.