programmieren:jtl-shop:proudkt_slider
Produkt Slider
Aufgabe:
Produkt Slider für Startseite scrollbar machen
für JTL Shop4
Produkt Slider für Startseite scrollbar machen
für JTL Shop4
Hier ein Link mit weiteren Infos für Shop5
https://www.sfxonline.de/blog/optionen-der-slick-slider-in-jtl-shop-5-aendern/
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:
- 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}
Ich habe folgendes geändert:
In Zeile habe ich das Wort „autoplay“ hinzugefügt:
- 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}">
danach habe ich noch folgendes hinzugefügt - die Wert hier kann man nach seinen Wünschen anpassen:
- 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}
programmieren:jtl-shop (347 views) · Zuletzt geändert: 31/10/2021 14:44 von conny