<< Click here to display Table of Contents >> Navigation: Wegweiser > Funktionen für Produktlisten:

Blättern in Produktlisten

Eine Kategorie oder eine Suchergebnisliste kann je nach Shop-Typ bis zu 1000 Produkte aufweisen. Durch das Blättern werden diese Produkte auf einzelnen Seiten angezeigt.

"Voraussetzung" für das Blättern in Produktlisten ist die Festlegung, wie viele Produkte standardmäßig pro Seite angezeigt werden sollen. Diese nehmen Sie im Abschnitt MaxCatProducts vor.
Mehr dazu finden Sie unter Wegweiser: Anzahl der Produkte pro Seite

Inhalt

1 Automatisch generierte Blätterfunktion integrieren

2 Blätterfunktion individuell gestalten

3 Duplicate Content durch (Blätter-)Folgeseiten verhindern

4 Seitennummer im Canonical

5 "Infinity Scrolling" oder "Blättern per Ajax"

1 Automatisch generierte Blätterfunktion integrieren

Mit den folgenden Schritten integrieren Sie die automatisch generierte Blätterfunktion in Ihren Shop:

Schritt 1: Anpassung des Config-Bereiches im <head>

Um individuelle "Zurück"- und "Weiter"-Buttons für die Blätterfunktion zu realisieren, passen Sie den Config-Bereich auf der Suchergebnisseite (ws_search.htm) und der Produktübersichtsseite (ws_category.htm) wie im folgenden Quellbeispiel an, indem Sie den Parameter HidePagingKeys-Allow auf yes setzen.

In diesem Fall generiert WEBSALE V8s für WS-ListPaging nur noch die Seitenzahlen ohne "Weiter"- und "Zurück"-Buttons.

Referenz: WS-Config

Schritt 2: Integration der Blätterfunktion auf dem Template

Notieren Sie die folgenden Tags für die Blätterfunktion auf der Suchergebnisseite (ws_search.htm) und der Produktübersichtsseite (ws_category.htm) in der Sektion {CAT-Data}:

{CAT-Data}
...
Seite ~CAT-CurrPage~ von ~CAT-MaxPages~ Seiten

{WS-ListPaging}

   {WS-ListPagingBack}
      <a href="~WS-ListPagingBackLink~"> << zurück</a>
   {/WS-ListPagingBack}

   ~WS-ListPaging~

   {WS-ListPagingNext}
      <a href="~WS-ListPagingNextLink~">weiter >> </a>
   {/WS-ListPagingNext}

{/WS-ListPaging}
...
{CAT-Data}

Referenz: CAT-CurrPage

Referenz: CAT-Data

Referenz: CAT-MaxPages

Referenz: WS-ListPaging

Referenz: WS-ListPagingBack

Referenz: WS-ListPagingBackLink

Referenz: WS-ListPagingNext

Referenz: WS-ListPagingNextLink

Schritt 3: Anpassung des Designs

Das Tag WS-ListPaging generiert automatisch eine Tabelle mit <span>-Elementen und Verlinkungen sowie der Anzeige der Seitenzahlen. Allen HTML-Elementen sind Klassen zugewiesen, mit denen Sie die Möglichkeit haben, das Aussehen der Seiten anzupassen. Fügen Sie diese Klassen in Ihre Styles-Datei ein.

Klasse	Steuert das Aussehen von...
paging_table	Tabelle
paging_td1	1.Spalte
paging_td2	2.Spalte
paging_td3	3.Spalte
paging_text	normaler Text
paging_text_selected	ausgewählter Text
paging_link	Link

2 Blätterfunktion individuell gestalten

Mit der automatisch generierten Blätterfunktion können Sie lediglich über die CSS-Klassen das Aussehen der Seiten verändern. WEBSALE V8s bietet Ihnen mittels des DC-Loop-Tags jedoch auch die Möglichkeit, die Blätterfunktion individuell aufzubauen und zu gestalten. Als Designer sind Sie damit vollkommen frei in der Erstellung des Quellcodes und vergeben die CSS-Klassen selbstständig. SEOs können erforderliche Anpassungen vornehmen, die mit der automatisierten Lösung nicht möglich sind.

Verwenden Sie für die individuell gestaltbare Blätterfunktion das Tag DC-Loop. WS-ListPaging wird in diesem Fall als Bereichs-Tag eingesetzt und um folgende Tags ergänzt:

▪Um die Links für "zurück" und "vor" zu setzen, fügen Sie die Tags WS-ListPagingBack und WS-ListPagingNext ein.

▪Um die Anzahl der aufzulistenden Seiten festzulegen, nutzen Sie im Tag DC-Loop 1…3 als Argument CAT-MaxPages.

▪Um die einzelnen Seitenzahlen auszugeben, verwenden Sie DC-Int1. Dieses Tag zählt mit jedem Schleifendurchlauf um 1 hoch, bis die letzte Seitenzahl erreicht ist.

▪Das DC-Int1-Tag verwenden Sie auch für den Blätter-Link mit CAT-Link und &page= (bei SEO-URLs dann ?page=).

▪Falls DC-Int1 der aktuell gewählten Seitenzahl (CAT-CurrPage) entspricht, können Sie die Klasse "selected" setzen.

Beispiel

Tragen Sie innerhalb des Bereichs CAT-Data die folgenden Tags für die Blätterfunktion auf der Suchergebnisseite (ws_search.htm) und der Produktübersichtsseite (ws_category.htm) ein:

{CAT-Data}
...
{WS-ListPaging}
    {WS-ListPagingBack}
      <a href="~WS-ListPagingBackLink~"> << zurück</a>
   {/WS-ListPagingBack}
    ~DC-Loop1_set($CAT-MaxPages$)~
    {DC-Loop1}
        ~DC-Int1_set(0)~
        {@DC-Loop1}
            ~DC-Int1_inc~
            <a href="~CAT-Link~&page=~DC-Int1~" {DC-Int1($CAT-CurrPage$)}class="selected"{/DC-Int1($CAT-CurrPage$)}>~DC-Int1~</a>
        {/@DC-Loop1}
    {/DC-Loop1}
    {WS-ListPagingNext}
      <a href="~WS-ListPagingNextLink~">weiter >> </a>
   {/WS-ListPagingNext}
{/WS-ListPaging}
...
{/CAT-Data}

Referenz: CAT-CurrPage

Referenz: CAT-Data

Referenz: CAT-Link

Referenz: CAT-MaxPages

Referenz: DC-Int1…3

Referenz: DC-Int1…3_inc

Referenz: DC-Int1…3_set

Referenz: DC-Loop1…3

Referenz: DC-Loop1…3_set

Referenz: WS-ListPaging

Referenz: WS-ListPagingBack

Referenz: WS-ListPagingBackLink

Referenz: WS-ListPagingNext

Referenz: WS-ListPagingNextLink

3 Duplicate Content durch (Blätter-)Folgeseiten verhindern

Auf jeder Kategorieseite gibt es neben den Produkten auch Informationen wie den Kategorie-Namen, den Kategorie-Beschreibungstext und eventuell auch Kategorie-Emotionsbilder. Diese Informationen werden auf jeder Seite, die durch das Blättern erreicht werden, wieder angezeigt. Das kann dazu führen, dass Google die Folgeseiten als Duplicate Content wertet. Bitte sprechen Sie diesbezüglich mit Ihrem SEO-Spezialisten.

Inhalte für (Blätter-)Folgeseiten ausblenden

Mithilfe der folgenden Klammerung können Sie die Anzeige der (Blätter-)Folgeseiten beeinflussen und somit Duplicate Content vermeiden:

<body>
   ...
   {DC-CompareDigitLTE($CAT-CurrPage$,1)}
          Inhalt nur für Seite 1
   {/DC-CompareDigitLTE($CAT-CurrPage$,1)}
   {DC-CompareDigitGT($CAT-CurrPage$,1)}
      Alternative Inhalte ab Seite 2
   {/DC-CompareDigitGT($CAT-CurrPage$,1)}
   ...
</body>

Referenz: CAT-CurrPage

Referenz: DC-CompareDigitLTE()

Referenz: DC-CompareDigitGT()

Folgeseiten aus dem Index ausschließen

Mittels der Meta-Information "robots" kann man Suchmaschinen daran hindern, Seiten in den Google-Index aufzunehmen. Ziel ist es, unwichtige sowie doppelte Inhalte aus dem Google-Index auszuschließen, sodass der Google Bot mehr Zeit aufwendet, umsatzrelevante Inhalte Ihres Shops zu indexieren. Alle Paginationsseiten ab Seite 2 gehören zu diesen Seiten.

Wegweiser: Robots-Angabe im HTML-Head

Mithilfe der DC-Vergleichstags können Sie die Robots-Angabe beeinflussen.

Ist die Seitennummer kleiner oder gleich 1, kann die Seite auf den Index gesetzt werden. Ist die Seitennummer größer 1, soll die Seite nicht mehr auf den Index gesetzt werden.

<head>
   ...
   {DC-CompareDigitLTE($CAT-CurrPage$,1)}
      
      <meta name="robots" content="~WS-RobotControl~">
   {/DC-CompareDigitLTE($CAT-CurrPage$,1)}

   {DC-CompareDigitGT($CAT-CurrPage$,1)}
      
      <meta name="robots" content="noindex,follow">
   {/DC-CompareDigitGT($CAT-CurrPage$,1)}
   ...
</head>

Referenz: CAT-CurrPage

Referenz: DC-CompareDigitLTE()

Referenz: DC-CompareDigitGT()

Referenz: WS-RobotControl

4 Seitennummer im Canonical

Die Seitennummer der Blätterfunktion wird standardmäßig durch page= im Canonical mit angegeben.

Diesen Parameter können Sie im Canonical zur Vermeidung von Duplicate Content entfernen. Bitte sprechen Sie diesbezüglich mit Ihrem SEO.

Referenz: Entfernen der Seitennummer im Canonical

5 "Infinity Scrolling" oder "Blättern per Ajax"

Statt beim Blättern von langen Suchergebnisseiten oder Kategorien von Seite zu Seite zu springen, kann man die Blätterfunktion auch so umbauen, dass die Ergebnisse immer auf der gleichen Seite geladen werden.

Wenn der Käufer am Ende der Seite angelangt ist, werden die weiteren Produkte selbstständig oder nach Klick auf einen Button geladen. Somit erhält man alle Produkte einer Kategorie auf einer Seite angezeigt und kann einfach immer wieder hoch- und herunterscrollen, um zu den Produkten zu gelangen.

Hinweise zur Integration finden Sie in unseren

Anwendungsbeispielen: Blättern von Produktlisten