Customising the "other customers bought" area

[alexrpaul]

Hello all,

I have just finished changing away from my old upgraded templates to new ones and heve re done all of my customisations. I have implemented the other customers and made and attached all of my thumbnails but the layout is awful.

I don't really understand how this template works and I have tried to fiddle with it but just break it!!
I have:

<!-- Also bought list begin-->
<Actinic:REMOVE TAG="AlsoBoughtLine">
<table width="100%" cellspacing="2" cellpadding="3" border="0">
   <tr>
      <th align="center" colspan="2" class="cartheading"><strong>Customers who bought these items also bought the following:</strong></th>
   </tr>
</table>
<table width="100%" cellspacing="2" cellpadding="3" border="0">
   <tr>
      <td class="cart">
      <ol>
   <!-- Also bought list row begin-->
   <Actinic:XMLTEMPLATE NAME="AlsoBoughtLine">
         <li>
         <Actinic:REMOVE TAG="ImageLine"><img src="<actinic:variable name="Thumbnail" />" <actinic:variable name="ThumbnailSize" /> /></Actinic:REMOVE>
         <a href="<actinic:variable name="SearchCGIURL" /> ?PRODREF=<Actinic:Variable Name="ProdRef"/>&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22HiddenFields%22%20%2f%3e%20%21%3d%20%22%22">&amp;SHOP=<Actinic:Variable Name="HiddenFields"/></actinic:block>"><Actinic:Variable Name="ProductNameOnline"/></a>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e">
	         (Ref: <Actinic:Variable Name="ProdRef"/>)
         </actinic:block>
         </li>
	</Actinic:XMLTEMPLATE>
	<!-- Also bought list row end-->
	   </ul>
      </td>
   </tr>
</table>
</Actinic:REMOVE>
<!-- Also bought list end-->

This lists the entries in a column.

What I would like to do is have six entries in a table with three columns and two rows...

Is this possible (of course it is) but is it relatively straightforward and can anyone help please?

Thanks,

Alex

[RuralWeb]

Its either been posted recently or added to the AUG - I cannot remember which

[alexrpaul]

Its either been posted recently or added to the AUG - I cannot remember which

Sorry for my ignorance but what is an AUG?

Thanks!

Alex

[fergusw]

AUG = Advanced User Guide
http://community.actinic.com/showthread.php?t=22204

[alexrpaul]

Tyvmfya

[fergusw]

Tyvmfya

npat - gtboh

[cdicken]

... but I don't think there's anything in there about the also bought items list in the shopping cart.

I think this is one area where CSS can save us though.

So everything between
<Actinic:XMLTEMPLATE NAME="AlsoBoughtLine">
and
</Actinic:XMLTEMPLATE>
is re-used multiple times in order to draw the list of also bought items.

At the moment it's displayed as a numbered list, but I would suggest you change

      <ol>
   <!-- Also bought list row begin-->
   <Actinic:XMLTEMPLATE NAME="AlsoBoughtLine">
         <li>
         <Actinic:REMOVE TAG="ImageLine"><img src="<actinic:variable name="Thumbnail" />" <actinic:variable name="ThumbnailSize" /> /></Actinic:REMOVE>
         <a href="<actinic:variable name="SearchCGIURL" /> ?PRODREF=<Actinic:Variable Name="ProdRef"/>&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22HiddenFields%22%20%2f%3e%20%21%3d%20%22%22">&amp;SHOP=<Actinic:Variable Name="HiddenFields"/></actinic:block>"><Actinic:Variable Name="ProductNameOnline"/></a>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e">
	         (Ref: <Actinic:Variable Name="ProdRef"/>)
         </actinic:block>
         </li>
	</Actinic:XMLTEMPLATE>
	<!-- Also bought list row end-->
	   </ol>

to something like

   <Actinic:XMLTEMPLATE NAME="AlsoBoughtLine">
   <div style="float: left; width: 190px; height: 190px; margin-right: 10px; margin-bottom: 10px;"> 
	<Actinic:REMOVE TAG="ImageLine"><img src="<actinic:variable name="Thumbnail" />" <actinic:variable name="ThumbnailSize" /> /></Actinic:REMOVE>
         <a href="<actinic:variable name="SearchCGIURL" /> ?PRODREF=<Actinic:Variable Name="ProdRef"/>&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22HiddenFields%22%20%2f%3e%20%21%3d%20%22%22">&amp;SHOP=<Actinic:Variable Name="HiddenFields"/></actinic:block>"><Actinic:Variable Name="ProductNameOnline"/></a>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e">
	         (Ref: <Actinic:Variable Name="ProdRef"/>)
         </actinic:block>
    </div>
    </Actinic:XMLTEMPLATE>

The floats should lay out the items in your list in boxes next to each other. You may need to fiddle with the widths and heights depending on your design. You also need to set the 'Maximum Number Of Items To Be Listed In Shopping Cart' (in 'Marketing | Also Boughts') to '6'.

Hope that gives you enough inspiration and ideas to complete the job.

[alexrpaul]

Thanks, that is great!!

I don't yet understand CSS, I barely get HTML TBH so I didn't see how you could tile things like this...

The <div style="float: left; width: 190px; height: 190px; margin-right: 10px; margin-bottom: 10px;">
sets a square of 190px which floats on the left.
In HTML you could set the appearance of the contents of this square so the image appeared in the middle of the cell.

In this case there is no cell so to speak so how do you define the positions of the elements in the square?

Div in div's didn't seem to work... can I cheat and dump a table in there?

[cdicken]

In this case there is no cell so to speak so how do you define the positions of the elements in the square?

You could try adding 'text-align: center;' into the 'style' of the divs - that should center it.

Unfortunately, there is no way to do two rows with tables as there is no way to sneak a </tr><tr> in there. You could do one row, but not two.

[alexrpaul]

The text align centre worked a treat and now the pages look a lot better, you can fit 8 also bought items with thumbnails in a nice compact space.

Thanks!!