Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:jtl-shop:proudkt_slider

Produkt Slider

Aufgabe:
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}
Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
programmieren:jtl-shop (7 views) · Zuletzt geändert: 31/10/2021 14:44 von conny