Thumbnail Slider horizontal ab V5.5

Shopware 5
1

Hallo liebe Community,

Meine Frage ist ob es ab der Shopware Version 5.5 noch möglich ist einen Thumbnail Slider (Detail Seite) horizontal in der Desktopansicht zu bauen. Die einzige Möglichkeit, die ich herausgefunden habe, wäre eine kleine Änderung an der Datei: „themes/Frontend/Responsive/frontend/_public/src/js/jquery.image-slider.js“

Mein Problem ist, man kann es zwar so bauen, aber der rechte Pfeil wird trotzdem immer angezeigt.

Ich habe keine weiteren Änderungen gemacht, außer folgende: (nur CSS) => (habe keine Viewports benutzt in dem Beispiel, da es nur zur Demo ist):

.product--image-container {
  .image-slider--container {
    margin-bottom: 6.875rem;
  }

  .image-slider--thumbnails {
    position: absolute;
    top: 27.5rem;
    left: 0;
    width: 100%;
    height: 70px;

    .image-slider--thumbnails-slide {
      .thumbnail--link {
        display: inline-block;
        margin: 0 10px 0;
      }
    }
  }
}

.image--dots {
  display: none !important;
}

 

2

Du hast dem .image-slider–thumbnails width: 100%; und dem .thumbnail–link display: inline-block; gegeben. Damit haben die Thumbnails Platz und laufen nebeneinander, das passt schon mal.

Du müsstest allerdings entweder mit JavaScript oder im .tpl die Reihenfolge von „image-slider–container“ und „image–thumbnails image-slider–thumbnails“ vertauschen, damit die Thumbnails unter dem Artikelbild landen.

Um das machen zu können, arbeite Dich am besten hier ein: https://developers.shopware.com/theme-guide/

3

@NextMike schrieb:

Du hast dem .image-slider–thumbnails width: 100%; und dem .thumbnail–link display: inline-block; gegeben. Damit haben die Thumbnails Platz und laufen nebeneinander, das passt schon mal.

Du müsstest allerdings entweder mit JavaScript oder im .tpl die Reihenfolge von „image-slider–container“ und „image–thumbnails image-slider–thumbnails“ vertauschen, damit die Thumbnails unter dem Artikelbild landen.

Um das machen zu können, arbeite Dich am besten hier ein: https://developers.shopware.com/theme-guide/

Hey, danke schonmal für die Antwort. Das tauschen in der TPL-Datei habe ich bereits probiert, ändert aber garnichts. Ich habe die oben beschriebenen Änderungen bereits in älteren Versionen (Versionen unter SW 5.5) gemacht und dort greifen diese. Ich habe bis jetzt leider noch nicht herausfinden können, was sich von SW 5.4.6 auf SW 5 geändert hat

4

Ohne die Seite / Code zu sehen kann man nur logischerweise nur raten.

Hier geht alles über, du brauchst theoretisch gesehen nichts in der JS anzupassen oder zu überschreiben. CSS. Bspw. CSS Grid, Flexbox mit order usw.

5

@Shopwareianer schrieb:

Ohne die Seite / Code zu sehen kann man nur logischerweise nur raten.

Hier geht alles über, du brauchst theoretisch gesehen nichts in der JS anzupassen oder zu überschreiben. CSS. Bspw. CSS Grid, Flexbox mit order usw.

Hey, ehrlich gesagt hab ich dein Kommentar nicht ganz verstanden. Falls dich das weiter bringt, ich habe vor diesem Forum Post einen SW 5.4.6 Shop aufgesetzt und die einzige Änderung (CSS -> oben beschrieben) dort gemacht. In der SW 5.4.6 funktioniert diese Änderung noch, aber als ich diesen geupdatet habe auf die SW 5.5.0 funktionierte diese nicht mehr. Der Code ist oben beschrieben & der Shop ist ansonsten SW Standard