Для навигации по страницам одного уровня могут использоваться ссылки вида «назад-вперед» — например, в виде стрелок или просто ссылок с названиями страниц. Пример показан на рисунке:
Для организации такого вида навигации можно использовать следующий фрагмент кода, который необходимо добавить в нужное место шаблона, формирующего страницы сайта: 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">←</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">→</td>
{else}
<td class="arrow">←</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">→</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>При необходимости шаблон блока со ссылками легко доработать. Например, можно убрать стрелки ← и → или заменить названия страниц {$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">←</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">→</td>
{else}
<td class="arrow">←</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">→</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>
17 комментариев
Спасибо за код!
Очень нужно такое же только для фотографий когда входишь в товар и нажимаешь на фотографию, идеально чтобы были стрелки.
Во многих темах это реализовано через JS - carousel и lightbox. По стрелкам меняют изображение товара.
Да, но у меня 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}
Очень интересно, спасибо.
Осталось чуть чуть и будет идеал! )) По рекомендациям Гугла, мета разметку rel=”next” и rel=”prev” как бы то же реализовать?
Реализовать это средствами темы дизайна в принципе можно, но получится неэффективно, т. к. один и тот же SQL-запрос (для получения "соседних" страниц) на каждой странице сайта будет выполняться дважды (в файле index.html для rel и в файле для отображения страницы для отображения ссылок), а это нехорошо. Как сделать, чтобы он выполнялся только один раз, я не вижу. Подозреваю, что для этого потребуется только написание PHP-класса, а это уже выходит за рамки редактирования дизайна. Если удастся найти хороший способ реализовать требуемое, обновим статью, спасибо за предложение.
В ссылках для товаров ошибка есть. Если товар не в одной категории, а в нескольких, то дальше может листать по другой категории.
Да и с хлебными крошками тоже самое при смешанных урлах, заходишь в одну категорию, а пишет другую, ну конечно не на всех товарах.
А как сделать перелинковку между категориями ?
Подскажите как это сделать в пределах одного окна? допустим у меня модальное окно (Быстрый просмотр) и при нажатии я хочу что бы окно не зарывалось а в нем просто менялось содержимое
Для этого потребуется дополнительное программирование, которое должно учитывать особенности реализации вашего всплывающего окна. Решение своего вопроса вы можете заказать у партнёров Webasyst.
Добрый день.
Подскажите пожалуйста более точно и подробно, куда требуется вставить этот блок. Не получается, а очень хорошая функция.
Заранее вам признателен.
Точное расположение зависит от устройства вашей темы дизайна. Более подробную помощь по редактированию программного кода вы можете получить от партнёров Webasyst или службы поддержки Webasyst.
Добавил код. Работает. Кто бы еще подсказал код для навигации по страницам товаров горячими клавишами Ctrl → ← Ctrl
А как получить фото товаров здесь?
Добрый день, подскажите пожалуйста, можно ли в коде изменить шрифт для стрелок? Спасибо.
Можно. Используйте для этого CSS.