Ratenrechner Widget anpassen

Geändert am Mi, 10 Jul um 10:15 VORMITTAGS

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">
    $(function() {
        let eCcomponent = document.querySelector('easycredit-widget');
        let eCshadowRoot = eCcomponent.shadowRoot;
        let eCstyle = document.createElement('style');
        eCstyle.textContent = `
                                    /* Beispiel CSS */
                                    .ec-widget-container .ec-widget {
                                        box-shadow: none;
                                        width: 100%;
                                    }

                                    /*TODO: Weiteres CSS hier... */
                                    `;
        eCshadowRoot.prepend(eCstyle);
    });
</script>

Achte darauf, dass der Code am besten nach dem Widget eingebunden wird.

Tags:

#css #widget #Ratenrechner