Neu Slider ändern bei den Artikeln

dreyarnatsu

Aktives Mitglied
21. Oktober 2022
16
0
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:
Bildschirmfoto vom 2023-06-02 13-53-03.png

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}
 
Zuletzt bearbeitet:
Ähnliche Themen
Titel Forum Antworten Datum
Neu Gutschein E-Mail versand direkt nach den ändern der Kundenklasse Allgemeine Fragen zu JTL-Shop 0
Neu Bestseller falsch und ändern sich nicht Allgemeine Fragen zu JTL-Shop 13
Anzahl der Ausdrucke (Rechnung) lässt sich nicht ändern JTL-Wawi 1.10 4
Kategoriedaten via Ameise ändern schlägt fehl JTL-Wawi 1.10 5
Neu Wie kann man in den Vorlagen die Mengenanzeige von "STK" in "Menge" oder "x" ändern ! User helfen Usern - Fragen zu JTL-Wawi 2
Neu Warum wird im Shop 5 der Lieferanten-Artikelname anstatt WAWI-Artikelname angezeigt? Wie kann ich das ändern? Betrieb / Pflege von JTL-Shop 1
Kundenkategorien ändern mit Ameise JTL-Wawi 1.9 3
Neu SHOP 5.4.1: Absturz beim Ändern von Mengen im Warenkorb, wenn Menge > Bestand JTL-Shop - Fehler und Bugs 1
Neu Benutzer Rechte - Versand Mitarbeiter soll Menge von Freipositionen mit der Lieferscheinerstellung ändern dürfen Arbeitsabläufe in JTL-Wawi 4
Neu Domain ändern aber Traffic mitnehmen? Allgemeine Fragen zu JTL-Shop 4
Neu NovaChild Abstand zwischen Zeilen in der Produkt-Detailansicht ändern/reduzieren Templates für JTL-Shop 2
Über SQL Abfragen, Preise eines SCX Angebotes ändern kaufland.de - Anbindung (SCX) 6
Neu Ändern der Header-Einstellungen im NOVA-Template ziehen nicht Templates für JTL-Shop 1
Neu Wie Auftragsstatus ändern von "ohne Versand abgeschlossen" auf "Abgeschlossen"? Arbeitsabläufe in JTL-Wawi 4
Neu Expresskauf lässt sich in Paypal Plugin nicht ändern Plugins für JTL-Shop 1
Neu Trennlinie im Composer Farbe ändern Allgemeine Fragen zu JTL-Shop 0
Rechnung stornieren - Preis ändern geht nicht? JTL-Wawi 1.9 1
Beantwortet Workflow - Versandart ändern bei Fehler JTL-Workflows - Ideen, Lob und Kritik 2
Neu Mittels Auftragsimport bestehenden Auftrag Rückhaltegrund ändern? JTL-Ameise - Ideen, Lob und Kritik 12
Neu Bild im Blog-Artikel ändern geht nicht. Allgemeine Fragen zu JTL-Shop 3
Neu Nova Template - Filter Eigenes Fenster Hintergrundfarbe ändern + Kategoriebilder Mobil anzeigen lassen Templates für JTL-Shop 0
Variationswertname 1 ändern JTL-Wawi 1.9 2
Neu Shopify Connector Fehler bezüglich "unique key" bei den Kategorien Shopify-Connector 0
Neu Erste Position wird bei Zwischensumme nicht mitberechnet JTL-Wawi App 0
Neu Artikel-Probleme bei der TikTok Shop Anbindung Einrichtung und Installation von JTL-eazyAuction 2
Neu Fehler bei der Datenbank Sicherung Export JTL-Wawi - Fehler und Bugs 1
Neu eigene Felder bei Artikel Eigene Übersichten ausgeben lassen Eigene Übersichten in der JTL-Wawi 2
Hilfe - Steuerverwaltung bei FBA Versand aus Frankreich Italien & Co. JTL-Wawi 1.9 0
Neu Bildgröße schrumpft bei Variantenwechsel (Dropper/NOVA) JTL-Shop - Fehler und Bugs 5
Neu "Die ConnectionString-Eigenschaft wurde nicht initialisiert" Fehler bei Zugriff über VPN JTL-Wawi - Fehler und Bugs 6
Neu Benachrichtigung bei Chargenwechsel User helfen Usern - Fragen zu JTL-Wawi 2
Versandbenachrichtigung gehen nicht bei allen raus JTL 1.9.6.5 JTL-Wawi 1.9 2
Neu Aufträge überspringen bei Rollender Kommissionierung Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 0
Neu Barcode variiert bei Wiegeartikeln und werden nicht mehr erkannt. Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 2
Kein Grusstext bei Mehrzweckgutscheinen möglich? Einrichtung / Updates von JTL-Vouchers 1
Neu OSS und neue Versandländer: jedes EU-Land als Steuerzone bei jedem zusätzlichen Versandland manuell anlegen? User helfen Usern - Fragen zu JTL-Wawi 0
Neu product_identifier auf "0" führt zu Problemen bei Gutschriften Zuordnung bei Taxdoo JTL-Wawi - Fehler und Bugs 0
Neu JTL-Wawi 1.10.8.0 Error bei Bestellhistorie erneut Abrufen vom Shop JTL-Wawi - Fehler und Bugs 0
Neu Übermittlung der "Tracking ID" bei DHL Warenpost International unterbinden User helfen Usern - Fragen zu JTL-Wawi 0
Neu 404-Fehler bei SEO-URLs mit Schrägstrich (/) - trotz Update auf 5.4.1 JTL-Shop - Fehler und Bugs 5
Neu Fehler bei Abgleich WooCommerce-Connector 12
Neu Seit 10.3.2025 fehlt bei verschickten Sendungen auf Ebay die DHL Sendnungsnummer JTL-Wawi - Fehler und Bugs 7
Neu Bearbeitungszeit bei Amazon wird überschrieben User helfen Usern - Fragen zu JTL-Wawi 1
Neu Produzierbarer Bestand reduzieren bei eingehenden Aufträgen FAQ Plan & Produce 0
Artikel stehen auf eingestellt erscheinen aber nicht bei Kaufland kaufland.de - Anbindung (SCX) 0
Lagerplatz bevorzugen (Retourenplatz) bei eingehenden Aufträgen JTL-Wawi 1.9 2
Neu Liefer- bzw. Leistungsdatum bei Teillieferungen JTL-Wawi - Fehler und Bugs 0
Neu Deaktivierte Zahlungsarten werden bei Kunden-Neuanlage angezeigt JTL-Wawi - Fehler und Bugs 0
Nach Update auf 1.10.10.3 bei Auftragsexport über Ausgabe-->Auftrag-->Exportieren Zugriff auf Pfad C:\programfiles(x86)\JTLSoftware\xxx verweigert JTL-Wawi 1.10 4
Neu Seit Update auf 1.10.10.3: Fehler bei Preis berechnung JTL-Wawi - Fehler und Bugs 25

Ähnliche Themen