Tutorial: Wunsch-Lieferdatum löschbar machen [Shopware 5]

Unser Wunsch-Lieferdatum-Plugin für Shopware 5 ermöglicht eine einfache Angabe eines Lieferdatums im Checkout-Prozess. Aktuell ist nach der Wahl des Datums zwar möglich, dieses zu korrigieren und ein anderes Datum zu setzen, nicht aber, es vollständig zu löschen. Im folgenden Tutorial erklären wir Euch diese recht einfache Erweiterung für unser Shopware-Plugin „Wunsch-Lieferdatum / Abhol-Termin (Datum & Uhrzeit)“ für Shopware 5 (https://store.shopware.com/dtgs01537/wunsch-lieferdatum/abhol-termin-datum-uhrzeit.html):

Wichtige Hinweise vorab!

Bitte installiert euch mindestens die Version 3.0.0, mit niedrigeren Versionen ist dieses Tutorial nicht getestet.
Die Anpassungen, die ihr im Rahmen dieses Tutorials vornehmen werdet, passieren direkt an den Plugin-Files, d.h. es ist nicht update-safe! Nach einem Update des Plugins müssen diese Anpassungen erneut vorgenommen werden.
Die Modifikation des Codes/des Plugins nehmt Ihr auf eigene Gefahr vor, wir können euch im Rahmen unseres Plugin-Supports keinen Support dafür anbieten. Grundkenntnisse in der Template-Erstellung sind hilfreich.
Das Tutorial bezieht sich auf Shopware 5 und die Verwendung des Standard-Responsive Themes; solltet ihr ein Custom Theme verwenden, sind ggf. weitere Anpassungen notwendig.
Die Pflichtfeld-Prüfung habe ich nur grob getestet. Bitte testen verschiedene Szenarien nach der Umsetzung durch.

Implementation

Jetzt geht es los: öffnet zunächst die folgende Datei:

custom/plugins/DtgsDeliveryDate/Resources/views/frontend/plugins/deliverydate/checkout/confirm/date_panel.tpl

Hier fügt ihr nun ein kleines „x“ hinzu, welches neben dem Feld für die Eingabe des Datums erscheint. Wir geben ihm die Klasse „clearable__clear“, die ihr später per CSS selber stylen könnt.

×

Diese Zeile muss direkt unter dem input-Tag des Datepickers platziert werden, also hier:

{s name=“DeliveryDateLabel“}Wunsch-Lieferdatum{/s}:

Im Anschluss müssen wir noch Javascript-Code in der Datei

custom/plugins/DtgsDeliveryDate/Resources/views/frontend/plugins/deliverydate/checkout/confirm/javascript.tpl

hinzufügen. Sucht dazu in dieser Datei nach diesem Code:

$.subscribe('plugin/swDatePicker/onInputChange', function() {
   ajaxSaveDate();
});

und fügt darunter diesen Code ein:

$('.clearable__clear').click(function() {
    let targetFp = document.getElementById("dtgs_delivery_date")._flatpickr;
    targetFp.clear();
})

Löscht im Anschluss zur Sicherheit einmalig euren Shop-Cache.

Viel Erfolg!