Anchor links to products at top of page

[timiagama]

Hi

Is there a way put anchor links at the top of a section so that the user can click on them and scroll down to a product further down on the page?

Timi

[wjcampbe]

There should already be a link created by Actinic that contains the product number which shows when you click on the product in the Actinic Catalog tree in the the programme interface.

If you add a text only fragment to the top of the page with links like <a href="#a123">Product name</a> this will take you to the product number 123 - note the "a" added in front of the product number - this is essential.

[NormanRouxel]

This can be automated.

Although the list of products isn't known until the page has been loaded we can collect the names and anchors as each product is displayed and show them at the top of the pageAdding a list of product links at the top of a page.

In Act_ProductBody.html add the following above the NETQUOTEVAR:PRODUCTBULK line


<script language=JavaScript>
<!--
var productlinks = '';
//-->
</script>
<tr><td colspan=3><div id="prodlinks"></div></td></tr>


Add the following below the NETQUOTEVAR:PRODUCTBULK line


<script language=JavaScript>
<!--
if (productlinks) document.getElementById("prodlinks").innerHTML = productlinks;
//-->
</script>


In all your Product templates, add the following immediately after every occurrence of the NETQUOTEVAR:PRODUCTFORMBEGIN line


<script language=JavaScript>
<!--
productlinks += '<a href="#NETQUOTEVAR:PRODUCTANCHOR">NETQUOTEVAR:PRODUCTNAME</a> ';
//-->
</script>

[timiagama]

Thanks Norman. Very interesting approach. I'll try this and see.

Thanks guys.

Timi

[NormanRouxel]

And it would be easy to add some code that counts the products and only displays the links if the count was greater than a certain value.

[timiagama]

Based on Norman's ideas above here is some fully documented code to help anyone else who has the same challenge.

<!--
Start of product anchor code.
This code block must go in the Overall Layout used by the Section.

It defines the productlinks variable and associated DIV allow
FDT to value to show links to the product anywhere on the page.
Move this block to anyplace you want it on the page.

NOTES:
1. The code that captures the anchors is in the Product Layout because
we can't tell what the products are until the page is generated.
2. The code that populates the DIV appears anywhere after NETQUOTEVAR:BULK.
-->
<script language=JavaScript>
<!--
var productlinks = '';
//-->
</script>
<p><div id="prodlinks"></div></p>
<!--
Note: This block can be moved anywhere within the Overall Layout
End of product anchor code.
-->



<!--
Start of product anchor code.
This code block must go in the Overall Layout used by the Section.

This is the code that populates the DIV of anchor links to products
shown on this page (if required).

NOTE:
This code MUST always appear AFTER the NETQUOTEVAR:BULK instruction
because the productlinks variable is populated in the Product Layout.
-->
<script language=JavaScript>
<!--
if (productlinks)
{
document.getElementById("prodlinks").innerHTML = productlinks;
}
//-->
</script>
<!--
End of code that populates the product anchor DIV.
-->




<!--
Start of product anchor code.
This code block must go in each and every Product Layout used by the Section.

This block of code captures a list of anchors to the Products in this Section so
they can be displayed by the Overall Layout of the page. It is in the
product layout because we can't tell what the products are until
the page is generated.

NOTE:
This code MUST always appear AFTER the NETQUOTEVAR:PRODUCTFORMBEGIN instruction
-->
<script language=JavaScript>
<!--
productlinks += '<a href="#NETQUOTEVAR:PRODUCTANCHOR">NETQUOTEVAR:PRODUCTNAME</a><br> ';

//-->
</script>
<!--
End of code that captures list of product anchors.
-->

[NormanRouxel]

Timi, best repost the above within [C O D E] and [/ C O D E] markers (type them without the spaces) as the forum may be displaying new lines that will break the code.

[timiagama]

Thanks Norman, here it is again.


<!--
Start of product anchor code.
This code block must go in the Overall Layout used by the Section.

It defines the productlinks variable and associated DIV allow
FDT to value to show links to the product anywhere on the page.
Move this block to anyplace you want it on the page.

NOTES:
1. The code that captures the anchors is in the Product Layout because
we can't tell what the products are until the page is generated.
2. The code that populates the DIV appears anywhere after NETQUOTEVAR:BULK.
-->
<script language=JavaScript>
<!--
var productlinks = '';
//-->
</script>
<p><div id="prodlinks"></div></p>
<!--
Note: This block can be moved anywhere within the Overall Layout
End of product anchor code.
-->



<!--
Start of product anchor code.
This code block must go in the Overall Layout used by the Section.

This is the code that populates the DIV of anchor links to products
shown on this page (if required).

NOTE:
This code MUST always appear AFTER the NETQUOTEVAR:BULK instruction
because the productlinks variable is populated in the Product Layout.
-->
<script language=JavaScript>
<!--
if (productlinks)
{
document.getElementById("prodlinks").innerHTML = productlinks;
}
//-->
</script>
<!--
End of code that populates the product anchor DIV.
-->




<!--
Start of product anchor code.
This code block must go in each and every Product Layout used by the Section.

This block of code captures a list of anchors to the Products in this Section so
they can be displayed by the Overall Layout of the page. It is in the
product layout because we can't tell what the products are until
the page is generated.

NOTE:
This code MUST always appear AFTER the NETQUOTEVAR:PRODUCTFORMBEGIN instruction
-->
<script language=JavaScript>
<!--
productlinks += '<a href="#NETQUOTEVAR:PRODUCTANCHOR">NETQUOTEVAR:PRODUCTNAME</a><br> ';
//-->
</script>
<!--
End of code that captures list of product anchors.
-->

[stewart]

I am trying to put anchor links to my products and I saw Norman's code and I tried this and it worked fine for me, but I would link to know if I can put it down the left hand side of my site which is the section list?

Stewart

[Bruce]

Stewart,

I honestly cant see how it will work in that location. You may want to give it a try to see if it will work by using the javascript method to layout the section list. I would however suggest you make a snapshot of the site as well as a backup just in case it goes wrong.

Kind regards,