shopware 6 twig 在另一个块子 div 内添加块

Question

我想知道在 shopware 6 中是否有解决这个问题的方法。许多块都有一些子元素。例如。如果我想在结帐时添加一个复选框，我需要替换整个块。这会导致其他插件复杂化，它们也使用相同的块。

Shopware 6 树枝：

{% block page_checkout_confirm_tos_control %}
                            <div class="form-check"> <!-- <-- child div -->
                                {% 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 %}
                                <!-- add content/other block here -->
                            </div>
                        {% endblock %}

我的树枝：

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

{% block page_checkout_confirm_tos_control %}
    {{ parent() }}

    <!-- ! This isn't inside the child div of the block page_checkout_confirm_tos_control -->
    {% 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 %}

{% endblock %}```

Is there any solution to do that without js?

Thank you very much.

Answer 1

在那种特定情况下，为什么不直接将最后一个块附加到

.form-check

内？

{% block page_checkout_confirm_tos_control_label %}
    {{ parent() }}

    {% block page_checkout_confirm_shippingdata_control_checkbox %}
        ...
    {% endblock %}

    {% block page_checkout_confirm_shippingdata_control_label %}
        ...
    {% endblock %}
{% endblock %}

在我看来，这是进入内部的有效方法

.form-check

。另一方面，我明白为什么将另一个元素的标签附加到特定块可能感觉不“干净”。如果你有这种感觉并且不着急，你可以打开一个 pull request 添加一个块来覆盖

.form-check

的内部。

{% block page_checkout_confirm_tos_control %}
    <div class="form-check">
        {% block page_checkout_confirm_tos_control_form_check %}
            ...
        {% endblock %}
    </div>
{% endblock %}

一旦合并并发布，您的插件即将进行的更新可能会使用该新块。