Product Sections on the Home Page

[Widdy]

Hello,

I would like to list the product sections (from acatalog/index.html) on my home page, has anybody done this in version 8, I have seen a post about using a redirect to send people straight to the acatalog/index.html but I would rather avoid that route and just put the section links on my home page.

Any help would be much appreciated.

Ian

[cdicken]

Try going to 'Design | Library | Layouts' and open the 'Web Page Inner Layout' group. Edit 'Standard Brochure Page Bulk' and copy and paste the following code into it:

<actinic:block type="TopLevelSectionList" >
		<div class="product_list">
			<div class="image_product"><a href="<Actinic:Variable Name="SectionPageName"/>" target="_self"><img alt="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /></a></div>
			<div><h3 class="product"><a href="<actinic:variable name="SectionPageName"/>" target="_self"><actinic:variable name='SectionName'/></a></h3></div>
			<p><actinic:variable name='SectionDescription'/></p>
		</div>
</actinic:block>

This is an 'advanced ist' which can insert list code anywhere into your design without having to go through the hassle of creating new layouts and lists.

They are explained in more depth in the Advanced User Guide.

[Widdy]

Thankyou,

I had a quick look at that, It didn't lay out properly and it appears on all brochure pages, but I should be able to sort it out from there, thank you

Ian

[stupidlammer]

with the code my layout is messed up. how do i organize this with "section link within a box" layout?

[cdicken]

1. Right-click on 'Standard Top Level Section List' in the library and select 'New Layout'. Call it 'Front Page Section List'.
2. Make all the list layout code for this section list (i.e. 'Start of List', 'End of List' etc.) .the same as the 'Standard Sub Section List' (within the 'Sub Section Lists' group). You'll need ot use copy and paste for this.
3. In the main layout code window for the list, instead of having just the pink 'TopLevelSectionLink' variable, replace this with all the layout code for the 'Section Link Within a Box' layout.
4. Now in the 'Standard Brochure Page Bulk' layout (within the 'Web Page Inner Layout' group) in the library, insert the following code:

   <actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
   	<actinic:variable name="TopLevelSectionList" value="Front Page Section List" />
   </actinic:block>

That should do it. If you are not sure about any of my instructions on this, you can read up about lists and layouts in the main help.

[stupidlammer]

Thanks Chris for the useful information.

Next issue is, how do I tweak the homepage layout such that the column count for section lists are 3 per row, such that the images are centralised within the box and description is not displayed?

also when there are 2/3 columns per row, how do i ensure they space out equally?

Thanks for the help in advance.

[cdicken]

I'd me more keen for you to look at the section of help called 'Content Lists' rather than me just giving you step by step instructions, as that will help you when you come to design another list.

Here are some pointers anyway...

3 per row

Change the No of items in the 'Middle Rows' to '3'. You can probably set the 'First Row' to 'Not used',

such that the images are centralised within the box

Edit the <td> tags in the 'Before Item' fields to include align="center"

and description is not displayed?

Edit the section link layout code to remove 'SectionDescription'

also when there are 2/3 columns per row, how do i ensure they space out equally?

Do you mean so that they always stay the same size? That's done automatically.

[stupidlammer]

I'd me more keen for you to look at the section of help called 'Content Lists' rather than me just giving you step by step instructions, as that will help you when you come to design another list.

Here are some pointers anyway...Change the No of items in the 'Middle Rows' to '3'. You can probably set the 'First Row' to 'Not used', Edit the <td> tags in the 'Before Item' fields to include align="center"Edit the section link layout code to remove 'SectionDescription'

Do you mean so that they always stay the same size? That's done automatically.

Ive actually read the help already, but i still dont quite get it. With some assistance here and hands on, I guess it will accelerate my learning. Having said that, i really appreciate the help im getting here.

This is what ive done:
1. New layout made: "front page section list" has the same layout codes as standard sub section list (including start/end of list)

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="thinborder1">
   <tr>
      <td align="left" height="20" bgcolor="<actinic:variable name="Palette1" />"><span class="boxheading"><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" class="boxlink"><actinic:variable name="SectionName" /></a></span></td>
   </tr>
   <tr>
      <td>
         <table border="0" cellspacing="0" cellpadding="10">
            <tr> 
               <td valign="top">
                  <a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self">
                     <img alt="<actinic:variable name="SectionName" encoding="strip"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" />
                  </a>
               </td>
               <td align="left" valign="top">
                
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

2. "standard brochure page bulk" has the same code as the one mentioned above:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
	<actinic:variable name="TopLevelSectionList" value="Front Page Section List" />
</actinic:block>

These are the issues i face:

1. i edited "front page section list" layout settings:
=No. of items
- first row - not used
- middle row - 3
- last row - not used

Despite this, my home page layout is still 1 item per row.

2. you mentioned:

Edit the <td> tags in the 'Before Item' fields to include align="center"

where in my code do i do this?

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="thinborder1">
   <tr>
      <td align="left" height="20" bgcolor="<actinic:variable name="Palette1" />"><span class="boxheading"><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" class="boxlink"><actinic:variable name="SectionName" /></a></span></td>
   </tr>
   <tr>
      <td>
         <table border="0" cellspacing="0" cellpadding="10">
            <tr> 
               <td valign="top">
                  <a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self">
                     <img alt="<actinic:variable name="SectionName" encoding="strip"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" />
                  </a>
               </td>
               <td align="left" valign="top">
                
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

[cdicken]

Cool - it looks like you are making progress.

1. i edited "front page section list" layout settings:
=No. of items
- first row - not used
- middle row - 3
- last row - not used

Despite this, my home page layout is still 1 item per row.

I'll need to see your work in progress to advise further. Could I see a URL please?

2. you mentioned:

Edit the <td> tags in the 'Before Item' fields to include align="center"

where in my code do i do this?

Within the grid in the 'Edit Rows/Columns' tab of the list. The 'Before Item' fields should contain

<td align="center">

and the 'After Item' fields should contain

</td>

[stupidlammer]

ok ive made some progress.

this is the image of the layout (its a trial layout, quite ugly)



1. the cart details (denoted by black arrow) has had its width reduced and is stuck with the main window. how do i adjust this back to what it used to be?

2. How do i make the spaces (denoted by the red arrows) be similiar in width? with the contents (section images in the box) centralised.

[cdicken]

It's that outer table that's squishing the shopping cart, but the outer bit isn't anything to do with the code I have given you. You need to find the code for that outer table and either delete it, or else change the width of it, and set the 'align' for the main table cell in that outer table to 'center'

[stupidlammer]

It's that outer table that's squishing the shopping cart, but the outer bit isn't anything to do with the code I have given you. You need to find the code for that outer table and either delete it, or else change the width of it, and set the 'align' for the main table cell in that outer table to 'center'

thanks. I got the front page ironed out. Which layout in the library should I edit such that my sections/subsections will exhibit the same properties? from there i should be able to handle it.

[cdicken]

I think you need to edit the 'Standard Sub Section List' layout, which is in the 'Section Lists' group in the library.

[MAB]

Did the trick for me - thanks.

Regards
Michael