ANLEITUNG: Bestseller, TOP, NEW Product-Slider-Box

Anleitung von dem Thread: ANLEITUNG: Bestseller, TOP, NEW Product-Slider-Box
Ich bin hier nur die Tippse ;) Danke werresal

Dateianpassungen

Folgende Dateien müssen angepasst werden.

boxes.php

Öffne die Datei /templates/DEIN TEMPLATE/source/boxes.php und suche nach

    include(DIR_WS_BOXES . 'manufacturers.php');

füge DANACH ein

    include(DIR_WS_BOXES . 'slider.php');

general.js.php

Öffne die Datei /templates/DEIN TEMPLATE/javascript/general.js.php und suche nach

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

füge DANACH ein

    /* SLIDER-BOX */
            <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
            <script type="text/javascript">
            $(window).load(function() {
            $('#box-slider').nivoSlider({
                    directionNav:false,
                    controlNav:false,
                    randomStart:true,
                    keyboardNav:false,
                    effect:'sliceUp',
                    pauseTime:5000,
                    pauseOnHover: true
              });
        });
        </script>
    /* SLIDER-BOX ENDE*/

index.html

FÜGE an gewünschter Stelle in /templates/DEIN TEMPLATE/index.html ein:

    {$box_SLIDER}

stylesheet.css

FÜGE am Ende der Datei in /templates/DEIN TEMPLATE/stylesheet.css ein:

/* SLIDER-BOX */
        #box-slider { position:relative; left: 0; display:block;overflow:hidden;max-height:200px;}
        #box-slider a.nivo-imageLink { position:absolute; top:0px; left:0px; border:0; padding:0; margin:0; z-index:99; display:none; width:200px; height:200px; }
        #box-slider img { position:relative; top:0px; left:0px;}
        .newest_slider { height:230px; margin-bottom:15px; background-image:url(HIER DEIN LADEBILD EINFÜGEN); }
        .nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
        .nivo-box {display:block;position:absolute;z-index:5;}
        .nivo-caption {position:absolute;left:0px;bottom:0px;background:#ccc;color:#000 !important;width:100%;z-index:8;}
        .nivo-caption p {padding:5px;margin:0;font-size:11px;line-height:14px;}
        .nivo-caption a {display:inline !important;}
        .nivo-html-caption {display:none;}
/* SLIDER-BOX ENDE */

Dateiupload

Lade folgende Dateien in dein Template. Datei:Bestseller Top New-Product Slider-Box.zip
Es ist die Originale Datei von hier. Ich habe sie Übersichtshalber umbenannt.

Einstellungsmöglichkeiten

Anzahl der Produkte im Slider

Öffne die Datei slider.php und suche die Stelle

    $max_slider_products = 30;

Ladebild (kommt immer als erstes, dann erstes Bild der slideshow)

Öffne die Datei stylesheet.css und suche

    .newest_slider { height:230px; margin-bottom:15px; background-image:url(HIER DEIN LADEBILD EINFÜGEN); }

Anmerkungen im Thread

general.js.php - jQuery Plugin Usage | Nivo Slider

box_slider.html - Features/div. Einstellungen bedingt durch eigenes Design:

• Produktname auf 35 Zeichen begrenzt, dann Zeilenumbruch dann
• Preisanzeige in Fettschrift
• erstes Sliderbild (war 1 Bild aus dem sliderkatalog) ersetzt durch feste Definition (siehe stylesheet.css)

Weiterführende Informationen:

Ich habe das Teil an meine Bedürfnisse angepasst, inwieweit Anzeige von Bestellers usw möglich ist habe ich nicht getestet. Falls Du diese Funktion haben willst (dieser script zeigt nur Neue Produkte) musste Du folgendes ändern:

"box_slider.html":

    <h2 class="boxheader">{#heading_whatsnew#}</h2>

in {#heading_bestsellers#} etc.

"slider.php":

    $box_mode = 'bestsellers';

in new, bestsellers, top etc. Scheinbar aber keine Funktion.

So, ich hoffe ich habe nichts vergessen. Viel Spaß beim Einbau ! Grüße