Neu jtl.evo.js über Child Template anpassen. Geht das?

[juergen-sfx]

Kann mir jemand mit folgendem Problem helfen:

Ich entwickle ein Nova Child Theme. Ich muss die Basis-Konfiguration der Artikel-Slider anpassen: https://gitlab.com/jtl-software/jtl...es/NOVA/js/jtl.evo.js?ref_type=heads#L163-195
Ich möchte ungern die ganze jtl.evo.js in mein Child Theme kopieren um daran Änderungen vorzunehmen. Gibt es eine Möglichkeit im Child Template Teile der EvoClass zu überschreiben?

 

[martinwolf]

Was genau soll denn an der Basis-Konfiguration der Slider verändert werden, nur die Anzahl der sichtbaren Artikel pro Slide? Das kannst Du elegant über den Zusatzparameter "displayCounts" am inlcude der snippets/product_slider.tpl lösen.
Bsp. anhand des Slider sfür die Starsteitenartikel.
page/index.tpl ins Child und dann den Block anpassen:

{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
            displayCounts=[2, 3, 4, 5]}
    {/container}
{/block}

 

[juergen-sfx]

Hallo Martin,

wir müssen einen zusätzlichen Breakpoint einfügen und diverse andere Parameter ändern. Der Tipp mit den displayCounts ist aber auch gut Danke dafür.

 

[martinwolf]

Hallo Martin,

wir müssen einen zusätzlichen Breakpoint einfügen und diverse andere Parameter ändern. Der Tipp mit den displayCounts ist aber auch gut Danke dafür.

Das Ding ist, man kann ja keine bestehenden Klassen überschreiben von außen, lediglich erweitern. Im Falle einer Erweiterung der Klasse müsstest du dann zusätzlich deine neue Klasse instanzieren, was sich lediglich über die bestehende Klasse drüberlegen würde. Daher wäre es hier wohl besser, wenn du die gesamte jtl.evo.js einfach in dein Child einfügst. So mache ich das zumindest, wenn es Stellen zu überschreiben gilt, die so nicht vorgesehen sind.

 

[juergen-sfx]

Hallo Martin,
ja - genau so machen wir das aktuell auch. Ich hatte nur gehofft ein Javascript Profi kann mir sagen wie man eben nur den Teil anfasst, den man tatsächlich ändern will, ohne die ganze Datei zu überschreiben.

 

[css-umsetzung]

Ich habe im Template, die relevanten data Einträge der Slider geändert, so das das evo JS nicht darauf zugreift und starte die Slider mit meiner eigenen Konfiguration.


so als einfaches Beispiel:

$(function() {
  let css_slider_options = {
    'css_4': {
      dots: false,
      infinite: true,
      autoplay:false,
      variableWidth:false,
      speed: 300,
      mobileFirst:    true,
      slidesToShow: 1,
      slidesToScroll: 1,
      rows:           0,
      arrows:         false,
      mobileFirst:    true,
      responsive:     [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3
          }
        },
        {
          breakpoint: 992,
          settings: {
            slidesToShow:3,
            arrows: true,
            slidesToScroll: 3
          }
        },
        {
          breakpoint: 1300,
          settings: {
            slidesToShow:4,
            arrows: true,
            slidesToScroll: 4
          }
        }
      ]
    },
    'css_3': {
      dots: false,
      variableWidth:false,
      infinite: true,
      autoplay:false,
      speed: 300,
      mobileFirst:    true,
      slidesToShow: 1,
      slidesToScroll: 1,
      rows:           0,
      arrows:         false,
      mobileFirst:    true,
      responsive:     [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 1100,
          settings: {
            slidesToShow:2,
            arrows: true,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 1300,
          settings: {
            slidesToShow:3,
            arrows: true,
            slidesToScroll: 2
          }
        }
      ]
    },
    'weitere_marken': {
      dots: false,
      variableWidth:false,
      infinite: true,
      autoplay:false,
      speed: 300,
      mobileFirst:    true,
      slidesToShow: 1,
      slidesToScroll: 1,
      rows:           0,
      arrows:         false,
      mobileFirst:    true,
      responsive:     [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 1100,
          settings: {
            slidesToShow:2,
            arrows: true,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 1300,
          settings: {
            slidesToShow:3,
            arrows: true,
            slidesToScroll: 2
          }
        }
      ]
    },
    'css_reviews_content': {
      dots: true,
      variableWidth:false,
      infinite: true,
      autoplay: false,
      speed: 300,
      mobileFirst: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      rows: 0,
      arrows: false,
      asNavFor: '.css_reviews_image-slider'
    },
    'css_reviews_image': {
      dots: false,
      fade:false,
      speed:1000,
      variableWidth:false,
      infinite: true,
      autoplay: false,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      rows: 0,
      arrows: false,
      asNavFor: '.css_reviews_content-slider'
    }
  };

  $('.css-product-slider').each(function() {
    $(this).slick(css_slider_options[$(this).data("slick-type")]);
  });
});

 

[juergen-sfx]

Danke Andreas sehr interessanter Ansatz.