Shopware 6 Twig：如何在父区块子div内新增区块（无需JS）

要解决自定义内容被放在div外部的问题，同时避免替换整个父区块引发插件冲突，可按以下方式实现：

核心思路 #

不依赖{{ parent() }}输出完整父区块内容，手动重构page_checkout_confirm_tos_control区块的内部结构，保留原有子区块的调用（确保其他插件的扩展生效），并将自定义内容插入到div内部。

正确实现代码 #

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

{% block page_checkout_confirm_tos_control %}
    <div class="form-check">
        <!-- 保留原有复选框区块，支持其他插件扩展 -->
        {{ block('page_checkout_confirm_tos_control_checkbox') }}
        
        <!-- 保留原有标签区块，支持其他插件扩展 -->
        {{ block('page_checkout_confirm_tos_control_label') }}
        
        <!-- 自定义复选框内容，现在处于div内部 -->
        {% block page_checkout_confirm_shippingdata_control_checkbox %}
            <input type="checkbox"
                   class="checkout-confirm-shippingdata-checkbox form-check-input{% if formViolations.getViolations('/shippingdata') is not empty %} is-invalid{% endif %}"
                   required="required"
                   id="shippingdata"
                   form="confirmOrderForm"
                   name="shippingdata"/>
        {% endblock %}

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

方案优势 #

• 自定义内容完全位于目标div内部，无需JavaScript调整DOM结构
• 通过block()调用原有子区块，不会破坏其他插件对page_checkout_confirm_tos_control_checkbox或page_checkout_confirm_tos_control_label的扩展
• 保留了原有条款复选框的所有功能（包括表单验证状态）

内容的提问来源于stack exchange，提问作者Alex