Optionen der Slick-Slider in JTL-Shop 5 ändern.

Um die Optionen der Slider anzupassen benötigt es leider eine Reihe von Template Anpassungen. In meinem Beispiel möchte ich die Anzahl der Artikel in den Artikel-Slidern auf der Startseite anpassen.

Eine Übersicht der zu Verfügung stehenden Optionen findet sich auf der Github Seite des Slick Slider

Template Anpassung

Zuerst suchen wir das Template in dem der Slider ausgegeben wird. Für die Startseite und die Artikelseite werden die Artikel-Slider in der snippets/product_slider.tpl erzeugt.

{block name='snippets-product-slider-other-products'}
	{row class="slick-lazy slick-smooth-loading carousel carousel-arrows-inside {if $tplscope === 'half'}slick-type-half{else}slick-type-product{/if} {if $productlist|count < 3}slider-no-preview{/if}"
		data=["slick-type"=>"{block name='product-slider-class'}{if $tplscope === 'half'}slider-half{else}product-slider{/if}{/block}"]}
		{include file='snippets/slider_items.tpl' items=$productlist type='product'}
	{/row}
{/block}

Es gibt hier noch einen weiteren Smarty Block in dem die Slider im box-Layout ausgegeben werden. Also darauf achten welche Blöcke man verwenden möchte.

Anpassungen an den Snippets direkt zu machen ist etwas heikel, da man nicht genau weis aus welchen Templates heraus die Snippets aufgerufen werden und man will vielleicht nicht jede Instanz dieses Sliders ändern. Daher suchen wir uns das Template, das den für uns relevanten Slider aufruft. In meinem Beispiel ist das page/index.tpl für die Startseite.

{block name='page-index-include-product-slider'}
	{container class="product-slider-wrapper product-slider-{$Box->name} {if $Einstellungen.template.theme.left_sidebar === 'Y' && $boxesLeftActive}container-plus-sidebar{/if}" fluid=true}
		{include file='snippets/product_slider.tpl'
			productlist=$Box->Artikel->elemente
			title=$title
			hideOverlays=true
			moreLink=$moreLink
			moreTitle=$moreTitle
			titleContainer=true}
		{/container}
{/block}

Hier werden schon einige Variablen an das product_slider.tpl Template übergeben und wir können hier unsere Optionen für den Slick Slider hinzufügen.

Wir legen uns dazu in unseren Child Theme die Datei page/index.tpl an und ergänzen den Block mit unseren Slider Optionen:

{block name='page-index-include-product-slider'}
    {container class="product-slider-wrapper product-slider-{$Box->name} {if $Einstellungen.template.theme.left_sidebar === 'Y' && $boxesLeftActive}container-plus-sidebar{/if}" fluid=false}
		{include file='snippets/product_slider.tpl'
			productlist=$Box->Artikel->elemente
			title=$title
			hideOverlays=true
			moreLink=$moreLink
			moreTitle=$moreTitle
			titleContainer=true
			slickOptions='{"responsive": [
                {
                    "breakpoint": 768,
                    "settings": {
                        "slidesToShow": 3,
                        "slidesToScroll": 3
                    }
                },
                {
                    "breakpoint": 992,
                    "settings": {
                        "slidesToShow":5,
                        "arrows": true,
                        "slidesToScroll": 5
                    }
                },
                {
                    "breakpoint": 1300,
                    "settings": {
                        "slidesToShow":5,
                        "arrows": true,
                        "slidesToScroll": 5
                    }
                }
            ]}'}
    {/container}
{/block}

Bitte darauf achten, daß Optionsnamen immer in Anführungszeichen stehen, sonst werden die Optionen vom Slider nicht aus dem HTML ausgelesen.

Damit nun unsere Optionen auch ausgegeben werden, müssen wir das Template snippets/product_slider.tpl anpassen.

{block name='snippets-product-slider-other-products'}
    {row class="slick-lazy slick-smooth-loading carousel carousel-arrows-inside {if $tplscope === 'half'}slick-type-half{else}slick-type-product{/if} {if $productlist|count < 3}slider-no-preview{/if}"
    data=["slick-type"=>"{block name='product-slider-class'}{if $tplscope === 'half'}slider-half{else}product-slider{/if}{/block}", "slick"=>$slickOptions|escape]}
        {include file='snippets/slider_items.tpl' items=$productlist type='product'}
    {/row}
{/block}

Auch hierfür erstellen wir die Datei mit unserem Block im Child Theme.
Da im JTL-Shop 5 überall das SCC verwendet wird müssen wir unsere Optionen so übergeben dass der Aufruf von {row} unsere Slick Optionen als data-slick Attribut im HTML ausgiebt. dafür hängen wir an den Wert des Parameters data unsere Optionen an: , "slick"=>$slickOptions|escape] .

Stylesheet Anpassung

Die Slider im JTL-Shop 5 werden schon angezeigt, bevor sie per Javascript gestartet werden. Dazu gibt es die CSS Klasse carousel und ihre zugehörigen Regeln in NOVA/themes/base/sass/components/_carousel.scss.

In meinem Beispiel habe ich die Anzahl der Produkte im Slider für den Breakpoint XL von 7 auf 5 reduziert. Damit nun die CSS Regeln für das carousel nicht 7 Elemente anzeigen muss ich hier korrigierend eingreifen.

In meinem Child Theme ergänze ich in der my-theme.scss Datei die carousel Klasse.

... 

body[data-page="18"] {
  .carousel {
    &:not(.slick-initialized) {
      &.slick-type-product {
        .product-wrapper {
          @include media-breakpoint-up(xl) {
            width: calc(100% / 5);
            min-width: calc(100% / 5);
          }
        }
      }
    }
  }
}

...

Damit die Änderung nur auf der Startseite wirkt und nicht die Slider auf der Artikelseite verändert, schränke ich die CSS Regel über body[data-page="18"] auf die Startseite ein.

Tags:Child-Theme, JTL-Shop 5, slick slider