In HTML gibt es die Möglichkeit Inputs auch außerhalb einer Form zu haben und diese mit einer Form zu verknüpfen. Dazu nutzt man das form-Attribute. Gerade im Checkout von Shopware 6 ist es echt praktisch. Beim DatePicker besteht aber das Problem, dass das Input, dass man selbst definiert durch ein neues Input-Feld ersetzt wird, wenn Flatpickr sich initialisiert. Diesem neuen Input muss man auch das form-Attribute geben.
Tut man es nicht, funktioniert z.B. das required-Flag am DatePicker nicht.
Hier eine Quick&Dirty Lösung für das Problem:
const observer = new MutationObserver((mutationlist, observer) => {
mutationlist.forEach(mutation => {
if(mutation.type === 'childList') {
const picker = document.querySelector('.hp_shipping_date.form-control');
if(picker) {
picker.setAttribute('form', 'confirmOrderForm');
observer.disconnect();
}
}
});
});
observer.observe(document.querySelector('.hp-shipping-date-container'), {childList: true, subtree: true});
Wenn man Code in seinen Blog-Posts verwendet gilt dafür das Selbe wie für den Text. Der Code muss gut lesbar sein. Strukturiert und nicht in seiner Masse den Leser erschlagen. Wenn man einen großen Block Code vor sich hat, fühlt man sich sehr schnell davon erschlagen. Hier hilft selbst minimales Syntax-Highlighting sehr.
Deswegen wollte ich gerne bei dem Code in meinem Blog richtiges Syntax-Highlighting haben. Den PHP-Code wollte ich nicht anfassen und dachte mir: "Da gibt es doch bestimmt was in JavaScript". 1 Minute später hatte ich eine Lösung gefunden.
highlight.js lässt sich ganz schnell integrieren und man muss nicht mal was downloaden.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
Wenn man nun keine code-Tags verwendet, sondern wie ich es gemacht hatte, ein DIV mit spezieller CSS-Klasse verwendet hatte, muss man highlight.js noch sagen, dass dieser verwendet werden soll. Dies macht man ganz einfach über JQuery.
<script type="text/javascript">
hljs.configure({useBR: true});
$('div.bcode').each(function(i, block) {
hljs.highlightBlock(block);
});
</script>
Und schon hat man alle Quellcodes mit Syntax-Highlighting. Man kann es mit Vorgaben, welches Highlighting man gerne möchte (XML, PHP, Java, etc), aber selbst ohne diese Angaben sind die Resultate schon wirklich super.
bezahlt von 
Blog: Blog-entries by search-pattern/Tags:
