Acheiving Single Product Page in V7 | Help & Advice Please

[Wizzo]

Hello

I am trying to create a page of thumbnails of all products in a section so instead of seeing this page http://calmproductions.com/acatalog/..._Products.html you will see all the books on the site each one linking through to the product page.

I have looked around the KB and here and cant find anything that points me in the right direction.

Thanks

Glen

[Rich Brady]

What you are talking about is Single Product Pages I think?

Example:

http://www.vpiaonline.co.uk/acatalog/Duvet-Cover.html

You need to put each product inside it's own section.

Have a read of Lee's tutorial:

http://www.websitedesigned.co.uk/actinic-spp.htm

Download the Advanced User Guide:

http://www.actinic.co.uk/support/downloads.htm

If you get stuck, come back and let us know how far you've got.

[Wizzo]

Hi Rich

What I was looking for was something like this.

http://www.amazon.co.uk/

Is this something that can be done in V7?

Thanks

Glen

[Rich Brady]

I have no experience of V7, but assume that it still uses Sections/Sub-Sections/Products...

Create a new Section and drag one of your products into it. Can you change the Section layout to something like "Image above Section Link"?

[Wizzo]

Yes its all the same, sections, sub sections etc.

Do you know what template I would have to mod to do the list either like the one you suggested or like the amazon one?

Thanks

Glen

[Rich Brady]

In V8 and V9 if you click on a section there is a drop down menu under "Section Link Layout" with a number of different default layouts.

"Image above Section Link" is in there

[Wizzo]

I have just found this from the link you sent me.

http://www.atlanticshopping.co.uk/ac...ky-Chairs.html

This is what I am looking for

[Rich Brady]

You'll need some input from some one with V7 experience, because the SPP documention in AUG are for V8 and V9.

You need someone with V7 experience to jump in, so I've re-titled the thread for you. I hope you don't mind?

[Mark H]

Hi Glenn

First, as Rich says you need to create a sub-section for each product, and define a thumbnail image for each sub-section. Then go into:

Design, Options, Layouts tab

You will see a dropdown that allows you to select the Default Section Link Layout. We use "Image only, no text shown":

http://www.aquazuro.co.uk/acatalog/s...cessories.html

(the text you see for each thumbnail is actually part of the image).

There is no direct equivalent for the Amazon example, but you could select "Section name only - smaller size text", and edit the template so that the text appears under the image istead of to one side. This template is Act_SectionLine.html

If you then go to the Sections tab, you can define how many thumbnails to have by entering a number in the Column Count boxes, we use 5.

[Mark H]

LOL I really need to type faster

[Wizzo]

Right I have looked at Page 24 / 25 in the Advanced User Guide and have tried what it suggested and I ended up getting the same thing repeated across the page 3 times and down 3 rows.

I will put it up, please be aware that at the moment it is just showing text.


Thanks

Glen

[Wizzo]

Ok here is the link


http://www.calmproductions.com/acata..._Products.html

Here is the code which I modified from the AUG.

<!-- SectionLine HTML begin -->
<!-- Insert HTML for the beginning of a section title -->
<DIV ALIGN="CENTER">
<table width="520" border="0" cellpadding="0">
<tr>
<td><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="160">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"> <A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A> </TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="MIDDLE"> <A HREF="NETQUOTEVAR:SECTIONLINK"> <B>NETQUOTEVAR:SECTIONNAME</B></A><BR>
NETQUOTEVAR:SECTIONTEXT </TD>
</TR>
</TABLE></td>
<td><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="160">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"> <A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A> </TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="MIDDLE"> <A HREF="NETQUOTEVAR:SECTIONLINK"> <B>NETQUOTEVAR:SECTIONNAME</B></A><BR>
NETQUOTEVAR:SECTIONTEXT </TD>
</TR>
</TABLE></td>
<td><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="160">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"> <A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A> </TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="MIDDLE"> <A HREF="NETQUOTEVAR:SECTIONLINK"> <B>NETQUOTEVAR:SECTIONNAME</B></A><BR>
NETQUOTEVAR:SECTIONTEXT </TD>
</TR>
</TABLE></td>
</tr>
</table>
</DIV>
NETQUOTEVAR:NEXT
<!-- Insert HTML for the end of a section title -->
<!-- SectionLine HTML end -->

[Wizzo]

This is from the Advance User Guide for V7.

This was the code they give you.

<!-- SectionLine HTML begin -->
<!-- Insert HTML for the beginning of a section title -->
<DIV ALIGN="CENTER">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="160">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">
<A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER" VALIGN="MIDDLE">
<A HREF="NETQUOTEVAR:SECTIONLINK">
<B>NETQUOTEVAR:SECTIONNAME</B></A><BR>
NETQUOTEVAR:SECTIONTEXT
</TD>
</TR>
</TABLE>
</DIV>
NETQUOTEVAR:NEXT
<!-- Insert HTML for the end of a section title -->
<!-- SectionLine HTML end -->

And this is what they say to make them across the page, well this is what I thought it did.

The above code will create a section link of 160 pixels in width that, because of the table's cellpadding
of 5 pixels, will mean you can use thumbnail images of up to 150 pixels in width with this
template.
The next step is to lay out your section links within three columns on the page.
Note: you can lay them out within as many columns as you want, it is just that the above template is
suitable for section links that are laid out in three columns.
In order to set the default number of columns throughout the site, go to 'Design Options | Sections'
and within the 'Default Location and Arrangement of Section Lists' area, set the 'First Row Column
Count' and 'Subsequent Row Column Count' to '3'.

Thanks

Glen

[Wizzo]

Trust me to make things complicated.

Thanks

Glen