Checkout - AGB Checkbox deaktivieren

Shopware 6 (German) Programmierung
13

Mein bisheriger Code von weiter oben funktioniert nicht mehr richtig. Seit einem Update ist es nicht mehr möglich, die AGB-Checkbox mit checked="checked"> im Twig vorauszuwählen. Das führt bei manchen Zahlarten, wie Sepa von PayPal zu Problemen. Ich habe den Code angepasst und lasse nun ein Javascript die Checkbox setzen.

Der neue Code:

{% sw_extends '@Storefront/storefront/page/checkout/confirm/index.html.twig' %}

{% block page_checkout_confirm_tos_control %}
    {% set tosModalTagOpen = '<button type="button" class="checkout-confirm-terms-modal btn btn-link-inline" aria-haspopup="dialog" data-ajax-modal="true" data-url="' ~ path('frontend.cms.page', { id: config('core.basicInformation.tosPage') }) ~ '">' %}
    {% set tosModalTagClose = '</button>' %}

    <div class="form-check-agb">
        {% block page_checkout_confirm_tos_control_label %}
            {{ parent() }}
        {% endblock %}
         
        {% block page_checkout_confirm_tos_control_checkbox %}
            {{ parent() }}
        {% endblock %}     
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const tos = document.getElementById('tos');

            if (!tos) {
                return;
            }

            setTimeout(() => {
                tos.checked = true;
            }, 500);

            const label = document.querySelector('.form-check-agb .checkout-confirm-tos-label');

            if (label) {
                label.addEventListener('click', (event) => {
                    if (event.target.closest('a')) {
                        return;
                    }

                    event.preventDefault();
                });
            }
        });
    </script>
{% endblock %}

Dazu etwas angepasstes css:

.form-check-agb {
    display: block;
    min-height: 1.3125rem;
    padding-left: 0;
    margin-bottom: 0.125rem;
}

.form-check-agb .checkout-confirm-tos-checkbox {
    opacity: 0;
    pointer-events: none;
}

.form-check-agb .checkout-confirm-tos-label {
    cursor: default !important;
}

Falls jemand Verbesserungsvorschläge hat oder Fehler im Code findet → gerne her damit!