thumbnail slider in content einfügen

Wenn ich Dich richtig verstanden habe, möchtest Du die Thumbnails, die nben oder unter einem Artikelbild angezeigt werden (Vorschau der weiteren Artikelbilder) auf andere Seiten verlinken.
Das geht so ohne weiteres nicht.
Du kannst aber Teaser-Slider für Produkte erstellen und entsprechend verlinken.

 

Der Teaser-Slider ist auch auf Content-Seiten da.
Andere Slider musst Du Programmieren.

 

Eventuell noch einen Carousel-Slider einbauen:
Beispielsweise das owl-carousel-2. Für fast alles anpassbar und funktioniert gut.

https://owlcarousel2.github.io/OwlCarousel2/index.html
https://codepen.io/Nelis/pen/reEjZz

 

Ich hatte das gleiche Problem. Habe die Dateien dann unter SEO/Trackingscodes eingebunden. Die große Datei mit <script>-Verweis auf den global-Ordner. Die kleine direkt, um diese einfach korrigieren zu können.

Vermutlich ist das so nicht professionel, und wie´s anders geht, würde micht auch interessieren. So funktioniert es jedoch sehr gut.

 

Es sieht so bei den Tracking-Codes aus:
Beispiel für zwei unterschiedliche Carousels. Die jeweilige Klasse »owl-one« oder »owl-vorteile« kommt dann in den zweiten <div>-Container wo owl-carousel steht.

Code:

<script src="/templates/Honeygrid/usermod/javascript/Global/owl.carousel.min.js"></script>
<script>
$('.owl-one').owlCarousel({
  loop: true,
  margin: 20,
  nav: true,
  navText: [
    "<i class='fa fa-chevron-left'></i>",
    "<i class='fa fa-chevron-right'></i>"
  ],
  autoplay: false,
  autoplayHoverPause: false,
  responsive: {
    0: {
      items: 1
    },
      550: {
      items: 2
    },
    700: {
      items: 3
    },
     900: {
      items: 4
    },
    1300: {
      items: 5
    },
      1500: {
      items: 6
    }
  }
})
$('.owl-vorteile').owlCarousel({
  loop: true,
  margin: 25,
  nav: true,
  navText: [
    "<i class='fa fa-chevron-left'></i>",
    "<i class='fa fa-chevron-right'></i>"
  ],
  autoplay: false,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 2
    },
    1200: {
      items: 3
    }
  }
})

Das JS wird dann allerdings auf jeder Seitel geladen.

 

Ich habe den z.B. den Flexisel-Slider auf der Startseite.
Das Javascript dazu habe ich tempales/honeygrid//usermod/javascript/index/ eingefügt.

Wichtig ist dabei das die originale JS immer alphabetisch vor der mit deinen JS-Anpassungen steht.
Also in deinen Fall:
/owl.carousel.min.js
/xcarousel.js (deine JS Anweisungen)
Dann wirds auch geladen.

Nachtrag: Pfad korrigiert.

 

Hm... aber so wird das JS doch auch auf jeder Seite geladen?

Ich hatte folgendes probiert: in die Datei /templates/Honeygrid/usermod/javascript/Global/index.html die Anweisungen zur Initiatlisierung geschrieben. Das hatte nicht funktioniert.

Ein bestehende Datei oder Odner /templates/Honeygrid/javascript/index[.html] ist bei mir nicht vorhanden.

 

Mein Fehler, /templates/Honeygrid/usermod/javascript/
und da unter index/ (wenn auf der Startseite)
Nicht in die index.html sondern daneben deine js Dateien ablegen.

 

Unter /Global/ wird es auf allen Seiten geladen
/Index/ --> Startseite

 

Vielen Dank! Funktioniert nun und es fühlt sich auch besser an, wenn´s richtig gemacht ist.

 

Ganz richtig wäre es wenn du deine Anpassungen komplett in GXModules einbaust.
Da hast du alle Anpassungen an einem Ort.
Z.B. für den eigenen Slider:
GXModules/AS/Carousel/Shop/Templates/Honeygrid/Javascript/Index/deine.js
GXModules/AS/Carousel/Shop/Templates/Honeygrid/Css/deine.css

 

Danke! Bin vorerst mal mit »richtig+funktioniert« zufrieden. Habe gesehen das es dazu auch ein Tutorial auf der developer-Seite gibt.