Làm thế nào để bạn bọc hai yếu tố hình thức thanh toán bên trong một div?
Ví dụ: giả sử tôi muốn bọc các trường quốc gia và mã zip / mã bưu điện này trong một div với lớp example-class
, tôi sẽ làm điều này như thế nào?
Những gì tôi đã cố gắng
Tôi đã cố gắng để đạt được điều này bằng cách thêm chúng khi <item name="shippingAddress" xsi:type="array">
còn nhỏ nhưng điều đó chỉ gây ra lỗi trên frontend. Mặc dù tôi đã nhận được một đầu vào văn bản trống mà không có nhãn bên trong .example-class
có lỗi trên lối vào.
Lỗi: Cannot read property 'indexedOptions' of undefined
Đây là nỗ lực nhanh chóng của tôi:
Magento_Checkout / web / mẫu / địa chỉ giao hàng / 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>
kiểm tra_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>
Phải có một cách dễ dàng hơn để làm điều này, hoặc tôi đang thiếu một cái gì đó hoặc đây là định nghĩa của kỹ thuật quá mức. Thêm một div trên hai yếu tố sẽ không bao giờ khó khăn như vậy.