Skip to main content
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 }}