Adding "Back/Next" links to website pages

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

    Add comment

    To add a comment please sign up or login