Mini Layout, Multiple columns

[NickD]

Have tried the forum, AUG etc but can't see how to do this.

I sell wine & have lots of products on my site all organised in various sections and all taking up the full width of the screen.

What I'd like to do is have a few "summary pages" - one might be "Rosé wines for summer" - populated with product duplicates, but instead of being full width, I'd like a smaller layout with a thumbnail image, possible smaller text, and to arrange them in multiple columns - perhaps 3. The user could either put the product in the basket directly from the summary page, or could be taken to the main product entry - I can be flexible on this.

I've seen reference to "mini layouts" but can't see any product layouts that are described in this way.

I wonder if anyone has done anything like this before and could give some pointers.

Nick

[Duncan Rounding]

You can create a new product layout with cut down product description that links to the master product or you can (so long as you have spp) add the price and 'add to cart' etc to the section links.

A client of mine is implementing the former here: http://www.frazerpart.com/acatalog/P...vice_Kits.html
and similarly here: http://www.fancystuff.co.uk/acatalog/Ring-Boxes.html

This client is implementing the second (perhaps simpler) method here: http://www.avrmobiles.co.uk/acatalog...detectors.html
which is described here: http://community.actinic.com/showthread.php?t=30435

I'm sure there are many other instances of this in the forum too.

[NickD]

Excuse my ignorance - what is spp?

[Duncan Rounding]

Sorry, Single Product per Page.

[NickD]

Thanks - unfortunately I have LPP (loads of products per page) so we'll have a go with the former method.

Nick

[NickD]

I've seen reference to "mini layouts" but can't see any product layouts that are described in this way.
Nick

Are there any standard layouts of this type? Has anyone got an example of code for such a layout?

[chris ashdown]

Do you mean like mine on home page www.internet-workwear.co.uk, if so try contacting "Jonty" whilst on other sites I just use HTML

[NickD]

Yes, that's the sort of thing.

[chris ashdown]

Our British Outdoor home page is a fragment with this in the text

!!<
<P>When you select to pay by credit card after entering your name and addresss, you will be transfered to the "Sage-Pay" Bank secure site and will see the security padlock on the top of your screen.
<P><BR>

<table width="600" border="0" align="center">
<tr align="center" valign="top">

<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Smocks.html"><img src="Bgreenroundneckstandingx100.jpg" width="100" height="150" border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Smocks.html">Fishermans & Gardening Smocks</a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html"><img src="w231poloshirt.jpg" width="100" height="150" border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html">Promotional Clothing</a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Mens_Shirts.html"><img src="Oxford7022.jpg" width="100" height="150" border="3"></a><br />
<a href="http://www.british-shirts-blouses.co.uk/acatalog/Mens_Shirts.html">Mens Shirts</a></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Ladies_Blouses.html"><img src="qw127-Navy-print.jpg" width="100" height="150" border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Ladies_Blouses.html">Ladies Blouses </a></p></td></tr>

<tr align="center" valign="top">

<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Water_proofs.html"><img src="wr401-Black.jpg" width="100" height="150" border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Water_proofs.html">Mens & Ladies Jackets & Waterproofs </a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Fleece.html"><img src="snowdon_FLEECE.jpg" width="100" height="150"border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Fleece.html">Ladies and Mens Fleeces</a></td>

<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Mens_Workshirts.html"><img src="Pilot2068.jpg" width="100" height="150"border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Mens_Workshirts.html">Workshirts</a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html"><img src="JT51.jpg" width="100" height="150"border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html">Polo Shirts</a></p></td></tr>

<tr align="center" valign="top">



<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html"><img src="JT62.jpg" width="100" height="150"border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html">Sweatshirts</a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html"><img src="JT28.jpg" width="100" height="150" border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Polo_Shirts.html">Cotton T-Shirts</a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Trousers.html"><img src="W30_W300.jpg" width="100" height="150"border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Trousers.html">Work Trousers in 17 Colours</a></p></td>


<td class="myBORDER" width="100" border="1" align="center"><a href="http://www.british-outdoors.co.uk/acatalog/Embroidery.html"><img src="embroidery-logos.jpg" width="100" height="150"border="3"></a><br />
<a href="http://www.british-outdoors.co.uk/acatalog/Leisurewear.html">Embroidery</a></td></tr>


</td>

</table>



Just simple repetative HTML, I am sure many designers on here are pulling their hair out with this, but i am simple and it works for me

[NickD]

Simple is beautiful

Actually, on closer inspection. that's not quite what I meant. The "mini layouts" in your table are not in fact products, they are links to other sections. My homepage also has something a bit like your table. What I need is mini layout examples for orderable products. Your site has best seller and new arrival layouts that look OK though.

Nick

[NickD]

OK I worked out how to do what I wanted. I created a new "Mini Product" layout based on that used for the best sellers "mini Product Layout" which I can use in the catalogue pages. That works fine. However this now gives rise to another problem, which is......


I want, on my special summary pages, to have products laid out in columns. Having sorted out the above, this becomes the easy bit. Let's say for the sake of argument that I will organise 4 such columns, which so far I have done by setting the "Column count for products" on the layout tab for the relevant section to 4. So far so good. However, on the page there might be several sections - let's call them "White Wine", "Rosé Wine", and "Red Wine". All the products used on this page are incidentally implemented as duplicates of products elsewhere in the catalogue.

What I would also like is a "section title block" before each section, which would seperate the sections and could include a few words about each section. These "section title blocks" could be implemented as products or fragments with their own unique layouts, but should however be the full page width rather than being treated as just another product to go in one of the columns. After each such title block, the ensuing product columns would reset such that the first product after a title block would go in the left-most column.

So to summarise we need a single column section, followed by a 4-column section, followed by another single column section, then another 4-column section, etc. etc. All on one page.

I'm sure someone has tackled this "multi-multi-column" issue somewhere! All input/suggestions gratefully received.

Nick

[AndyBorrett]

There was a post by Norman a while back about creating different fragment layouts for laying out fragments in columns and adding three lines of
CSS. If you can't find it i will take a look when I am back on the computer.