Custom Page Templates: Page Links
There are two separate parts of a custom page template for page links: defining how page links look, and setting where links will be displayed in the current template.
Defining the Link to The Page
You must define how links to a page will look at the top of your custom page template, before the [-- DEFINE PAGE --] tag. This is a critical area of template design, because the look and layout of page links should work with the rest of your layout and provide easy navigation.
By default, this link definition will be used for any page that uses the template, wherever links to those pages appear. In other words, if page A is built with template A, the links to page A will be built with the link definition from template A, even if they appear on a page built with a different template. You can override this default action and specify that all links on a page be built with the same template, regardless of what templates are associated with those pages.
aMerchants have quite a few options that they can set for page links, and you can choose to use or ignore any of them in your template:
- [-- PAGE.LinkName --]
The name for the link, which is often the same as the page name. - [-- PAGE.LinkGraphic --]
[-- PAGE.LinkGraphic Remove_HTML --]
[-- IMAGE PAGE.LinkGraphic --]
A graphic -- usually small -- that is a link to the page. The merchant may choose to use just a link name, or a graphic and a link name, or just a graphic as the link. - [-- PAGE.LinkText --]
Additional descriptive text that the merchant may want to appear next to the link name and graphic. - [-- PAGE.TextWrap --]
Determines whether a long link text is supposed to wrap under the link graphic or not. - [-- PAGE.Name --]
You may want to use the page name as the default link for the page if none of the other link fields are defined. - [-- PAGE.LinkColor --]
[-- PAGE.VisitedLinkColor --]
[-- PAGE.ActiveLinkColor --]
You may want to use the merchant-defined colors for page links, or you may want to just use them for product links, or you may want to ignore them entirely.
Because of the number of elements to consider, the page link portion of a template can be rather complicated. You may want to ignore some of the elements, such as the link graphic or the link text.
Putting Links on the Page
Putting links on your page can be much easier than defining how the links will look. At its simplest, you can use this loop:
- [-- LOOP LINKS --]
<br>[-- LINK --]
[-- END_LOOP LINKS --]
You will probably put some HTML tags in and around the loop tags to format the links to fit your page layout.
- Every time the template parser cycles through the loop, it will replace the [-- LINK --] tag with the link definition for the page that the link is pointing to.
- You don't have to know what page links are assigned to the page; the [-- LOOP LINKS --] tags cycle through all of them.
- You can put all of the HTML formatting for a page link in the [-- DEFINE LINK_TO_PAGE --] section, or you can put some inside the loop. However you split it up, both pieces have to work together to give the desired effect.
- Most likely, you'll want all of the links on a page to look the same, and that will happen if all of the pages use the same template. However, just to be sure, you can specify which template to use for the links in the [-- LINK --] tag.
Page Link Example 1
This example template uses the link name for the page link if it's defined, otherwise it uses the page name. It completely ignores the link graphic, link text, and text wrap settings. The [-- LOOP LINKS --] section contains a <br> tag to put each link on it's own line. You would need to replace mytemplatename in the [-- LINK --] tag with the name of your template.
-
[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- Page.FileName --]">
[-- IF PAGE.LinkName --]
[-- PAGE.LinkName --]
[-- ELSE --]
[-- PAGE.Name --]
[-- END_IF --]
</a>
[-- END_DEFINE LINK_TO_PAGE --]
[-- DEFINE PAGE --]
<html>
<head>
<title>[-- PAGE.Title --]</title>
</head>
<body>
[-- IF PAGE.DisplayPageHeader --][-- HEADER --][-- END_IF --]
[-- IF PAGE.DisplayGraphic --]
[-- IF PAGE.Graphic --][-- PAGE.Graphic --][-- END_IF --]
[-- END_IF --]
[-- IF PAGE.DisplayName --]<h1>[-- PAGE.Name --]</h1>
[-- END_IF --]
[-- PAGE.Text1 --]
<p>
[-- LOOP LINKS --]
[-- LINK mytemplatename --]<br>
[-- END_LOOP LINKS --]
</p>
<!-- Products will go here -->
[-- PAGE.Text2 --]
[-- PrevNext --]
[-- IF PAGE.DisplayPageFooter --][-- FOOTER --][-- END_IF --]
[-- PAGE.Text3 --]
</body>
</html>
[-- END_DEFINE PAGE --]
Page Link Example 2
This second example template uses the link name, link graphic and link text. It uses IF tags to test whether each field has a value before putting it on the page. It also uses an embedded CSS style sheet to apply the link colors set by the merchant. It ignores the text wrap settings.
-
[-- DEFINE LINK_TO_PAGE --]
[-- IF PAGE.LinkGraphic --]
<a class="pagelink" href="[-- OUTPUT_DIRECTORY_URL --]/[-- Page.FileName --]"><img [-- PAGE.LinkGraphic REMOVE_HTML --] align="middle"></a>
[-- END_IF --]
[-- IF PAGE.LinkName --]
<a class="pagelink" href="[-- OUTPUT_DIRECTORY_URL --]/[-- Page.FileName --]">[-- PAGE.LinkName --]</a>
[-- END_IF --]
[-- IF PAGE.LinkText --]
<br><small>[-- PAGE.LinkText --]</small>
[-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]
[-- DEFINE PAGE --]
<html>
<head>
<title>[-- PAGE.Title --]</title>
</head>
<body>
[-- IF PAGE.DisplayPageHeader --][-- HEADER --][-- END_IF --]
[-- IF PAGE.DisplayGraphic --]
[-- IF PAGE.Graphic --][-- PAGE.Graphic --][-- END_IF --]
[-- END_IF --]
[-- IF PAGE.DisplayName --]<h1>[-- PAGE.Name --]</h1>[-- END_IF --]
[-- PAGE.Text1 --]
<p>
[-- LOOP LINKS --]
[-- LINK mytemplatename --]<br>
[-- END_LOOP LINKS --]
</p>
<!-- Products will go here -->
[-- PAGE.Text2 --]
[-- PrevNext --]
[-- IF PAGE.DisplayPageFooter --][-- FOOTER --][-- END_IF --]
[-- PAGE.Text3 --]
</body>
</html>
[-- END_DEFINE PAGE --]
Page Link Example 3
The second example template still has some problems. What if the merchant didn't set a link name or graphic? There isn't any code to use the page name instead. What about text wrap? Text wrap can make the code more complicated.
The code below is not a complete page template. It is just code for defining a page link that can handle all of the possible combinations. This is the same code that is used by the ShopSite Rounded and Sidebar templates, and it already exists as an "include" file in ShopSite. If you'd like to use this code in your template, you can either copy it from this page and paste it into your template, or just use an [-- INCLUDE --] tag, like this:
- [-- DEFINE LINK_TO_PAGE --]
[-- INCLUDE PAGE-Link PROCESS --]
[-- END_DEFINE LINK_TO_PAGE --]
Here's an explanation of the logic:
- Set a variable to track when a link is actually put on the page.
- If text wrap is off and if there is a link graphic, create a table and put the link graphic in the first cell. Create the second cell, but don't put anything in it yet. (The two cells keep the graphic and link text separate so the text does not wrap under the graphic.) Set the variable to Yes to show that a link was placed on the page.
- If text wrap is on and there is a link graphic, put the graphic on the page. Set the variable to Yes.
- If there is a link name, put it on the page and set the variable to Yes.
- If there is link text and the variable has been set to Yes, put the link text on a new line.
- If there is link text and the variable is still set to No, make the text a link to the page.
- If the variable is still set to No, that means that there is no link name, link graphic, or link text defined, so use the page name as a link.
- If text wrap is off and there is a link graphic, close the second cell and the table.