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

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

Для организации такого вида навигации можно использовать следующий фрагмент кода, который необходимо добавить в нужное место шаблона, формирующего страницы сайта: 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`")}
{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>

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

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

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

  • +1
    Николай Дьячков Николай Дьячков 8 апреля 2015 02:51 #

    Очень нужно такое же только для фотографий когда входишь в товар и нажимаешь на фотографию, идеально чтобы были стрелки.

    • +1
      Алексей Алексей Webasyst 8 апреля 2015 07:22 #

      Во многих темах это реализовано через JS - carousel и lightbox. По стрелкам меняют изображение товара.

      • +1
        Николай Дьячков Николай Дьячков 9 апреля 2015 16:22 #

        Да, но у меня Default 2.0 с измененным дизайном. Кроме картинок всё отлично. Как сделать то?:)

        Вот мне кажется гдето тут: (а что поменять я не знаю :((( )


        {if $product.images}

        <figure class="product-gallery">

        <!-- main image -->

        <div class="image" id="product-core-image">

        <div class="corner top right">

        {$wa->shop->badgeHtml($product.badge)}

        </div>

        <a href="{$wa->shop->productImgUrl($product, '970')}">

        {$wa->shop->productImgHtml($product, '750', [ 'itemprop' => 'image', 'id' => 'product-image', 'alt' => $product.name|escape ])}

        </a>

        <div id="switching-image" style="display: none;"></div>

        </div>

        <!-- thumbs -->

        {if count($product.images) > 1}

        <div class="more-images" id="product-gallery">

        {foreach $product.images as $image}

        <div class="image{if $image.id == $product.image_id} selected{/if}">

        <a id="product-image-{$image.id}" href="{$wa->shop->productImgUrl(['id'=> $product.id, 'image_id' => $image.id, 'ext' => $image.ext], '970')}" class="swipebox">

        {$wa->shop->productImgHtml(['id'=> $product.id, 'image_id' => $image.id, 'ext' => $image.ext, 'image_desc' => $image.description], '96x96', ['alt' => $image.description|escape])}

        </a>

        </div>

        {/foreach}

        </div>

        {/if}

        </figure>

        {/if}

      • +2

        Очень интересно, спасибо.

        Осталось чуть чуть и будет идеал! )) По рекомендациям Гугла, мета разметку rel=”next” и rel=”prev” как бы то же реализовать?

        • +1

          Реализовать это средствами темы дизайна в принципе можно, но получится неэффективно, т. к. один и тот же SQL-запрос (для получения "соседних" страниц) на каждой странице сайта будет выполняться дважды (в файле index.html для rel и в файле для отображения страницы для отображения ссылок), а это нехорошо. Как сделать, чтобы он выполнялся только один раз, я не вижу. Подозреваю, что для этого потребуется только написание PHP-класса, а это уже выходит за рамки редактирования дизайна. Если удастся найти хороший способ реализовать требуемое, обновим статью, спасибо за предложение.

        • +1
          wanws.ru wanws.ru Партнер-эксперт 18 августа 2015 14:34 #

          В ссылках для товаров ошибка есть. Если товар не в одной категории, а в нескольких, то дальше может листать по другой категории.

          • +1
            wanws.ru wanws.ru Партнер-эксперт 18 августа 2015 15:41 #

            Да и с хлебными крошками тоже самое при смешанных урлах, заходишь в одну категорию, а пишет другую, ну конечно не на всех товарах.

          • +1
            Elena Elena 3 июня 2016 02:27 #

            А как сделать перелинковку между категориями ?


          • +1

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

            • +1

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

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

              Добрый день.

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

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

            • +1
              Victorovich Victorovich 20 сентября 2016 16:21 #

              Добавил код. Работает. Кто бы еще подсказал код для навигации по страницам товаров горячими клавишами Ctrl → ← Ctrl

            • +1
              ClassicCode ClassicCode 30 ноября 2016 18:37 #

              А как получить фото товаров здесь?


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

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

            • +1
              Elena Elena 5 августа 2019 18:46 #

              Добрый день!

              Код работает, но вот совсем недавно обнаружили, что перелинковка происходит внутри категории, но ограничена примерно 250-ю товарами (!!!???) ..Т.е. 250-й- товар ссылается не на 251, а на 1-й.

              Интересно и то, что во всех следующих товарах (т.е. в 251-м, 252-м и т.д.) нет ссылки на следующий товар, но есть на предыдущий товар и у всех этот товар 250-й....

              У всех товаров после 250-го "предыдущий товар" - это 250-й !!!???

              Где-то ограничение стоит на количество товаров на перелинковку внутри категории?

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

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

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

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

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

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

                на

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

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

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