Ratenrechner Widget anpassen

Geändert am Fri, 03 Nov 2023 um 11:47 AM


Standardmäßig liefert easyCredit ein Ratenrechner Widget aus, das wie folgt aussieht:



EasyCredit verwendet für dieses Widget ein Web Component was es erstmal erschwert das Styling anzupassen.


Eine der wenigen Lösungen ist es hier per JavaScript CSS in das Web Component hinzuzufügen. Dazu einfach folgendes HTML auf der Artikelseite einbinden:


<script type="application/javascript">
    const component = document.querySelector('easycredit-widget');
    const shadowRoot = component.shadowRoot;
    const style = document.createElement('style');
    style.textContent = `
        /* Beispiel CSS */
        .ec-widget-container .ec-widget {
            box-shadow: none;
        }

        /*TODO: Weiteres CSS hier... */
        `;
    shadowRoot.prepend(style);
</script>

Tags: