To navigate through website pages within one level, you can use "Back/Next" links with arrows pointing to the left and right or simply as links with pages' titles as shown in the picture below:
To add this kind of navigation, paste the following code snippet to the desired location in your website page template page.html:
{$prev = null} {$next = null} {$siblings = $wa->site->pages($page.parent_id)} {foreach $siblings as $sibling} {if $sibling.id == $page.id} {$next = $sibling} {/if} {if !$next && $sibling.id != $page.id} {$prev = $sibling} {/if} {if $next && $sibling.id != $page.id} {$next = $sibling} {break} {/if} {/foreach} {$last_sibling = end($siblings)} {if $last_sibling.id == $page.id} {$next = null} {/if} {if $prev || $next} {* template *} <hr> <table class="prev-next small"> <tr> {if $prev && !$next} <td class="arrow">←</td><td><a href="{$prev.url}">{$prev.name|escape}</a></td> {elseif $next && !$prev} <td></td><td class="half"></td> <td class="half next"><a href="{$next.url}">{$next.name|escape}</a></td><td class="arrow">→</td> {else} <td class="arrow">←</td><td class="half"><a href="{$prev.url}">{$prev.name|escape}</a></td> <td class="half next"><a href="{$next.url}">{$next.name|escape}</a></td><td class="arrow">→</td> {/if} </tr> </table> {/if} <style> table.prev-next { width: 100%; border: none; } table.prev-next td { vertical-align: top; border: none; } table.prev-next td.half { width: 49%; } table.prev-next td.next { text-align: right; } table.prev-next td.arrow { width: 1em; } </style>
The template is easily customizable. For example, you may delete the arrows ← and → or replace actual page titles {$prev.name|escape} and {$next.name|escape} with common captions back and next.
"Back/Next" links for product pages in an online store
Similar navigation links can be added for product pages in the Shop-Script 5 storefront to access "neighbor" products for which the same primary category is specified as for the currently viewed product. To do so, add a slightly modified version of the same code snippet to product page template file product.html:
{$prev = null} {$next = null} {$siblings = $wa->shop->products("category/`$product.category_id`")} {foreach $siblings as $sibling} {if $sibling.id == $product.id} {$next = $sibling} {/if} {if !$next && $sibling.id != $product.id} {$prev = $sibling} {/if} {if $next && $sibling.id != $product.id} {$next = $sibling} {break} {/if} {/foreach} {$last_sibling = end($siblings)} {if $last_sibling.id == $product.id} {$next = null} {/if} {if $prev || $next} {* template *} <hr> <table class="prev-next small"> <tr> {if $prev && !$next} <td class="arrow">←</td><td><a href="{$prev.frontend_url}">{$prev.name|escape}</a></td> {elseif $next && !$prev} <td></td><td class="half"></td> <td class="half next"><a href="{$next.frontend_url}">{$next.name|escape}</a></td><td class="arrow">→</td> {else} <td class="arrow">←</td><td class="half"><a href="{$prev.frontend_url}">{$prev.name|escape}</a></td> <td class="half next"><a href="{$next.frontend_url}">{$next.name|escape}</a></td><td class="arrow">→</td> {/if} </tr> </table> {/if} <style> table.prev-next { width: 100%; border: none; } table.prev-next td { vertical-align: top; border: none; } table.prev-next td.half { width: 49%; } table.prev-next td.next { text-align: right; } table.prev-next td.arrow { width: 1em; } </style>
0 comments
No comments yet.