Wie binde ich zwei Checkout-Formularelemente in ein div ein?
Nehmen wir zum Beispiel an, ich wollte diese Felder für Land und Postleitzahl in ein div mit der Klasse von einschließen. example-classWie würde ich das tun?
Was ich probiert habe
Ich habe versucht, dies zu erreichen, indem ich sie als Kinder von hinzufügte, <item name="shippingAddress" xsi:type="array">aber das verursacht nur Fehler im Frontend. Obwohl ich eine leere Texteingabe ohne Beschriftung erhalten habe, .example-classgab es Fehler im Frontend.
Der Fehler: Cannot read property 'indexedOptions' of undefined
Das ist mein schneller Versuch:
Magento_Checkout / web / template / versandadresse / form.html
<div id="shipping-new-address-form" class="fieldset address">
<div class="testing">
<!-- ko foreach: getRegion('example-class') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<!-- ko foreach: getRegion('additional-fieldsets') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>checkout_index_index.xml
<item name="example-for-adding-class" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkoutProvider</item>
</item>
</item>
<item name="displayArea" xsi:type="string">example-class</item>
<item name="children" xsi:type="array">
<!-- The following items override configuration of corresponding address attributes -->
<item name="region" xsi:type="array">
<!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="region_id" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
<item name="customEntry" xsi:type="string">shippingAddress.region</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
<!-- Value of region_id field is filtered by the value of county_id attribute -->
<item name="filterBy" xsi:type="array">
<item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
<item name="field" xsi:type="string">country_id</item>
</item>
</item>
<item name="postcode" xsi:type="array">
<!-- post-code field has custom UI component -->
<item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
<item name="sortOrder" xsi:type="string">2</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
</item>
<item name="country_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">1</item>
</item>
</item>
</item>Es muss einen einfacheren Weg geben, entweder fehlt mir etwas, oder das ist die Definition von Überentwicklung. Das Hinzufügen eines Divs über zwei Elemente sollte niemals so schwierig sein.
Dies ist kein empfohlener Weg, es ist einfach, aber nicht elegant:
quelle