===== Produkt Slider =====
<note tip>**Aufgabe:**\\
Produkt Slider für Startseite scrollbar machen\\
für JTL Shop4\\
</note>
\\
Hier ein Link mit weiteren Infos für Shop5
https://www.sfxonline.de/blog/optionen-der-slick-slider-in-jtl-shop-5-aendern/

{{ programmieren:jtl-shop:b21.png?600 }}

{{ programmieren:jtl-shop:b22.png?600 }}

Standard mäßig werden die Artikel in den Slidern zwar wie gewünscht angezeigt, aber das automatische Scrollen ist deaktiviert.
Damit das funktioniert, müssen wir dem JS Script noch ein paar Einstellungen mit übergeben.
\\
Ich habe das im Shop4 wie folgt gelöst:\\
Die Datei /Evo/snippets/product_slider.tpl in dein Child Template kopieren und dort wie folgt ändern:\\


<code php| download>
{strip}
{if $productlist|@count > 0}
    {if !isset($tplscope)}
        {assign var='tplscope' value='slider'}
    {/if}
    <section class="panel{if $title|strlen > 0} panel-default{/if} panel-slider{if $tplscope === 'box'} box box-slider{/if}{if isset($class) && $class|strlen > 0} {$class}{/if}"{if isset($id) && $id|strlen > 0} id="{$id}"{/if}>
        <div class="panel-heading">
            {if $title|strlen > 0}
                <h5 class="panel-title">
                    {$title}
                    {if !empty($moreLink)}
                        <a class="more pull-right" href="{$moreLink}" title="{$moreTitle}" data-toggle="tooltip" data-placement="auto right" aria-label="{$moreTitle}">
                            <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    {/if}
                </h5>
            {/if}
        </div>
        <div{if $title|strlen > 0} class="panel-body"{/if}>
            <div class="autoplay {if $tplscope == 'box'}{block name="product-box-slider-class"}evo-box-slider{/block}{else}{block name="product-slider-class"}evo-slider{/block}{/if}">
                {foreach name="sliderproducts" from=$productlist item='product'}
                    <div class="product-wrapper{if isset($style)} {$style}{/if}">
                        {include file='productlist/item_slider.tpl' Artikel=$product tplscope=$tplscope class=''}
                    </div>
                {/foreach}
				
            </div>
        </div>
		
		{literal}
		<script type="text/javascript">
			$(document).ready(function(){
				$('.autoplay').slick({
					lazyLoad: 'ondemand',
					draggable: true,
					autoplay: true,
					autoplaySpeed: 2000,
					infinite: true,
					slidesToShow: 3,
					slidesToScroll: 1,
					touchThreshold: 1000
				});
			});
		</script>
		{/literal}
		
    </section>{* /panel *}
{/if}
{/strip}
</code>

Ich habe folgendes geändert:\\
\\
In Zeile habe ich das Wort "autoplay" hinzugefügt:
<code | download>
  <div class="autoplay {if $tplscope == 'box'}{block name="product-box-slider-class"}evo-box-slider{/block}{else}{block name="product-slider-class"}evo-slider{/block}{/if}">
</code>
danach habe ich noch folgendes hinzugefügt - die Wert hier kann man nach seinen Wünschen anpassen:
<code | download>
{literal}
		<script type="text/javascript">
			$(document).ready(function(){
				$('.autoplay').slick({
					lazyLoad: 'ondemand',
					draggable: true,
					autoplay: true,
					autoplaySpeed: 2000,
					infinite: true,
					slidesToShow: 3,
					slidesToScroll: 1,
					touchThreshold: 1000
				});
			});
		</script>
{/literal}
</code>