checkout_index_index.xml öğesinin “displayArea” ve “sağlayıcıları” magento2'de ne anlama geliyor?

ne yaptığını displayAreave providerbir checkout_index_index.xmlmagento2 içinde ortalama?

Ne anlamak checkoutProviderve displayAreavardır, öncelikle içinde aradığınız kapsamını anlamak gerekir: jsLayout.

jsLayoutçıkış sayfasındaki JavaScript UI öğeleri için bir çok JavaScript yapılandırmasıdır. Eğer bakarsanız module-checkout/view/frontend/templates/onepage.phtml, aşağıdaki x-magento-initverileri göreceksiniz :

<script type="text/x-magento-init">
    {
        "#checkout": {
            "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
        }
    }
</script>

Her şeyin başladığı yer burası. Belirtir:

Eleman #checkoutiçinMagento_Ui/js/core/app aşağıdaki bilgileri kullanarak başlatınız: ...

Ve aldığı bilgi mizanpaj XMLinde yaratılan bilgilerdir jsLayout. Şimdi, bu, XML'inizdeki her şeyin şimdiMagento_Ui/js/core/app XML'inizdeki bileşene (eklentileri bırakmak ve düzen işleyicileri ve şu an için denklemin dışına çıkmak ...)

Şimdi, module-ui/view/base/web/js/core/app.jsher şeyin nasıl kaynatılacağına dair ayrıntılara dalmayacağım, çünkü bu yazıyı çok, çok uzun yapacak, ama özeti şudur:

• Magento_Ui/js/core/appBileşenli bir oluşturur checkout-bileşeni.
• Bu türün bir bileşeni olacak uiComponent (bu, kendi özel UI bileşenlerinizi ertelemek için kullanılabilecek çok genel bir bileşendir. Temel nakavt şablonu oluşturma ve öğeleriyle birlikte gelir).
• Bize şablonu olacak Magento_Checkout/web/frontend/template/onepage.html .
• Bu isimde (çeşitli çocuk yaratacak errors, estimation,steps , vb ...)
• steps-Çocuk ayrıca olacakuiComponent .
• Bu döngü devam eder ... konfigürasyon çocukları çeşitli parametrelerle yapar.

Şimdi displayAreave providersorunuzu almak için : Yukarıda gördüğünüz gibi, her şey JavaScrip sınıflarına eşlenir. Kullanımını ilk gördüğümüzde , türün bileşenini displayAreayarattığımız zamandır . Yani kullanımı aramak için mantıklı bir aday olacaktırstepsuiComponentuiComponentdisplayArea .

Şimdi, a uiComponent, türün bir JavaScript sınıfıdır Magento_Ui/js/lib/core/collection. (Bu içine bakabilirsiniz module-ui/view/base/requirejs-config.js). Bu eşleşir module-ui/view/base/web/js/lib/core/collection.js. İşte şu kullanım görüyoruz:

/**
 * Synchronizes multiple elements arrays with a core '_elems' container.
 * Performs elemets grouping by theirs 'displayArea' property.
 * @private
 *
 * @returns {Collection} Chainable.
 */
_updateCollection: function () {
    var _elems = compact(this._elems),
        grouped;

    grouped = _elems.filter(function (elem) {
        return elem.displayArea && _.isString(elem.displayArea);
    });
    grouped = _.groupBy(grouped, 'displayArea');

    _.each(grouped, this.updateRegion, this);

    this.elems(_elems);

    return this;
},

Peki, bunun ne etkisi altında olduğu belirli bir UI bileşenleri grubuna bir kullanıcı arayüzü 'eşler'. Bunu bilmek önemlidir, çünkü UI bileşenlerini mizanpajı değiştirerek, tıpkı phtmlsunucu tarafında oluşturulan şablonlarda yaptığınız gibi mizanpajdaki diğer konumlara taşımamızı sağlar. Sadece geçersiz kıldisplayArea herhangi bir yerde herhangi bir JavaScript UI Bileşeni oluşturabilirsiniz (hedef alanın da bir yerde oluşturulduğu göz önüne alındığında).

Şimdi ikinci soru için: provider. Tıpkı displayAreaaradığımız gibi, önce UI Bileşenine bakmaya başlamalıyız Magento_Checkout/js/view/form/element/email. Ve eğer bakarsak requirejs-config.js, sonunda buluruz.module-checkout/view/frontend/web/js/view/form/element/email.js .

Ama ... hayır provider, bu sınıfta kullanılmıyor. Öyleyse görelim ki sınıfta genişlettiği bir şey bulabilecek miyiz: Component( uiComponentyine bizim sınıfımız ).

Ama ... hayır provider. Eh, uiComponentbasitçe uzanır Element(ki burada bulunur module-ui/view/base/web/js/lib/core/element/element.js), öyleyse şuraya bakalım:

/**
 * Parses 'modules' object and creates
 * async wrappers for specified components.
 *
 * @returns {Element} Chainable.
 */
initModules: function () {
    _.each(this.modules, function (name, property) {
        if (name) {
            this[property] = this.requestModule(name);
        }
    }, this);

    if (!_.isFunction(this.source)) {
        this.source = registry.get(this.provider);
    }

    return this;
},

Bingo! Sağlayıcının veri almak için bir kaynak olarak kullanıldığı ortaya çıktı. Eğer yapıcısına bakarsak, Elementvarsayılan olarak, boş olarak ayarlandığını göreceksiniz:

provider: '',

Öyleyse yapılandırmamıza dönelim. Şimdi konfigürasyonumuzu okursak , öğenin shippingAddressbir bileşeni olduğunu anlayacağız Magento_Checkout/js/view/shipping.checkoutProvider .

Bu bizi iki soruya bırakıyor:

1. Nerede checkoutProvidertanımlanır
2. Gönderi JavaScriptinde nasıl kullanılır?

Eh, dibine kaydırırsanız checkout_index_index.xml, vanilyadan başka bir şey olmadığını fark edeceksiniz uiComponent:

<item name="checkoutProvider" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
</item>

Ve eğer bakarsanız, module-checkout/view/frontend/web/js/view/shipping.jsbunun böyle kullanıldığını göreceksiniz:

registry.async('checkoutProvider')(function (checkoutProvider) {
    var shippingAddressData = checkoutData.getShippingAddressFromData();

    if (shippingAddressData) {
        checkoutProvider.set(
            'shippingAddress',
            $.extend({}, checkoutProvider.get('shippingAddress'), shippingAddressData)
        );
    }
    checkoutProvider.on('shippingAddress', function (shippingAddressData) {
        checkoutData.setShippingAddressFromData(shippingAddressData);
    });
});

Dürüst olmak gerekirse, analizlerimin durduğu yer burası, çünkü benim için olanları araştırmak ve yatırım yapmak da zor, ama umarım başkaları buradan alabilir ...

Bunun registry.async()argüman olarak bir geri çağırma işleviyle derhal yürütülen bir yöntemin döndürülmesiyle ilgisi olduğunu biliyorum , ancak başka birinin bunu açıklaması gerekiyor ...

* Yasal Uyarı: Elbette, lütfen yanılıyorsam beni düzelt! Yukarıdakilerin hiçbirini gerçek anlamda denemedim, ancak neredeyse yıllardır Magento 2 ile çalışıyorum ve bunun nasıl çalıştığına inanıyorum. Magento Okyanusu'nun dibine dalmak istiyorsanız ne yazık ki çok fazla belge yok.

Asıl cevabımdan 6 ay sonra ne displayAreaolduğuna daha iyi cevap verebileceğimi düşünüyorum .

Anladığım kadarıyla, hepsi UI Bileşenlerinde Nakavtların getTemplate()metodu, getRegion()metodu ve çocukları ile bir araya geliyor . Buna iyi bir örnek incelendiğinde görülebilir vendor/magento/module-checkout/view/frontend/templates/registration.phtmlve vendor/magento/module-checkout/view/frontend/web/template/registration.html.

İçinde registration.phtml, çocukları olan varsayılan bir Magento UI Bileşeni göreceksiniz:

<script type="text/x-magento-init">
    {
        "#registration": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "registration": {
                        "component": "Magento_Checkout/js/view/registration",
                        "config": {
                            "registrationUrl": "<?php /* @escapeNotVerified */ echo $block->getCreateAccountUrl(); ?>",
                            "email": "<?php /* @escapeNotVerified */ echo $block->getEmailAddress(); ?>"
                        },
                        "children": {
                            "errors": {
                                "component": "Magento_Ui/js/view/messages",
                                "sortOrder": 0,
                                "displayArea": "messages",
                                "config": {
                                    "autoHideTimeOut": -1
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
</script>

Kullanımına dikkat displayAreaiçinde children-node. Temel olarak, Nakavt'a bu alt öğenin 'mesajlar' olarak adlandırılan bir bölgede yapılması gerektiğini söyler. .

Şimdi şunlara bir göz atın registration.html:

<!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Bu Nakavt kodu satırının temelde yaptığı şey şudur: displayArea 'mesajlarında' bulunan tüm alt öğeler üzerinde yinelenir ve bunları işler.

Bana sorarsanız, isimlendirme biraz kafa karıştırıcı. Kullanırsınız Neden 'displayArea' tek bir yerde ve 'bölgesini' başka bir yerde. Ama belki de benim varsayım tamamen yanlıştır. Belki bir Magento çekirdek geliştiricisi bu konuda biraz daha fazla ışık tutabilir?