Для навигации по страницам одного уровня могут использоваться ссылки вида «назад-вперед» — например, в виде стрелок или просто ссылок с названиями страниц. Пример показан на рисунке:
Для организации такого вида навигации можно использовать следующий фрагмент кода, который необходимо добавить в нужное место шаблона, формирующего страницы сайта: 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`", 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">←</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>
9 комментариев
Спасибо за код!
Подскажите как это сделать в пределах одного окна? допустим у меня модальное окно (Быстрый просмотр) и при нажатии я хочу что бы окно не зарывалось а в нем просто менялось содержимое
Для этого потребуется дополнительное программирование, которое должно учитывать особенности реализации вашего всплывающего окна. Решение своего вопроса вы можете заказать у партнёров Webasyst.
Добрый день.
Подскажите пожалуйста более точно и подробно, куда требуется вставить этот блок. Не получается, а очень хорошая функция.
Заранее вам признателен.
Точное расположение зависит от устройства вашей темы дизайна. Более подробную помощь по редактированию программного кода вы можете получить от партнёров Webasyst или службы поддержки Webasyst.
Добрый день, подскажите пожалуйста, можно ли в коде изменить шрифт для стрелок? Спасибо.
Можно. Используйте для этого CSS.
Ошиблись - метод возвращает только первые 500 товаров
У всех последующих товаров нет ссылки "следующий товар" - есть только у всех одинаковая ссылка на предыдущий "500-й" товар
Попробуйте заменить
{$siblings = $wa->shop->products("category/`$product.category_id`")}на
{$siblings = $wa->shop->products("category/`$product.category_id`", 0, 10000)}