Thumbnail Slider in Artikeldetail horizontal

Shopware 5 Themes & Design
1

Hallo Community,

können die Thumbnails in der Artikeldetailansicht auch horizonztal angezeigt werden, unter dem Hauptbild?

Danke schon mal für Eure Hilfe,
Mahlzeit

2

Das geht ja. Allerdings musst du dazu das Theme anpassen als auch die nötigen Less Dateien. Ohne tiefer greifende Shopware Theme Kentnisse und CSS / LESS wirst du da nicht weit kommen.

Als Start empfehle ich dir den Shopware Designers Guide

3

Erstmal danke für Deine Antwort.
Ich habe schon gute Kenntnisse in CSS / LESS und dem Templating.

Ich habe bereits den Block

{block name='frontend_detail_image_thumbs'}
        {include file="frontend/detail/images.tpl"}
    {/block}

unter den image_box_dots block geschoben, die Breite und Höhe des containers „image-slider–thumbnails“ angepasst, die darin enthaltenen Thumbs/Links m. d. Klasse „thumbnail–link“ auf „float: left“ gesetzt; dann werden diese natürlich auch horizontal, nebeneinander angezeigt.
Aber halt ohne die benötigten Pfeile links und rechts; und auch nicht alle vorhandenen Thumbs, da diese in die 2te Zeile rutschen.

Ich denke, das Problem ist das zugrunde liegende jQuery Plugin „jquery.image-slider.js“.
Die horizontale Darstellung müßte doch wohl über das PlugIn gesteuert werden, oder?
Man kann da auch so einiges einstellen, aber nicht, ob die Thumbs horizontal oder vertikal ausgegeben werden.

Hier ist meine Testumgebung, ich entwickle gerade das Template für SW5.
www.kalango.com/sw5test/rozini/cavaquinho-studio-electrico?c=562

Danke, beste Grüße

 

4

Hallo,

ansich ist das problemlos nur mit LESS und mit einer Templateanpassung möglich, hab ich auch schon mal so umgesetzt. Die Pfeile etc. drehen sich sogar durch das jQuery-Plugin selbst von allein in die horizontale Richtung.

Ansich müsste es das schon sein:

.image-slider--thumbnails {
	height: 6rem;
	width: 99%;
}

.image-slider--thumbnails .thumbnail--link {
	display: inline-block;
}

Und im Template:

{extends file='parent:frontend/detail/image.tpl'}

{* Product image - Thumbnails *}
{block name='frontend_detail_image_thumbs'}

{/block}

{block name='frontend_detail_image_box' append}
	{* Product image - Thumbnails *}
	{block name='frontend_detail_image_thumbs_custom'}
		{include file="frontend/detail/images.tpl"}
	{/block}
{/block}

Zumindestens bei der aktuellen Shopware 5 - Version funktioniert das so, ohne irgendwelche JavaScript- oder jQuery-Anpassungen vornehmen zu müssen.

Beste Grüße

Sebastian

1 „Gefällt mir“
5

Und schon funktioniert’s.
Das Problem war, daß ich „float: left;“ statt „display:inline-block;“ verwendet hatte.

So sieht’s nun fertig aus:

image-slider.less:

@media screen and(min-width: @desktopViewportWidth) {

  .image-slider--thumbnails {
    width:100%;
    .unitize-height(70);
    .unitize-margin(20, 20, 0, 0);

    .thumbnail--link {
      display: inline-block;
    }
  }
}

und in der detail/image.tpl packe ich den Slider einfach unter die „dots“, die ausgeblendet werden:

{* Product image - Dot navigation *}
    {block name='frontend_detail_image_box_dots'}
        
    {/block}

{* Product image - Thumbnails *}
    {block name='frontend_detail_image_thumbs'}
        {include file="frontend/detail/images.tpl"}
    {/block}

Vielen Dank für Deine schnelle Hilfe;
oft liegt der Teufel im Detail :wink:

6

Hallo,

also exakt die Lösung, die ich dir oben geschrieben habe broken heart. Du hast aber noch den extends-Befehl bei deinem Template vergessen.

Beste Grüße

Sebastian