ANLEITUNG: Bestseller, TOP, NEW Product-Slider-Box – Wiki | modified eCommerce Shopsoftware

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

Aus Wiki | modified eCommerce Shopsoftware

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

Dateianpassungen[Bearbeiten]

Folgende Dateien müssen angepasst werden.

boxes.php[Bearbeiten]

Ö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[Bearbeiten]

Ö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[Bearbeiten]

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

    {$box_SLIDER}

stylesheet.css[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Anzahl der Produkte im Slider[Bearbeiten]

Öffne die Datei slider.php und suche die Stelle

    $max_slider_products = 30;

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

Ö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[Bearbeiten]

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

  • Diese Seite wurde zuletzt am 9. September 2014 um 11:48 Uhr bearbeitet.