View Full Version : Product Layout
Germ
16-Jan-2003, 06:27 PM
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
:confused:
garyhay
16-Jan-2003, 06:40 PM
Cant see the site you mention 404
do you mean like this
see attached
Artisan
16-Jan-2003, 07:02 PM
> > 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
16-Jan-2003, 07:10 PM
sorry site is http://www.robertdyas.co.uk/
basically it is like Gary said
- Product 1 - - Product 2 -
- Product 3 - - Product 4 -
garyhay
16-Jan-2003, 07:41 PM
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
17-Jan-2003, 09:45 AM
Please I will appreciate it:rolleyes:
Germ
18-Jan-2003, 05:58 PM
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
18-Jan-2003, 06:17 PM
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
18-Jan-2003, 06:27 PM
Sorry i forgot to get back to you. Keep forgetting to subscibe to the threads.
At home again sorry
NormanRouxel
18-Jan-2003, 07:28 PM
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 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">NETQUOTEVAR:DATEPROMPT </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 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">NETQUOTEVAR:DATEPROMPT </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
19-Jan-2003, 09:03 PM
Thanks a lot Norman it worked well!
memix
14-Jul-2003, 09:26 AM
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.
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
15-Jul-2003, 09:50 AM
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.
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
memix
16-Jul-2003, 12:15 PM
Ben
Thanks. Do I have to update any .ini files so that the GUI shows the new templates?
chrisbrown
16-Jul-2003, 12:21 PM
Yep!
ProductTemplates.ini and/or the other xxxxTemplates.ini files in your Site1 (or whatever) folder. You can add peviews as well if you like.
You only need to add the templates into the .ini file if you want it to appear in the dropdown list. Otherwise, you can click Select and then Browse to find the template file in your site folder.
Ben
vBulletin® v3.8.4, Copyright ©2000-2012, Jelsoft Enterprises Ltd.