Neu Slider ändern bei den Artikeln

  • Das FBA-Reparatur Tool zur Korrektur der doppelten FBA Aufträge vom 06.06. und folgend steht nun endlich zum Download bereit! HIER gehts zum Download

dreyarnatsu

Neues Mitglied
21. Oktober 2022
12
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 Slider für mobile Endgeräte zu klein Betrieb / Pflege von JTL-Shop 2
Neu Lagerbestand per Workflow oder DirectQery ändern / Ohne Bestand ausliefern ? Arbeitsabläufe in JTL-Wawi 0
Ändern der Standardrechnung verändert auch die Kundendaten JTL-Wawi 1.7 0
Beantwortet Feld Auftrag-Details-Zahlungen-Steuer per workflow ändern möglich? JTL-Workflows - Fehler und Bugs 1
Neu Herstellernummer bei eBay auf "nicht zutreffend" ändern per Massenupdate o. Ameise User helfen Usern - Fragen zu JTL-Wawi 0
JTL-Wawi Workflow: Änderung des Lagerbestand auf 0 soll Lieferzeit ändern JTL-Wawi 1.7 5
Neu Workflow - ändern der Auftragsfarbe auf Default in der Datenbank mittels SQL Gelöste Themen in diesem Bereich 10
Neu Vorlagen ändern Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu 1.7.14.0 Auftrag in der Kundenübersicht Rechtsklick Priorität ändern Untermenü fehlt -5 bis +5 JTL-Wawi - Fehler und Bugs 1
In Diskussion Wareneingang - Vorgangsstatus ändern JTL-Workflows - Ideen, Lob und Kritik 3
Neu product-hazard Hintergrundfarbe ändern Gelöste Themen in diesem Bereich 3
Neu Konfigurationsgruppen Ändern führt zu Freipositionen in allen alten Aufträgen JTL-Wawi - Fehler und Bugs 0
Neu 💚 Plugin: Resources & Health: Skripte einbinden, Logging-Einstellungen ändern uvm. - alles in einem Plugin! Plugins für JTL-Shop 10
Neu Template Vorlage ändern Technische Fragen zu Plugins und Templates 1
Kategoriedarstellung in Artikelübersicht auf linke Seite ändern - Nach update auf 5.2.2. ist dieses auf der rechten Seite? Einrichtung JTL-Shop5 1
Neu Hilfe bei E-Mail Template Bildgröße ändern. Templates für JTL-Shop 1
Neu Ändern der "Onlineshop URL" Gelöste Themen in diesem Bereich 1
Neu Rechnung ändern User helfen Usern - Fragen zu JTL-Wawi 2
Neu eBay Angebotszustand ändern JTL-Wawi 1.7 1
Artikelstandort in laufenden ebay angeboten ändern JTL-Wawi 1.6 0
Artikelbezeichnung in Auftrag ändern/ergänzen JTL-Wawi 1.7 1
Neu Farben ändern Templates für JTL-Shop 1
Workflow Lieferland und MWST automatisch ändern JTL-Wawi 1.6 3
Neu Workflow Zahlungsart ändern User helfen Usern - Fragen zu JTL-Wawi 6
Neu QR-Einzahlungsschein, bei mehr als CHF 999 fehlerhaft - wie Code für Format ändern? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 2
Neu Shopware 6 Kategorietyp über WaWi ändern Shopware-Connector 1
Neu Steuersatz ändern (Kleinunternehmer zu USt) - Variantenartikel werden nicht mehr importiert JTL-Ameise - Fehler und Bugs 8
Neu Rechnungskauf RatePay bei B2B nicht verfügbar Plugins für JTL-Shop 2
Neu Artikel bei Amazon Online die gar nicht online sein sollten. Amazon-Anbindung - Fehler und Bugs 2
Neu Sunmi t2 Mini mit sumup air, bei Kartenzahlung ploppt google wallet auf JTL-POS - Fehler und Bugs 0
Neu Interner Bestandsfehler bei Korrekturbuchung JTL-Wawi 1.7 0
Neu Angebote mit Überverkäufe bei eBay einstellen eBay-Anbindung - Ideen, Lob und Kritik 1
E-Mail-Zugangsdaten bei JTL-Shop-Hosting funktionieren nicht JTL-Wawi 1.7 1
Neu JTL WAWI - Land aus Dropdown bei Lieferadresse entfernen? Arbeitsabläufe in JTL-Wawi 4
Neu Dot liquid Problem. Artikel pro Zeile ausgeben bei Menge größer als 1 Gelöste Themen in diesem Bereich 2
Neu Präfix (Y) in Barcode für Auftragsnummer bei DHL Retoure JTL-ShippingLabels - Ideen, Lob und Kritik 0
Neu Frage zu Paypal Erweiterte Kreditkartenzahlung Sprachvariablen bei Bestellvorgang (Checkout) -> Zahlungsart Allgemeine Fragen zu JTL-Shop 2
Neu Bei Verkauf über JTL POS kann ich keine Rechnung erstellen - Auftrag wird extern abgerechnet? JTL-Shop - Fehler und Bugs 0
Neu Konfigurator Preisanzeige stimmt nicht bei Auswahl verschiedenen Steuerklassen Plugins für JTL-Shop 0
Neu Fehler bei der WAWI SQL Server Installation Gelöste Themen in diesem Bereich 10
Neu Amazon fehlende Versandkosten allgemeiner Fehler bei Amazon Amazon-Anbindung - Ideen, Lob und Kritik 0
Neu Neues Angebot wird zwar bei ebay veröffentlicht, im Bereich Marktplätze aber weiterhin unter "Einzustellende Angebote" angezeigt. eBay-Anbindung - Fehler und Bugs 3
Neu Amazon FBM-Retouren "Erstattung bei erstem Scan" Amazon-Anbindung - Ideen, Lob und Kritik 0
Neu Grundpreise sollen nicht bei Varianten angezeigt werden User helfen Usern - Fragen zu JTL-Wawi 2
Amazon Coupon Rabatt wird bei Rechnungsstellung durch JTL nicht berücksichtigt -> falsche Rechnung wird erstellt JTL-Wawi 1.6 1
Neu Neues Angebot wird zwar bei ebay veröffentlicht, im Bereich Marktplätze aber weiterhin unter "Laufende Angebote" angezeigt. Gelöste Themen in diesem Bereich 2
Neu Übertragungsfehler, Hard validation error bei Warenpost international JTL-Wawi - Fehler und Bugs 0
BUG Statistik bei Überverkäufe in Verbindung mit JTLPos JTL-Wawi 1.7 0
Neu PayPal Ratenzahlungsbanner, Verhalten bei unterschiedlichen Währungen und wird leider nicht im Konfigurator angezeigt Plugins für JTL-Shop 0
Neu bei Bezahlung immer 2 Ausdrucke - Reduzierung möglich? Fragen rund um LS-POS 0

Ähnliche Themen