Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
Forum Search
Google Site Search
 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Masonry Layout - Easy!
Author « Topic »  

EllenD
Advanced Member

United Kingdom
434 Posts

Posted - 01/23/2015 :  08:20:30  
I've been looking for a masonry 'Pinterest' style layout and found it surprisingly easy to implement, so thought I would share and see if anyone else would like to try this.

Often there is the problem where the image sizes are different heights, or there is different amounts of short description text, so the height of the product div on the products page is different and the layout can look messy.

Check out the Masonry javascript plugin described here http://masonry.desandro.com/

To implement on ECT, all I did was edit my products.php to add the following code just after the line
<?php include "vsadmin/inc/incproducts.php" ?>


Added:

<script src='js/masonry.pkgd.min.js'></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script>
var container = document.querySelector('.products');
var msnry = new Masonry( container, {
//columnWidth: 300,
itemSelector: '.product'
});
// layout Masonry again after all images have loaded
imagesLoaded( container, function() {
msnry.layout();
});
</script>


Then you just need to download the 2 .js files from the link above, and put them in a /js folder in your site. That's it! (I commented out the columnWidth setting as my site seemed more responsive without it, but it may depend on your CSS.)

I'm not an expert in this as I've only just set it up, so would be interested to know if ECT staff or anyone else can see any potential problems with this? But so far I have to say it's looking very cool (thanks to the developers of the Masonry js)

EllenD
Advanced Member

United Kingdom
434 Posts

Posted - 02/24/2015 :  09:39:17  
The website using this feature is now live and you can see an example here http://bit.ly/17u6Fub

This is a standard ECT products page with no modifications to the ECT software (so it's updater proof). As this particular page is used for reviews, the buy buttons etc are removed via CSS, but they could just as easily be left on.

Andy
ECT Moderator

95440 Posts

Posted - 02/24/2015 :  09:42:21  
Hi

Thanks very much for sharing that - looks very cool and I'm sure others will want to take advantaged of that kind of layout.

Andy

Please feel free to review / rate our software

Marshall
Ecommerce Template Guru

USA
1912 Posts

Posted - 03/26/2015 :  22:52:08  
Heads up folks. If you use this, the pagenums at the bottom of the category or product pages, they will float up behind your categories or products and no CSS will fix that. However, I have a solution, but it only works when usecsslayout=true.

If you are comfortable editing your ECT script, open inc/incbodyformat2.asp/php page and scroll to the very bottom. The last 7 lines of code will look like this:

if iNumOfPages>1 AND nobottompagebar<>TRUE then
if usecsslayout then print "<div class=""pagenums"" style=""width:100%"">" & vbCrLf else print "<tr><td colspan=""" & productcolumns & """ align=""center"" class=""pagenums""><p class=""pagenums"">"
print writepagebar(CurPage,iNumOfPages,xxPrev,xxNext,pblink,nofirstpg)
if usecsslayout then print "</div>" & vbCrLf else print "</p></td></tr>"
end if
if usecsslayout then print "</div>" else print "</table>"
if defimagejs<>"" then print "<script type=""text/javascript"">"&defimagejs&"</script>"
(sorry, don't have the php version, but it should be obvious)

You need to get the pagenums outside of the class="categories" and class="products" division. TO do this, switch these lines:

if usecsslayout then print "</div>" else print "</table>"
if iNumOfPages>1 AND nobottompagebar<>TRUE then
if usecsslayout then print "<div class=""pagenums"" style=""width:100%"">" & vbCrLf else print "<tr><td colspan=""" & productcolumns & """ align=""center"" class=""pagenums""><p class=""pagenums"">"
print writepagebar(CurPage,iNumOfPages,xxPrev,xxNext,pblink,nofirstpg)
if usecsslayout then print "</div>" & vbCrLf else print "</p></td></tr>"
end if

if defimagejs<>"" then print "<script type=""text/javascript"">"&defimagejs&"</script>"
The part of the script in red has to be below the line
if usecsslayout then print "</div>" else print "</table>"
and above the line
if defimagejs<>"" then print "<script type=""text/javascript"">"&defimagejs&"</script>"
And that will solve the problem if you are using a CSS layout. You can still edit the CSS of the pagenums as usual.

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Cenlyt.com

From Our Heart
FromOurHeart.com
Gifts, Plush Stuffed Animals, Toy, Games, Puzzles, 3D Gift Cards, Nostalgic Signs, and Collectibles

QKOnline
Advanced Member

USA
229 Posts

Pre-sales questions only
(More Details...)

Posted - 01/25/2016 :  19:39:35  
Marshall, just wanted to say THANKS!!! for the fix for the pagenums problem, it was driving me crazy until I found your post.

Thanks again,

Don...

Don F.
www.quilt-kits-online.com
ECT PHP 6.2.6

Marshall
Ecommerce Template Guru

USA
1912 Posts

Posted - 01/25/2016 :  21:04:59  
You're welcome

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Cenlyt.com

From Our Heart
FromOurHeart.com
Gifts, Plush Stuffed Animals, Toy, Games, Puzzles, 3D Gift Cards, Nostalgic Signs, and Collectibles

QKOnline
Advanced Member

USA
229 Posts

Pre-sales questions only
(More Details...)

Posted - 02/03/2016 :  19:49:31  
OK, so now I tried to apply the masonry to the categories page, and have the problem where all the top text and navigation is getting overlayed by the categories, like this; http://nevadadrygoods.com/categories.php?cat=60

Any ideas? I know I have to do something in inccategories.php, but I'll be darned if I can figure it out.

Don F.
www.quilt-kits-online.com
ECT PHP 6.2.6

dbdave
ECT Moderator

USA
10426 Posts

Posted - 02/03/2016 :  19:57:36  
Hello, add this to your .css file
div.categories {
clear:both;
}

David
ECT Power User :)

QKOnline
Advanced Member

USA
229 Posts

Pre-sales questions only
(More Details...)

Posted - 02/03/2016 :  21:45:24  
Awesome! Thank you SO much. Been scratching on that one for hours. Not much of a css guru.

Don F.
www.quilt-kits-online.com
ECT PHP 6.2.6

dbdave
ECT Moderator

USA
10426 Posts

Posted - 02/04/2016 :  00:10:46  
Glad I could help.

David
ECT Power User :)

Andy
ECT Moderator

95440 Posts

Posted - 12/14/2016 :  05:41:49  
Here's an alternative to using a masonry layout, particularly useful when you have product images of different sizes or extra content for some products.

The typical layout requires setting a height value on the div.product class so the following css sample

div.product {
width: 29%;
height: 450px;
border: 1px solid #ccc;
margin: 5px;
padding:6px;
float:left;
}

would give you a layout like this



The problem there is the extra white space on adjacent products divs.

An alternative would be to use the following css

div.products{clear:left;}
div.product {
width: 29%;
min-height: 250px;
border: 1px solid #ccc;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
padding:6px;
}

which would remove that white space and adjust to the content....



You may need to adjust the min-height / _height settings (they need to be equal) as well as the padding and margins.

Andy

Please feel free to review / rate our software
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000