Jan Griesel

 

In diesem Tutorial erstellen wir einen automatischen Slider für unsere Cross-Selling-Artikel. Dies spart nicht nur Platz in unserem Layout, da beliebig viele Artikel über den Slider angezeigt werden können, sondern sieht dazu auch noch sehr ansprechend aus.

Im Bearbeitungsfenster sehen Sie, wenn Sie die Cross-Selling-Funktionalität bis jetzt nicht genutzt haben, folgenden Code:

<!-- START [ArticleListCrossSellingRow] -->
<!-- START [ArticleListCrossSellingItem] -->
<!-- END [ArticleListCrossSellingItem] -->
<!-- END [ArticleListCrossSellingRow] -->

Das Script, das die Scoll-Funktionalität zur Verfügung stellt, wurde hier mit dem Parameter interval:3000 eingebunden. Dies bedeutet, dass alle 3 Sekunden eine neue Artikelserie von der rechten Seite in den "scrollable Container" geschoben wird.
Dies können Sie natürlich entsprechend Ihren eigenen Bedürfnissen anpassen.

1. Öffnen Sie dazu das Menü Layout > Layout-Generator. Wählen Sie nun im Dropdown-Menü Artikelansichten das Template ArticleListCrossSelling aus.
2. Löschen Sie diesen Code.
3. Fügen Sie den folgenden Code in das Template ein:

<div style="clear: both;"></div>
    <a class="prev browse" style="float: left;"></a>
    <div class="scrollable">   
        <div class="items"> 
            <!-- START [ArticleListCrossSellingRow] -->
                <div class="arround">
                    <!-- START [ArticleListCrossSellingItem] -->
                        <div class="sliderproduct" style="font-size: 11px;" align="center">
                            <a href="[LinkTo_Article_]"> [PreviewImage1]</a> 
                            <br />
                            <div style="height: 27px; margin-top: 5px; padding: 0 5px 0 5px; overflow: hidden;">
                                <a href="[LinkTo_Article_]">[Name]</a> 
                            </div>
                            <div style="margin-top: 7px;">
                                <span style="font-weight: bold;">[Price] € </span>
                            </div>
                            <div style="height: 25px;">
                                <span>[VAT_Hint][VAT]%<br />zzgl. Versandkosten</span>
                            </div>
                        </div>
                    <!-- END [ArticleListCrossSellingItem] -->
                </div>
            <!-- END [ArticleListCrossSellingRow] -->
        </div>
    </div>
    <a class="next browse" style="float: left;"></a>
<div style="clear: both;"></div>

<script type="text/javascript"><!--mce:0--></script>

4. Speichern Sie die Einstellungen.
5. Nun klicken Sie auf den Link CSS (links neben dem Dropdown-Menü). Im folgenden Bearbeitungsfenster scrollen Sie nach ganz unten und fügen folgenden Code ein:

/* Buttons */	
	.prev {
		 background:url(/Pfad/zu/den/Pfeilen) bottom left; 
		height:200px; 
		width:25px; 
		display:block; 
		border:1px solid #b9cad6; border-right:0;
	         }
            .prev:hover   {background-position:top left; border:1px solid #87a7ba;} 
	.next { 
		background:url(/Pfad/zu/den/Pfeilen) bottom right; 
		height:200px;
		 width:25px; 
		display:block; 
		border:1px solid #b9cad6;
		border-left:0;
	          }
	.next:hover {background-position:top right; border:1px solid #87a7ba;} 
		    
		    
/* Scrollbar */		    
		    
.scrollable 
{
    position:relative;
    overflow:hidden;
    width: 540px;
    height:200px;
    border:1px solid #e8e1db;
    float:left;    
}
.scrollable .items 
{
    width:20000em;
    position:absolute;
    clear:both;
}
.items div.arround 
{
    float:left;
    width:680px;    
}
.items div.sliderproduct 
{ 
	float:left;
	 width:135px;
	 border-right:1px dotted #ccc; padding-top:5px;
}

.items div.sliderproduct:hover
{
	background-color:#e3e3e3;
}

6. Tauschen Sie unter /* Buttons */ die vorgegebenen Button-Links gegen Button-Links aus, die auf Ihre Konfiguration zutreffen.
   Sie finden am Ende dieses Blogs einen Download-Link für die Buttons.
7. Passen Sie Höhe und Breite der Klasse .scrollable (=Parameter des Containers) Ihren Vorstellungen bzw. Anforderungen an.
   
   Die Breite eines einzelnen Artikels errechnen Sie dabei, indem Sie die Breite des Containers durch die Anzahl der gezeigten Artikel teilen. Wenn Sie die Navigationspfeile verwenden, müssen Sie von der Containerbreite 2 x 25 px abziehen. Die ermittelte Artikelbreite passen Sie in der Klasse .items div.sliderproduct an. Die ermittelte Containerbreite passen Sie unter .scrollable an.
   
   Weiterhin sind die Pfadangaben für .prev und .next hierbei besonders wichtig, denn dort wird das Bild für Ihre Navigationspfeile hinterlegt. Die Pfeile dienen dazu, dem User die Möglichkeit zu bieten, durch die Artikel zu blättern. Im Normfall laufen diese automatisch nach der von Ihnen gesetzten Zeitspanne weiter (Zeitspanne: siehe Schritt 3, Parameter "intervall:").
8. Tragen Sie unter der Option ArticleListCrossSellingItem_EachRow ein, wie viele Artikel in einer Reihe nebeneinander dargestellt werden sollen (je nach Contentbreite verschieden) sowie unter der Option ArticleListCrossSellingItem_Limit, wie viele der Cross-Selling-Artikel insgesamt im Slider angezeigt werden sollen.
9. Speichern Sie die Einstellungen.
10. Falls Sie bis jetzt die Cross-Selling-Funktionalität noch nicht genutzt haben, müssen Sie zunächst im Template Artikelansichten > SingleArticle den Platzhalter [Container_ArticleListCrossSelling] hinzufügen.
    
    Den Container können Sie dort natürlich überall platzieren. Empfehlenswert ist jedoch eine Platzierung unter den regulären Daten des Produkts. Also ganz am Ende des Editorbereichs.
    
    Wenn Sie alles Punkt für Punkt umgesetzt haben, könnte ihre SingleArticle-Seite nun so aussehen:

Den Button aus Schritt 6 können Sie hier Downloaden ( Rechte Maustaste / Speichern unter )