Neu Slider ändern bei den Artikeln

[dreyarnatsu]

Hallo zusammen,

ich möchte die Artikeldetailseite so umgestalten, dass anstelle eines Sliders, wie von JTL selbst implementiert, Buttons vorhanden sind, um zwischen den Artikelbildern zu wechseln, falls mehrere Bilder für einen Artikel vorhanden sind.

Hier ist ein Bild wie es Standardmäßig aussieht:


Hier ist der Origniale Code:

{block name='productdetails-image-preview'}
{if empty($smarty.get.quickView)}
{col cols=12 align-self='end' class='product-detail-image-preview-bar'}
{$imageCount = $Artikel->Bilder|count}
{$imageCountDefault = 5}
{if $imageCount > 1}
<div id="gallery_preview_wrapper" class="product-thumbnails-wrapper">
<div id="gallery_preview"
class="product-thumbnails slick-smooth-loading carousel carousel-thumbnails slick-lazy {if $imageCount <= $imageCountDefault}slick-count-default{/if}"
data-slick-type="gallery_preview">
{if $imageCount > $imageCountDefault}
<button class="slick-prev slick-arrow slick-inital-arrow" aria-label="Previous" type="button" style="">Previous</button>
{/if}
{block name='productdetails-image-preview-images'}
{foreach $Artikel->Bilder as $image}
{strip}
<div class="square square-image js-gallery-images
{if $image@first} preview-first {if $imageCount <= $imageCountDefault} first-ml{/if}
{elseif $image@index >= $imageCountDefault} d-none{/if}
{if $image@last && $imageCount <= $imageCountDefault} last-mr{/if}">
<div class="inner">
{image alt=$image->cAltAttribut
class="product-image"
fluid=true
lazy=true
webp=true
src="{$image->cURLKlein}"
}
</div>
</div>
{/strip}
{/foreach}
{/block}
{if $imageCount > $imageCountDefault}
<button class="slick-next slick-arrow slick-inital-arrow" aria-label="Next" type="button" style="">Next</button>
{/if}
</div>
</div>
{/if}
{/col}
{/if}
{/block}


Hier ist der Code denn ich angepasst habe:
{block name='productdetails-image-preview'}
{if empty($smarty.get.quickView)}
{col cols=12 align-self='end' class='product-detail-image-preview-bar'}
{$imageCount = $Artikel->Bilder|count}
{$imageCountDefault = 5}
{if $imageCount > 1}
<div id="slider_wrapper" class="product-thumbnails-wrapper">
<div id="slider_preview"
class="product-thumbnails {if $imageCount <= $imageCountDefault}slick-count-default{/if}"
data-slick-type="slider_preview">
{if $imageCount > $imageCountDefault}
<button class="slick-prev slick-arrow slick-inital-arrow" aria-label="Previous" type="button">Previous</button>
{/if}
{block name='productdetails-image-preview-images'}
{foreach $Artikel->Bilder as $image}
{strip}
<div class="inner
{if $image@first} preview-first {if $imageCount <= $imageCountDefault} first-ml{/if}
{elseif $image@index >= $imageCountDefault} d-none{/if}
{if $image@last && $imageCount <= $imageCountDefault} last-mr{/if}">
{image alt=$image->cAltAttribut
class="product-image"
fluid=true
lazy=true
webp=true
src="{$image->cURLKlein}"
}
</div>
{/strip}
{/foreach}
<div class="slider-article w-100">
<a id="slider-article-prev" class="article-prev article-slider-last"></a>
<a id="slider-article-nav" class="article-next article-slider-next"></a>
</div>
{/block}
{if $imageCount > $imageCountDefault}
<button class="slick-next slick-arrow slick-inital-arrow" aria-label="Next" type="button">Next</button>
{/if}
</div>
</div>
{/if}
{/col}
{/if}
<script>

var $slider_article = $('#slider_preview');

settings = {
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: document.getElementById('slider-article-nav'),
prevArrow: document.getElementById('slider-article-prev'),
};

window.on = function() {
if ($slider_article.hasClass('slick-initialized')) {
$slider_article.slick('unslick');
return;
}
if (!$slider_article.hasClass('slick-initialized')) {
return $slider_article.slick(settings);
}
};


window.addEventListener("DOMContentLoaded", (event) => {
console. log("DOM fully loaded and parsed");
$slider_article.slick(settings);
console.log("Slick Done");
});

</script>
<!-- Slider End -->
{/block}

 

[dreyarnatsu]

hat sich geklärt ticket kann geschlossen werden