Nivo Slider in xt:Commerce 4.1 (xt_grid)

xt:Commerce

Einen Slider in das Template von xt:Commerce einzubinden ist normalerweise kein Problem. Statische Lösungen in denen die Bilder auf dem FTP-Abgelegt werden gibt es einen Menge. Die Kunst ist jedoch den Slider so zu bauen, dass man Schnell Bilder ändern kann, ohne dieses in der Datei zu editieren. Mit einem Plugin lässt sich dieses natürlich simpel machen, aber auch ohne Plugin funktioniert es auf diese Weise sehr gut:

Update: 04.12.2015:

Mit unserer E-Commerce Agentur (die auch diesen Blog betreibt) haben wir kürzlich ein Slideshow Plugin für xt:Commerce 4 veröffentlicht, welches die Einbindung eines Sliders noch einfacher möglich macht. Mehr Infos dazu finden Sie auch in der Plugin Dokumentation.

Der folgende Weg funktioniert natürlich nach wie vor, ist lediglich aufwändiger und nicht so einfach zu verwalten.

1. Vorbereitungen

Zunächst muss man im xtAdmin unter “Inhalte => Contentmanager => Content Blöcke => neu” einen neuen Content Block erstellen.

Es bietet sich ein Name an, der den Slider Kennzeichnet.

Content Block erstellen

Nun erstellt man 2-4 neue Content Elemente unter “Inhalte => Contentmanager => Content => Neu“. Hierbei muss man jeweils ein Bild auswählen, einen Namen und Überschrift vergeben, das Contentelement aktivieren und im Reiter “Anzeige” den zuvor erstellten Contentblock auswählen.
(Die Content Elemente werden später den Slider bilden.)

Content Element erstellen

2. Nivo Slider Scripte in xt_grid einbinden

Für die Anleitung habe ich mich für den Nivo Slider entschieden, da er wohl die höchste Verbreitung hat. Grundsätzlich funktioniert der Guide aber mit allen mir bekannten Slidern. Der Nivo Slider kann dev7studios heruntergeladen werden, die Lizenz kostet 29 $.

Als erstes muss das jQuery Plugin “jquery.nivo.slider.pack.js” muss nun in den Ordner /templates/xt_grid/javascript/ kopiert werden. jquery.nivo.slider.pack.js liegt im Root-Ordner des Nivo-Downloads.

In das System wird die Datei eingebunden, indem man in der Datei “/templates/xt_grid/javascript/js.php” nach der Zeile

1
$xtMinify->add_resource('xtFramework/library/jquery/moments.js',140);

Diese Zeile einfügt:

1
$xtMinify->add_resource('templates/xt_grid/javascript/jquery.nivo.slider.pack.js',150);

Nun muss die Datei “/templates/xt_grid/javascript/script.js” um die Javascripte des Nivo Sliders erweitert werden, dafür wird natürlich die minify Funktion von xt:Commerce 4.1 genutzt:

Nach der Zeile

1
$(document).ready(function(){

muss dieser Block eingefügt werden:

1
2
3
4
// Nivo Slider
$(window).load(function() {
    $('#slider').nivoSlider();
});

Auch das default theme vom Nivo Slider darf nicht fehlen, dieses nimmt man aus dem Nivo Slider download ( “/themes/” ) und lädt den gesamten Ordner in den Ordner “/templates/xt_grid/css/nivo-slider/”.

Damit das Stylesheet geladen wird muss in die Datei via “/templates/xt_grid/css/css.php” eingebunden werden:

Nach der Zeile:

1
$xtMinify->add_resource('xtFramework/library/jquery/pikaday.css',100);

muss die Zeile

1
$xtMinify->add_resource('templates/xt_grid/css/nivo-slider/default/default.css',120);

eingefügt werden.

3. Content Block im Template laden

Theoretisch funktioniert der Slider jetzt bereits, doch müssen noch die Inhalte aus dem Content Block in das Template geholt werden.

Dazu öffnet man die index.html des xt_grid-Templates ( “/templates/xt_grid/index.html” ) und fügt hinter der Zeile

1
<div id="content">

Diesen Block ein:

1
2
3
4
5
6
7
8
{if $page == 'index'}
{content block_id=12}
{if $_content_12|count >0}
{foreach name=aussen item=box_data from=$_content_12}
<img src="{img img=$box_data.content_image type=m_org path_only=true}" data-thumb="{img img=$box_data.content_image type=m_org path_only=true}" alt="{$box_data.title}" />
{/foreach}
{/if}
{/if}

Wichtig ist jedoch, dass die Zahl 12 die ID des Content Blocks darstellt. D.h. wenn euer Content Block die ID 18 hat, muss die 12 an allen drei stellen durch die 18 ersetzt werden .

Jetzt sollte man die Bilder bereits im Template sehen, jedoch noch unschön untereinander weil die Bilder noch nicht für das Javascript vom Nivo als Slider gekennzeichnet wurden. Dieses macht man indem man den Code in der index.html in folgenden abändert:

1
2
3
4
5
6
7
8
9
10
11
12
{if $page == 'index'}
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
{content block_id=12}
{if $_content_12|count >0}
{foreach name=aussen item=box_data from=$_content_12}
{img img=$box_data.content_image type=m_org }
{/foreach}
{/if}
</div>
</div>
{/if}

Jetzt funktioniert der Slider grundsätzlich, der letzte Feinschliff fehlt jedoch noch.
Die Bilder sollen natürlich auf Produkte oder Kategorien verlinkt sein. Dafür muss die Datenbank entsprechend erweitert werden. Dafür führt man folgenden Query (in z.B. phpMyAdmin) aus:

ALTER TABLE `xt_content_elements` ADD `link_to` VARCHAR( 255 ) NULL AFTER `content_id` ;

Als nächstes sollte noch ein Sprachkey für das neue Feld erstellt werden, dieses kann man unter “Einstellungen => Lokalisierung => Sprachtexte => Neu” für jede installierte Sprache machen

Beispiel:
Sprachcode (iso-2): Für jede Sprache ein mal…
Schlüssel: TEXT_LINK_TO
Text: Verlinkung
Klasse: Admin

xt:Commerce Sprach Key erstellen

Jetzt erscheint im Administrationsbereich ein neues Feld mit dem Namen Verlinkung in dem man den Link zum entsprechenden Produkt hinterlegen kann.

xt:Commerce Datenbank erweitern

In den Code des Templates muss dieses noch auf folgende Art um das Bild herum eingefügt werden:

1
2
3
<a href="{$box_data.link_to}" title="{$box_data.title}">
<img src="{img img=$box_data.content_image type=m_org path_only=true}" data-thumb="{img img=$box_data.content_image type=m_org path_only=true}" alt="{$box_data.title}" />
</a>

Nachteil dieser Lösung:

Dieses ist eine recht einfache Lösung für kleinere Shops die sich recht zügig realisieren lässt. Der Nachteil ist jedoch, dass bei dieser Art der Einbindung nicht multilingual ist. xt:Commerce übergibt an dieses Menü leider nur das erste Content-Bild, d.h. Lösungen in denen man für Sprache zwei Bild Nummer zwei verwendet funktionieren leider nicht.

Man könnte natürlich für weitere Sprachen weitere Content Blöcke erstellen und mit {if $language == ‘de’}… je nach Sprache den passenden Block einbinden, jedoch wird dieses nahezu so pflege intensiv wie statische Lösungen. Hier sollte man also ein Plugin in betracht ziehen. Hier würde ich auf das “Special Boxes” oder den “Media Box Manager” zurückgreifen, wobei ich es bisher lediglich mit dem Special Boxes gemacht habe.

VN:F [1.9.22_1171]
Rating: 3.3/5 (4 votes cast)
Nivo Slider in xt:Commerce 4.1 (xt_grid), 3.3 out of 5 based on 4 ratings

Schlagwörter: ,

24 Gedanken zu „Nivo Slider in xt:Commerce 4.1 (xt_grid)

  1. knipser

    Vielen Dank, sehr detailierte Anleitung. Ieider hab ich es trotzdem nicht hinbekommen. Hab den Contentblock in die index.html eingefügt – mein slider ist nun zwar animiert, aber bewegt sich nach links über den Contenbereich hinaus. Ich benutze das xt_grid und hoffe auf Hilfe.

    Danke!

    Antworten
    1. Alex Artikelautor

      Hallo Knipser,

      ich vermute, dass du dann irgendwo einen Fehler gemacht haben musst. Ein Bekannter teilte mir vor einigen Tagen mit, dass es exakt nach Anleitung funktioniert hat.

      Sind vielleicht einfach deine Bilder zu groß?

      Antworten
        1. mpacgt

          script.js anpassen

          // Nivo Slider
          $(window).load(function() {
          $(‘#slider’).nivoSlider({
          effect:’fade’, // Specify sets like: ‘fold,fade,sliceDown’
          animSpeed:500, // Slide transition speed
          pauseTime:3000, // How long each slide will show
          startSlide:0, // Set starting Slide (0 index)
          directionNav:true, // Next & Prev navigation
          directionNavHide:true, // Only show on hover
          controlNav:false, // 1,2,3… navigation
          controlNavThumbs:false, // Use thumbnails for Control Nav
          controlNavThumbsFromRel:false, // Use image rel for thumbs
          controlNavThumbsSearch: ‘.jpg’, // Replace this with…
          controlNavThumbsReplace: ‘_thumb.jpg’, // …this in thumb Image src
          keyboardNav:true, // Use left & right arrows
          pauseOnHover:false, // Stop animation while hovering
          manualAdvance:false, // Force manual transitions
          captionOpacity:0.8, // Universal caption opacity
          prevText: ‘Prev’, // Prev directionNav text
          nextText: ‘Next’ // Next directionNav text
          });
          });

          dann noch in der intex.html

          so bleibt der Slider wo er ist und faded nur mehr die Bilder ineinander…
          greetz mpacgt

          Antworten
          1. mpacgt

            funktioniert bei Chrome und Firefox … beim IE10 funktioniert es leider nicht … da gehen die bilder immer noch links raus auf 0

          2. mpacgt

            noch ein tipp … der IE funktioniert wenn ich folgendes einfgt

            nach der Zeile “effect:’fade’, // Specify sets like: ‘fold,fade,sliceDown”
            das hier einfügen –> “slices: 1, // For slice animations”

            dann klappt es auch mit dem Internet Explorer

      1. Tha

        Hallo.
        ich habe in meinem Shop den Nivo Slider im HTML eingebunden. Ich benutze verschiedene Sprachen im Shop. Ist es möglich, dem Slider für jede Sprache eigene Bilder zu zuweisen?
        Deutsch > slider1_de.jpg, slider2_de.jpg, slider3_de.jpg
        Englisch > slider1_en.jpg, slider2_en.jpg, slider3_en.jpg

        Dass wenn ich im Footer die englische Flagge anklicke sich der Slider auch ändert meine ich. ist deine Methode dafür geeignet?

        Antworten
        1. Alex Artikelautor

          Hi,

          du müsstest quasi den slider zwei mal einbauen und mit
          {if $%language == ”de”}slider1{else}slider2{/if}
          einbinden.

          Die Bilder sind bei der 4.1.00 nicht an eine Shop-Sprache gebunden

          Antworten
  2. Peter

    Super Anleitung!! Hat nicht sofort geklappt, aber ich habe viele Erkenntnisse über Template Programmierung gewonnen. Das Ergebnis kann sich sehen lassen und das Hinzufügen und Ändern der Bilder im Backend ist sehr einfach.
    Schaut es Euch an!!
    Vielen Dank.

    Antworten
    1. Sven

      Hallo,

      deine Seite sieht wirklich gtu aus aber hast du es genau nach der Anleitung gemacht? Bei wir immer das Template zerschosen wenn ich das genau nach der Anleitung mache. Ich benutze das gleich Template wie du aber es will einfach nicht. Hast du noch irgendwelche änderungen durchgeführt?

      Sven

      Antworten
  3. th33xitus

    Hallo,

    Ich habe soweit alles nach Anleitung eingebaut.
    An und für sich funktioniert auch alles.

    Jedoch werden die Bilder, welche ich im Backend für den Slider angegeben habe nicht geladen. Es wird ausschließlich die Lade-Animation angezeigt und dies in Endlosschleife.

    Wo liegt der Fehler?
    Bin absolut ratlos…

    mfg

    Antworten
    1. Alex Artikelautor

      Theoretisch geht das genau so, nur mit zwei schleifen, statt:

      {foreach name=aussen item=box_data from=$_content_12}
      {img img=$box_data.content_image type=m_org }
      {/foreach}

      so:

      {foreach name=aussen item=box_data from=$_content_12}
      {foreach name=aussen item=box_data2 from=$box_data._content_12}
      {img img=$box_data2.content_image type=m_org }
      {/foreach}
      {/foreach}

      ( Auch wenn sich mir der Sinn nicht ganz erschließt…)

      Antworten
  4. Ergin

    Hallo, vielen Dank für die schöne Erklärung. Eine Frage zur Mehrsprachigkeit.
    Man sollte für 2 Sprachen 2 Content Blöcke mit entsprechenden Contents erstellen und wie folgt in Template einbinden:

    {if $page == ‘index’}
    {if $%language == ”de”}
    {content block_id=1}
    {if $_content_1|count >0}
    {foreach name=aussen item=box_data from=$_content_1}

    {/foreach}
    {/if}

    {else}
    {content block_id=2}
    {if $_content_2|count >0}
    {foreach name=aussen item=box_data from=$_content_2}

    {/foreach}
    {/if}
    {/if}
    {/if}

    ist das richtig ?
    Bei der Datenbank würde sich dann nichts ändern.
    Die jenigen, bei denen Bilder nicht dargestellt werden, möchte ich darauf hinweisen, dass der Link zu Bildern nach dieser Datenbankeintragung nicht länger als 255 Zeichen sein darf. Alternativ wäre statt VARCHAR die Variable TEXT zu nutzen.

    Antworten
  5. Sven

    Hallo, wenn ich das nach der Anleitung mache dann wird die Seite im erstem Moment richtig geladen. Sobald dann aber das nächste Bild im Slider angezeigt werden soll, dann zereist aber das Template und das nächste Bild wird oben links in der Ecke angezeigt. Kann mir da jemand helfen?

    Sven

    Antworten
  6. Sven

    Hi, erstmal Danke für den tollen Beitrag!
    Leider funktioniert es bei mir noch nicht.
    Der erste Abruf funktioniert soweit und er zeigt die zwei Bilder untereinander an.
    Bei dem zweiten Code, also den Slider, sehe ich nichts. der Bereich bleibt komplett leer als ob er die Bilder nicht findet/einfügt.
    Bin jetzt alles noch mal komplett durchgegangen, habe auch die Pfade usw. geprüft aber finde den Fehler nicht.

    Antworten
  7. Sven

    Hallo,
    leider funktioniert der Slider bei mir nicht.
    Der erste Code zeigt die Bilder wie erwartet untereinander an.
    Beim zweiten Code erscheint nichts.
    Kein Rahmen, kein Ladebalken.

    Was kann ich da tun?
    Bräuchte dringend Hilfe.

    Antworten
  8. Heinz

    Hallo,

    ich habe den Slider gleich 2 x auf der gleichen Seite eingebaut. Das klappt auch. Beim 2. Slider benutze ich auch Links. Auch das geht. Jetzt wollte ich auch beim 1. Slider die Links nutzen.
    Dann zeigt der 2. Slider ein seltsames Zeitverhalten. Wird erst nach sehr langer Zeit gestartet und verschwindet zwischendurch auch wieder.

    Woran kann das liegen?
    Gruß Heinz

    Antworten
  9. Pingback: Bilder-Slideshow in xt:Commerce Shop einbinden › xt:CommerceFAQ.de

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>