Product Layout

[Germ]

I would like to find out how to display a product (without making sub cat) in 2 column way the same way as on www.roberdyas.co.uk
screenie enclosed. And also I tried to find option in v6 to display 10 product per page with next and back button option and i didnt find it.

Thanks very much for your help

PS. I did read help and all guides

[garyhay]

Cant see the site you mention 404

do you mean like this

see attached

[Artisan]

> > the same way as on www.roberdyas.co.uk

> Cant see the site you mention 404

That's http://www.robertdyas.co.uk and it's on Actinic v5. The 2-column format can, I think, be done by commenting out
</TR>
<TR>
underneath the first instance of<BR><B>NETQUOTEVAR:PRODUCTPRICE</B></FONT>
</TD>
in Act_ProductBody.html

You might have to tweak the table column layout in Act_ProductLine.html

HTH

Malcolm

[Germ]

sorry site is http://www.robertdyas.co.uk/

basically it is like Gary said

- Product 1 - - Product 2 -

- Product 3 - - Product 4 -

[garyhay]

Act_Productline.html

I dont have the code handy but can get it out tomorrow if you are still looking. Someone may have it handy

[Germ]

Please I will appreciate it

[Germ]

What do I have to change here in order product appear in 2 column

<!-- ProductBody HTML begin -->
<!-- Insert HTML for the top of the product body -->
<div align="right"><a name="sectiontop">
NETQUOTEVAR:PARENTSECTIONSTOP
</a><a name="sectiontop">
<!-- NETQUOTEVAR:TOPLEVELSECTIONSTOP -->
NETQUOTEVAR:SECTIONLISTTOP
NETQUOTEVAR:TOPSECTIONSEPARATOR
NETQUOTEVAR:CARTERRORLISTXML
</a>
NETQUOTEVAR:HIDDENINPUT

<BR>

<TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

NETQUOTEVAR:PRODUCTBULK

</TABLE>
</div>
<DIV ALIGN="RIGHT"><a name="sectionbottom">
NETQUOTEVAR:SINGLEADD
</a></DIV>
<a name="sectionbottom">NETQUOTEVAR:BOTTOMSECTIONSEPARATOR
NETQUOTEVAR:SECTIONLISTBOTTOM
<!-- NETQUOTEVAR:TOPLEVELSECTIONSBOTTOM -->
</a>
<!-- <DIV ALIGN="CENTER"><a name="sectionbottom">
NETQUOTEVAR:PARENTSECTIONSBOTTOM
</a></DIV> -->
<!-- Insert HTML for the bottom of the product body -->
<!-- ProductBody HTML end -->

[NormanRouxel]

It's Act_ProductLine.html that controls the product items. Basically it's called from NETQUOTEVAR:PRODUCTBULK in Act_ProductBody.html. As you can see Act_ProductBody sets up the table and the default Act_ProductLine adds a row to the table displays that product and ends the row.

What you've got to do is to create a new Act_productLine that starts a row duplicates the Product creation code and displays it within 2 table cells, and then ends that row.

I've done this for a 3 column layout with Actinic V5 and I'll try to post a V6 version soon.

Norman

[garyhay]

Sorry i forgot to get back to you. Keep forgetting to subscibe to the threads.

At home again sorry

[NormanRouxel]

Here's my version of 2 column layout. Gary may have a better one. I've also attached this as it may get munged by the forum. The attached version has indented text (for legibility) and the forum seems to be removing this.

Regarding the 2 column layout, this can easily be achieved by editing the
Act_ProductLine.html template to do this as below (this is the original V6
template from the demo store edited somewhat). It displays in 2 columns
across the page with 4 rows per product :-
1st row - Product name and reference
2nd row - the image on the left and description on the right
3rd row - price and prompts
4th row - Cart button and attributes.

*************************************************************************
You also need to alter Act_ProductBody.html. Here is the new version.
Only the <TABLE WIDTH="620" COLS="2" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">
and NETQUOTEVAR:PRODUCTBULK</tr>
are changed here. You may wish to tinker with the width to suit your design.
*************************************************************************


<!-- ProductBody HTML begin -->
<!-- Insert HTML for the top of the product body -->
<div align="right"><a name="sectiontop">
NETQUOTEVAR:PARENTSECTIONSTOP
</a><a name="sectiontop">
<!-- NETQUOTEVAR:TOPLEVELSECTIONSTOP -->
NETQUOTEVAR:SECTIONLISTTOP
NETQUOTEVAR:TOPSECTIONSEPARATOR
NETQUOTEVAR:CARTERRORLISTXML
</a>
NETQUOTEVAR:HIDDENINPUT

<BR>

<TABLE WIDTH="620" COLS="2" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

NETQUOTEVAR:PRODUCTBULK</tr>

</TABLE>
</div>
<DIV ALIGN="RIGHT"><a name="sectionbottom">
NETQUOTEVAR:SINGLEADD
</a></DIV>
<a name="sectionbottom">NETQUOTEVAR:BOTTOMSECTIONSEPARATOR
NETQUOTEVAR:SECTIONLISTBOTTOM
<!-- NETQUOTEVAR:TOPLEVELSECTIONSBOTTOM -->
</a>
<!-- <DIV ALIGN="CENTER"><a name="sectionbottom">
NETQUOTEVAR:PARENTSECTIONSBOTTOM
</a></DIV> -->
<!-- Insert HTML for the bottom of the product body -->
<!-- ProductBody HTML end -->


*************************************************************************
And now the new Act_productLine.html
*************************************************************************


<!-- 2 Column ProductLine HTML begin -->
<!-- NOTE you should also amend two lines in Act_ProductBody.html as below -->
<!-- <TABLE WIDTH="620" COLS="2" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER"> -->
<!-- NETQUOTEVAR:PRODUCTBULK</tr> -->

<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->

NETQUOTEVAR:ENDSEPARATOR
<tr>
<td width="50%" valign=top>
NETQUOTEVAR:PRODUCTFORMBEGIN
<table width="100%">
<tr valign=top>
<td valign="TOP" align="LEFT" colspan="2">
<a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="actregular"><b>NETQUOTEVAR:PRODUCTNAME</b></span></a>
<span class="actxsmall">NETQUOTEVAR:PRODUCTREF</span>
</td>
</tr>
<tr valign=top>
<td valign="TOP">
NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE
</td>
<td>
<span class="actxsmall">NETQUOTEVAR:PRODUCTDESCRIPTION&nbsp;NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON
<span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK</span>
</td>
</tr>
<tr valign=top>
<td colspan=2>
<span class="actxsmall">NETQUOTEVAR:PRICEEXPLANATION</span><br>
<b>NETQUOTEVAR:PRODUCTPRICE</b>
<span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
<span class="actxsmall">NETQUOTEVARATEPROMPT </span>
</td>
<tr valign=top>
<td colspan=2>
<span class="actxsmall">
NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br>
<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
</span>
NETQUOTEVAR:TEMPLATEENDXML
</td>
</tr>
</table>
NETQUOTEVAR:PRODUCTFORMEND
</td>

NETQUOTEVAR:NEXT

<!-- this is the second table item -->

NETQUOTEVAR:ENDSEPARATOR
<td width="50%" valign=top>
NETQUOTEVAR:PRODUCTFORMBEGIN
<table width="100%">
<tr valign=top>
<td valign="TOP" align="LEFT" colspan="2">
<a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="actregular"><b>NETQUOTEVAR:PRODUCTNAME</b></span></a>
<span class="actxsmall">NETQUOTEVAR:PRODUCTREF</span>
</td>
</tr>
<tr valign=top>
<td valign="TOP">
NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE
</td>
<td>
<span class="actxsmall">NETQUOTEVAR:PRODUCTDESCRIPTION&nbsp;NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON
<span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK</span>
</td>
</tr>
<tr valign=top>
<td colspan=2>
<span class="actxsmall">NETQUOTEVAR:PRICEEXPLANATION</span><br>
<b>NETQUOTEVAR:PRODUCTPRICE</b>
<span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
<span class="actxsmall">NETQUOTEVARATEPROMPT </span>
</td>
<tr valign=top>
<td colspan=2>
<span class="actxsmall">
NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br>
<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
</span>
NETQUOTEVAR:TEMPLATEENDXML
</td>
</tr>
</table>
NETQUOTEVAR:PRODUCTFORMEND
</td>
</tr>
NETQUOTEVAR:NEXT

<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

[Germ]

Thanks a lot Norman it worked well!

[memix]

Norman

I used your code for 2 products per row - thx.

The only issue is that there is a lot of white space between the left most product (of the two)and the left hand side of the web page. I have adjusted the value in the main product_body so that Table Width=620 but I need to be able to use more of the available page width.

How do I do this please.

[Ben]

Hi Jonathan

You may need to increase the width of the table in the primary template that encompasses NQV:BULK. A handy hint when trying to eradicate some of the blank spaces in tables is to turn the borders on for each table (i.e. <table border="1">) so you can locate where the space is coming from.

Ben

[memix]

Ben

Thx. Will try it later. By the way, the problem with this whole approach is that it changes the products sections always to show 2 per row. How do I set up 2 per row as a selectable template? Some products I want us one under the other.

[Ben]

Hi Jonathan

You can make changes to the templates and then save them under a different name - you could have a whole suite of section/product templates. Then you can select which one in the Section dialogue on the Layouts tab.

Ben