Zum Hauptinhalt springen
Mithilfe der Blätterfunktion können Besucher auf der Produktdetailseite direkt zum vorherigen oder nächsten Produkt innerhalb der aktuellen Kategorie navigieren. Die Navigation zeigt außerdem die Position des Produkts in der Kategorie an, beispielsweise “4/22”.

​
Module

Folgende Module sind für die Integration relevant:
  • $wsViews - Aktuelle Seiteninformationen und Produktkontext
  • $wsNavigation - Navigationspfad (Breadcrumb), liefert die aktuelle Kategorie
  • $wsCategories - Lädt alle Produkte einer Kategorie

​
Frontend-Integration

Der folgende Code-Block wird in components/breadcrumb.htm direkt nach dem schließenden </nav>-Tag des bestehende Breadcrumbs eingefügt.
Die Blätterfunktion erscheint nur auf Produktseiten. Auf allen anderen Seiten (Kategorie, Suche etc.) wird der Block nicht angezeigt.
{{ 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="Vorheriges Produkt"
                   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="Nächstes Produkt"
                   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 }}