Ödeme Formu - Bir sınıfta birden çok öğeyi sarma - Magento 2


14

Div'de iki ödeme formu öğesini nasıl sararsınız?

Diyelim ki bu ülkeyi ve zip / posta kodu alanlarını sınıfıyla birlikte bir div'de sarmak istedim example-class, bunu nasıl yaparım?

resim açıklamasını buraya girin

Ne denedim

Bunu çocuk olarak ekleyerek başarmaya çalıştım <item name="shippingAddress" xsi:type="array">ama bu sadece ön uçta hatalara neden oluyor. İçinde etiket olmadan boş bir metin girişi .example-classalmama rağmen ön uçta hatalar vardı.

Hata: Cannot read property 'indexedOptions' of undefined

Bu benim hızlı girişimim:

Magento_Checkout / web / şablon / nakliye-adresi / 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>

Bunu yapmanın daha kolay bir yolu olmalı, ya bir şey eksik ya da bu aşırı mühendisliğin tanımı. İki öğeye div eklemek hiç bu kadar zor olmamalı.

Yanıtlar:


17

Çok ilginç bir soru. Checkout uygulamasıyla ilgili son varsayımı yanıtlayayım. 1 dosyada sadece 1'den fazla değişiklik eklemeniz gerektiğinden, biraz aşırı tasarlanmış olabilir.

Yaklaşım Magento 2 çekirdek modüllerinde değişiklik yapılmasını gerektirmez.

Hedefinize ulaşmak ve ödeme gönderim adresi alanlarını özel bir öğeye sarmak için aşağıdaki öğeler eklenmelidir:

  1. Yeni UI Bileşeni tanımına sahip özel checkout_index_index.xml dosyası
  2. Özel öğeli yeni HTML şablonu
  3. Layout Processor eklentisi
  4. Yeni eklenti için di.xml bildirimi

Custom_Checkout \ görünümü \ önyüzü \ düzeni \ checkout_index_index.xml dosyası:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="custom-field-group" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="sortOrder" xsi:type="string">0</item>
                                                                <item name="template" xsi:type="string">Custom_Checkout/checkout/field-group</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="field-group" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">field-group</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

Düzende, yeni özel alan grubu UI Bileşeni eklemeliyiz . Bileşenin, tüm alanların oluşturulduğu kendi özel Custom_Checkout \ view \ web \ template \ checkout \ field-group.html şablonu vardır. Ayrıca, özel alan grubu bileşeni sortOrder düğümü için "0" değerine sahiptir . Gönderim-adres-alan kümesi bileşeninin bir parçası olarak bildirilen tüm alanlardan önce bileşenin oluşturulmasına izin verir .

Ayrıca, kendi displayArea ayarına sahip bir alan grubu UI Bileşeni vardır .

Custom_Checkout \ görünümü \ web \ template \ ödeme \ saha group.html şablon dosyası:

<div class="custom">
<!-- ko foreach: getRegion('field-group') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>

Şablon, alan grubu bölgesine eklenen tüm bileşenlerin oluşturulmasına izin verir ( displayArea olarak da bilinir ).

Özel \ Ödeme \ Eklentisi \ AddressLayoutProcessor sınıf dosyası:

namespace Custom\Checkout\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

/**
 * Class AddressLayoutProcessor
 */
class AddressLayoutProcessor
{
    /**
     * @param LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $subject, array $jsLayout)
    {
        $fieldGroup = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']
            ['children']['custom-field-group']['children']['field-group']['children'];

        $shippingAddressFields = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        $fieldGroup['country_id'] = $shippingAddressFields['country_id'];
        $fieldGroup['postcode'] = $shippingAddressFields['postcode'];

        $shippingAddressFields['country_id']['visible'] = false;
        $shippingAddressFields['postcode']['visible'] = false;

        return $jsLayout;
    }
}

Sınıf, country_id ve posta kodu alanları yapılandırmalarını yeni oluşturulan özel alan grubu bileşenine kopyalamaktan sorumludur .

Özel alan grubuna atandıktan sonra, oluşturma sırasında çoğaltmayı önlemek için alanlar gizli (visible = true) olarak işaretlenmelidir. ComponentDisabled nedeniyle diğer bağımlılıklar (örn region.js dosyası) ve nakliye adres işleme mekanizmasına country_id ve posta kodu devre dışı bırakmak için kullanılmamalıdır.

Özel \ Ödeme \ vb \ önyüzü \ di.xml dosyası:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="customFieldGroupPlugin" type="Custom\Checkout\Plugin\AddressLayoutProcessor"/>
    </type>
</config>

Alanların tam yapılandırmayla kopyalanması gerektiğinden, alanlar için kullanılan eklenti yaklaşımı değişir. Düzen İşlemcisinin özel bir modülde bildirilmesi durumunda eklenti değişiklikleri yakalar.

Sonuç olarak, hem country_id hem de posta kodu alanları gönderim adresi formunda işlenir ve aşağıdaki gibi özel öğeye sarılır ( Özel CSS sınıfının formda öne çıkması için birkaç stil ekledim ):

resim açıklamasını buraya girin

Bir fatura adresi formunda da değişiklik yapmak isterseniz, Custom \ Checkout \ Plugin \ AddressLayoutProcessor sınıfı güncellenmelidir. Tek yapmanız gereken, gönderim adresi alanları için yaptığımız gibi belirli ödeme yöntemi için fatura adresiyle aynı manipülasyonları yapmaktır.

Memnuniyetle yardım ettim!


Harika, teşekkürler! Bunu arka uç işini nasıl gerektirdiğini ilginç bir şekilde başaramazdım. Bunu tamamen FE açısından ele alıyordum. Kimse birkaç gün içinde daha basit bir çözüm bulmazsa (bazı insanların şu anda buna baktığını düşünüyorum) bunu kabul edilmiş olarak işaretleyeceğim. Tekrar teşekkürler.
Ben Crook

Mükemmel cevap :)
Keyur Shah

Harika, çok teşekkür ederim. Benim için çalışıyor.
Pratik Mehta

Aynı değişikliği yeni fatura adresi için de uygularsam?
Pratik Mehta

1
Bir fatura adresi formunda da değişiklik yapmak isterseniz, Custom \ Checkout \ Plugin \ AddressLayoutProcessor sınıfı güncellenmelidir. Yapmanız gereken tek şey, gönderim adresi alanları için kullandığımız ödeme yöntemi için fatura adresiyle aynı işlemleri yapmaktır.
Max Pronko

2

Bu önerilen bir yol değil, basit ama zarif değil:

Uygulamanın / kod / Satıcı / Modül / görünüm / kullanıcı arayüzü / düzeni / checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
          <block class="Vendor\Salesman\Block\Checkout\Index" name="custom_checkout" before="-" template="Vendor_Module::checkout/index.phtml"/>
        </referenceContainer>
    </body>
</page>

Uygulamanın / kod / Kireç / Satıcı / görüntülemek / kullanıcı arayüzü / templates / çıkış / index.phtml

<script>
  require([
      'jquery',
      'mage/mage'
  ], function($){
      $(document).ready(function () {
         //detect if the shipping form container loaded
         var existCondition = setInterval(function() {
            if ($('#shipping').length) {
              moveElement();
            }
         }, 100);

         function moveElement(){
             //get The field postcode and country
             var postcodeField = $("div[name='shippingAddress.postcode']");
             var countryField = $("div[name='shippingAddress.country_id']");
             // insert the wrapeer
             $( '<div class="wrapper"></div>' ).insertBefore( postcodeField);
             // move the fields to wrapper
             $(".wrapper").append(postcodeField);
             $(".wrapper").append(countryField);
         }
      });
    }
  });
</script>

Çalışacağından emin olduğum için onayladım ama çok temiz olmadığına katılıyorum, daha temiz bir yöntem olmadığı sürece bunu kullanmam. Teşekkürler.
Ben Crook
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.