KI im Alltag - Checkbox AGB und Widerrufsbelehrung nach unten gesetzt

Die KI war so freundlich mir bei den Checkboxen der AGB und Widerrufsbelehrung zu helfen, um diese im Checkout weiter unten anzuzeigen. Da das entsprechende Plugin mit 5 € / Monat sau teuer ist, teile ich hier mal die Ableitung. Mit dem kostenlosen Plugin Custom Template Manager lässt sich das auch für „Anfänger“ leicht einbinden.

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

{% block base_header %}
{% sw_include '@Storefront/storefront/layout/header/header-minimal.html.twig' %}
{% endblock %}

{% block base_navigation %}{% endblock %}

{% block page_checkout_main_content %}
{% block page_checkout_confirm %}
{% block page_checkout_confirm_header %}
<h1 class="confirm-main-header">
{{ 'checkout.confirmHeader'|trans|sw_sanitize }}
</h1>
{% endblock %}

{% block page_checkout_confirm_alerts %}
{% block page_checkout_confirm_violations %}
{% for violation in formViolations.getViolations() %}
{% set snippetName = "error.#{violation.code}" %}
{% set fieldName = violation.propertyPath|trim('/', 'left') %}

{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type: 'danger',
content: snippetName|trans({'%field%': fieldName})|sw_sanitize
} %}
{% endfor %}
{% endblock %}
{% endblock %}

{% block page_checkout_confirm_address %}
<div class="confirm-address">
{% sw_include '@Storefront/storefront/page/checkout/confirm/confirm-address.html.twig' %}
</div>
{% endblock %}

{% block page_checkout_confirm_payment_shipping %}
<div class="confirm-payment-shipping">
<div class="row">
{% block page_checkout_confirm_payment %}
<div class="col-sm-6 confirm-payment">
{% sw_include '@Storefront/storefront/page/checkout/confirm/confirm-payment.html.twig' %}
</div>
{% endblock %}

{% block page_checkout_confirm_shipping %}
{% set PHYSICAL_STATE = constant('Shopware\\Core\\Content\\Product\\State::IS_PHYSICAL') %}
{% if page.cart.lineItems.hasLineItemWithState(PHYSICAL_STATE) %}
<div class="col-sm-6 confirm-shipping">
{% sw_include '@Storefront/storefront/page/checkout/confirm/confirm-shipping.html.twig' %}
</div>
{% endif %}
{% endblock %}
</div>
</div>
{% endblock %}

{% block page_checkout_confirm_product_table %}
<div class="confirm-product">
{% block page_checkout_confirm_table_container %}
<div class="card">
<div class="card-body">
{% block page_checkout_confirm_table_header %}
{% sw_include '@Storefront/storefront/component/checkout/cart-header.html.twig' with {
showTaxPrice: true
} %}
{% endblock %}

{% block page_checkout_confirm_table_items %}
{% for lineItem in page.cart.lineItems %}
{% block page_checkout_confirm_table_item %}
{% sw_include '@Storefront/storefront/component/line-item/line-item.html.twig' with {
redirectTo: 'frontend.checkout.confirm.page',
showTaxPrice: true
} %}
{% endblock %}
{% endfor %}
{% endblock %}
</div>
</div>
{% endblock %}
</div>
{% endblock %}

{% block page_checkout_confirm_hidden_line_items_information %}
{% sw_include '@Storefront/storefront/component/checkout/hidden-line-items-information.html.twig' with {
cart: page.cart,
lineItems: page.cart.lineItems
} %}
{% endblock %}
{% endblock %}
{% endblock %}

{% block page_checkout_additional %}
{% if config('core.cart.showCustomerComment') %}
<div class="checkout-additional">
{% block page_checkout_finish_customer_comment %}
<div class="card checkout-card">
<div class="card-body">
{% block page_checkout_confirm_customer_comment_header %}
<div class="card-title">
{{ 'checkout.customerCommentHeader'|trans|sw_sanitize }}
</div>
{% endblock %}

{% block page_checkout_confirm_customer_comment_control %}
<div class="checkout-customer-comment-control">
{% block page_checkout_confirm_customer_comment_control_textfield_label %}
<label class="form-label" for="{{ constant('Shopware\\Core\\Checkout\\Order\\SalesChannel\\OrderService::CUSTOMER_COMMENT_KEY') }}">
{{ 'checkout.customerCommentLabel'|trans|sw_sanitize }}
</label>
{% endblock %}

{% block page_checkout_confirm_customer_comment_control_textfield %}
<textarea class="form-control"
placeholder="{{ 'checkout.customerCommentPlaceholder'|trans|sw_sanitize }}"
id="{{ constant('Shopware\\Core\\Checkout\\Order\\SalesChannel\\OrderService::CUSTOMER_COMMENT_KEY') }}"
form="confirmOrderForm"
name="{{ constant('Shopware\\Core\\Checkout\\Order\\SalesChannel\\OrderService::CUSTOMER_COMMENT_KEY') }}"></textarea>
{% endblock %}
</div>
{% endblock %}
</div>
</div>
{% endblock %}
</div>
{% endif %}
{% endblock %}

{% set formAddHistoryOptions = {
entries: [{
state: {},
title: 'account.ordersTitle'|trans,
url: path('frontend.account.order.page')
}]
} %}

{% set confirmOrderFormAction = path('frontend.checkout.finish.order') %}

{% block page_checkout_aside_actions %}
<div class="checkout-aside-action">
<form id="confirmOrderForm"
action="{{ confirmOrderFormAction }}"
data-form-preserver="true"
data-form-submit-loader="true"
data-form-add-history="true"
data-form-add-history-options="{{ formAddHistoryOptions|json_encode }}"
method="post">
{% block page_checkout_confirm_form_submit %}
<div class="d-grid">
<button id="confirmFormSubmit"
class="btn btn-primary btn-lg"
form="confirmOrderForm"
{% if page.cart.errors.blockResubmit %}
disabled
{% endif %}
type="submit">
{{ 'checkout.confirmSubmit'|trans|sw_sanitize }}
</button>
</div>
{% endblock %}

<!-- Checkboxen für AGB und Widerrufsbelehrung -->
{% block page_checkout_confirm_tos %}
<div class="confirm-tos mt-3">
<div class="form-check">
{% block page_checkout_confirm_tos_control_checkbox %}
<input type="checkbox"
class="checkout-confirm-tos-checkbox form-check-input{% if formViolations.getViolations('/tos') is not empty %} is-invalid{% endif %}"
required="required"
id="tos"
form="confirmOrderForm"
name="tos">
{% endblock %}

{% block page_checkout_confirm_tos_control_label %}
<label for="tos"
class="checkout-confirm-tos-label custom-control-label">
{{ 'checkout.confirmTermsText'|trans({
'%url%': path('frontend.cms.page', { id: config('core.basicInformation.tosPage') })
})|raw }}
</label>
{% endblock %}
</div>

{% if page.showRevocation() %}
<div class="form-check mt-2">
{% block page_checkout_confirm_revocation_control_checkbox %}
<input type="checkbox"
class="checkout-confirm-revocation-checkbox form-check-input{% if formViolations.getViolations('/revocation') is not empty %} is-invalid{% endif %}"
required="required"
id="revocation"
form="confirmOrderForm"
name="revocation">
{% endblock %}

{% block page_checkout_confirm_revocation_control_label %}
<label for="revocation"
class="checkout-confirm-revocation-label custom-control-label">
{{ 'checkout.confirmRevocationTerms'|trans() }}
</label>
{% endblock %}
</div>
{% endif %}

<!-- Text für Widerrufsbelehrung -->
<p class="revocation-notice mt-2">
{{ 'checkout.confirmRevocationNotice'|trans({
'%url%': path('frontend.cms.page', { id: config('core.basicInformation.revocationPage') })
})|raw }}
</p>
</div>
{% endblock %}
</form>
</div>
{% endblock %}

{% block base_footer %}
{% sw_include '@Storefront/storefront/layout/footer/footer-minimal.html.twig' %}
{% endblock %}

Die Ableitung sollte im Template „/page/checkout/confirm/index.html.twig“ erfolgen

Da das Ganze per KI generiert ist, ist natürlich jeder selbst verantwortlich dies zu nutzen und macht dies auf eigene Gefahr, aber ich habe es in zwei Shops im Einsatz und es funktioniert super.

1 „Gefällt mir“

Kleiner Tipp: Hier im Forum gibt es dafür eine Code-Funktion. Dann lässt sich der Text bzw. Code besser darstellen und auch besser kopieren (falls interesse).

1 „Gefällt mir“

Habe mich die letzten paar Stunden mal ein bisschen in Programmierung eingelesen und das ohne KI deutlich geschmeidiger hinbekommen, falls jemand Interesse hat.
Hier ist auch eine Warnmeldung vorhanden, wenn die Checkbox nicht angehakt ist, aber dafür muss man scrollen.

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

{% block page_checkout_confirm_tos %}{% endblock %}

{% block page_checkout_aside_actions %}
          <div class="confirm-tos">
                <div class="card checkout-card">
                    <div class="card-body">
                        {% block page_checkout_confirm_tos_header %}
                            <div class="card-title">
                                {{ 'checkout.confirmTermsHeader'|trans|sw_sanitize }}
                            </div>
                        {% endblock %}

                        {% block page_checkout_confirm_revocation_notice %}
                            <p class="revocation-notice">
                                {{ 'checkout.confirmRevocationNotice'|trans({
                                    '%url%': path('frontend.cms.page', { id: config('core.basicInformation.revocationPage') })
                                })|raw }}
                            </p>
                        {% endblock %}

                        {% block page_checkout_confirm_tos_control %}
                            <div class="form-check">
                                {% block page_checkout_confirm_tos_control_checkbox %}
                                    <input type="checkbox"
                                           class="checkout-confirm-tos-checkbox form-check-input{% if formViolations.getViolations('/tos') is not empty %} is-invalid{% endif %}"
                                           required="required"
                                           id="tos"
                                           form="confirmOrderForm"
                                           name="tos">
                                {% endblock %}

                                {% block page_checkout_confirm_tos_control_label %}
                                    <label for="tos"
                                           class="checkout-confirm-tos-label custom-control-label">
                                        {{ 'checkout.confirmTermsText'|trans({
                                            '%url%': path('frontend.cms.page', { id: config('core.basicInformation.tosPage') })
                                        })|raw }}
                                    </label>
                                {% endblock %}
                            </div>
                        {% endblock %}

                        {% block page_checkout_confirm_revocation_control %}
                            {% if page.showRevocation() %}
                                <div class="form-check">
                                    {% block page_checkout_confirm_revocation_control_checkbox %}
                                        <input type="checkbox"
                                               class="checkout-confirm-revocation-checkbox form-check-input{% if formViolations.getViolations('/revocation') is not empty %} is-invalid{% endif %}"
                                               required="required"
                                               id="revocation"
                                               form="confirmOrderForm"
                                               name="revocation">
                                    {% endblock %}

                                    {% block page_checkout_confirm_revocation_control_label %}
                                        <label for="revocation"
                                               class="checkout-confirm-revocation-label custom-control-label">
                                            {{ 'checkout.confirmRevocationTerms'|trans() }}
                                        </label>
                                    {% endblock %}
                                </div>
                            {% endif %}
                        {% endblock %}
                    </div>
                </div>
            </div>
                {{ parent() }}
{% endblock %}

Das geht jedem so, der ChatGPT nutzt :joy:

1 „Gefällt mir“

Ja, die „denkt“ noch ein bisschen zu kompliziert :smiley:
Hat mich aber dennoch auf die richtige Spur gebracht.