Browsing - Navigation between products

With the help of the browse function, visitors can navigate directly from the product detail page to the previous or next product within the current category. The navigation also shows the position of the product in the category, for example “4/22”.

Modules

The following modules are relevant for the integration:

$wsViews - Current page information and product context
$wsNavigation - Navigation path (breadcrumb), provides the current category
$wsCategories - Loads all products of a category

Frontend integration

The following code block is inserted in components/breadcrumb.htm directly after the closing </nav> tag of the existing breadcrumb.

The browse function only appears on product pages. On all other pages (category, search, etc.) the block is not displayed.

{{ if $wsViews.current.info.product }}
    {{ var $cProductId = $wsViews.current.info.product.base.id
                         | ifNull($wsViews.current.info.product.id) }}

    {{ var $cNavCatId = "" }}
    {{ foreach $cPart in $wsNavigation.path }}
        {{ if $cPart.type == "category" }}
            {{ $cNavCatId = $cPart.object.id }}
        {{ /if }}
    {{ /foreach }}

    {{ if $cNavCatId }}
        {{ var $cCatProducts = $wsCategories.loadProducts($cNavCatId) }}
        {{ var $cPrevProduct = null }}
        {{ var $cNextProduct = null }}
        {{ var $cCurrentPos = 0 }}
        {{ var $cCounter = 0 }}
        {{ var $cTotal = len($cCatProducts) }}

        {{ foreach $cCatProduct in $cCatProducts }}
            {{ var $cCompareId = $cCatProduct.base.id | ifNull($cCatProduct.id) }}
            {{ if $cCompareId == $cProductId }}
                {{ $cCurrentPos = $cCounter }}
            {{ /if }}
            {{ $cCounter = $cCounter + 1 }}
        {{ /foreach }}

        {{ if $cCurrentPos > 0 }}
            {{ $cPrevProduct = $cCatProducts[$cCurrentPos - 1] }}
        {{ /if }}
        {{ if $cCurrentPos < $cTotal - 1 }}
            {{ $cNextProduct = $cCatProducts[$cCurrentPos + 1] }}
        {{ /if }}

        <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 12px;">

            {{ if $cPrevProduct }}
                <a href="{{= $wsViews.url('Product', {productId: $cPrevProduct.id}) }}"
                   aria-label="Previous product"
                   style="display: inline-flex; align-items: center; justify-content: center;
                          width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 4px;
                          text-decoration: none; color: inherit;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
                            5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </a>
            {{ else }}
                <span style="display: inline-flex; align-items: center; justify-content: center;
                             width: 32px; height: 32px; border: 1px solid #eee; border-radius: 4px;
                             color: #ccc; cursor: not-allowed;"
                      aria-disabled="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
                            5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </span>
            {{ /if }}

            <span style="font-size: 13px; color: #888;">
                {{= $cCurrentPos + 1 }}/{{= $cTotal }}
            </span>

            {{ if $cNextProduct }}
                <a href="{{= $wsViews.url('Product', {productId: $cNextProduct.id}) }}"
                   aria-label="Next product"
                   style="display: inline-flex; align-items: center; justify-content: center;
                          width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 4px;
                          text-decoration: none; color: inherit;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1
                            0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </a>
            {{ else }}
                <span style="display: inline-flex; align-items: center; justify-content: center;
                             width: 32px; height: 32px; border: 1px solid #eee; border-radius: 4px;
                             color: #ccc; cursor: not-allowed;"
                      aria-disabled="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1
                            0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </span>
            {{ /if }}

        </div>
    {{ /if }}
{{ /if }}

Further links

Checkout process PDF views

⌘I

Frontend

The basics

Getting started

Feature overview

Examples

Reference – Actions

Reference – Language

Reference – Modules

Browsing - Navigation between products

Modules

Frontend integration

Further links

​Modules

​Frontend integration

​Further links

Modules

Frontend integration

Further links