Ссылки «назад-вперед» для страниц сайта

Для навигации по страницам одного уровня могут использоваться ссылки вида «назад-вперед» — например, в виде стрелок или просто ссылок с названиями страниц. Пример показан на рисунке:

Для организации такого вида навигации можно использовать следующий фрагмент кода, который необходимо добавить в нужное место шаблона, формирующего страницы сайта: 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}
    {* шаблон *}
    <hr>
    <table class="prev-next small">
        <tr>
            {if $prev && !$next}
                <td class="arrow">&larr;</td><td><a href="{$prev.url}">{$prev.name}</a></td>
            {elseif $next && !$prev}
                <td></td><td class="half"></td>
                <td class="half next"><a href="{$next.url}">{$next.name}</a></td><td class="arrow">&rarr;</td>
            {else}
                <td class="arrow">&larr;</td><td class="half"><a href="{$prev.url}">{$prev.name}</a></td>
                <td class="half next"><a href="{$next.url}">{$next.name}</a></td><td class="arrow">&rarr;</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>

При необходимости шаблон блока со ссылками легко доработать. Например, можно убрать стрелки &larr; и &rarr; или заменить названия страниц {$prev.name} и {$next.name} на надписи назад и вперед.

Ссылки «назад-вперед» для товаров в интернет-магазине

Аналогичную навигацию можно организовать и для страниц товаров для быстрого доступа к «соседним» товарам, для которых указана та же основная категория, что и для открытого в данный момент товара. Для этого в файл-шаблон отображения товара product.html добавьте немного измененный вариант этого же фрагмента кода:

{$prev = null}
{$next = null}
{$siblings = $wa->shop->products("category/`$product.category_id`", 0, 1000000)}
{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}
    {* шаблон *}
    <hr>
    <table class="prev-next small">
        <tr>
            {if $prev && !$next}
                <td class="arrow">&larr;</td><td><a href="{$prev.frontend_url}">{$prev.name}</a></td>
            {elseif $next && !$prev}
                <td></td><td class="half"></td>
                <td class="half next"><a href="{$next.frontend_url}">{$next.name}</a></td><td class="arrow">&rarr;</td>
            {else}
                <td class="arrow">&larr;</td><td class="half"><a href="{$prev.frontend_url}">{$prev.name}</a></td>
                <td class="half next"><a href="{$next.frontend_url}">{$next.name}</a></td><td class="arrow">&rarr;</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>

9 комментариев

  • +1
    Алексей Алексей 27 ноября 2014 17:44 #

    Спасибо за код!

  • +1

    Подскажите как это сделать в пределах одного окна? допустим у меня модальное окно (Быстрый просмотр) и при нажатии я хочу что бы окно не зарывалось а в нем просто менялось содержимое

    • +1
      Михаил Ушенин Михаил Ушенин 27 июля 2016 10:59 #

      Для этого потребуется дополнительное программирование, которое должно учитывать особенности реализации вашего всплывающего окна. Решение своего вопроса вы можете заказать у партнёров Webasyst.

    • +1
      SUM SUM 30 июля 2016 20:22 #

      Добрый день.

      Подскажите пожалуйста более точно и подробно, куда требуется вставить этот блок. Не получается, а очень хорошая функция.

      Заранее вам признателен.

    • +1
      anastasiamatveeva anastasiamatveeva 14 января 2018 15:38 #

      Добрый день, подскажите пожалуйста, можно ли в коде изменить шрифт для стрелок? Спасибо.

    • +1
      Elena Elena 12 августа 2019 20:09 #

      Ошиблись - метод возвращает только первые 500 товаров

      У всех последующих товаров нет ссылки "следующий товар" - есть только у всех одинаковая ссылка на предыдущий "500-й" товар

      • +1
        Михаил Ушенин Михаил Ушенин 26 августа 2019 15:29 #

        Попробуйте заменить

        {$siblings = $wa->shop->products("category/`$product.category_id`")}

        на

        {$siblings = $wa->shop->products("category/`$product.category_id`", 0, 10000)}

        Добавить комментарий

        Чтобы добавить комментарий, зарегистрируйтесь или войдите

        Раздел помощи работает на основе приложения «Хаб»