Magento 2 - Ödeme alanına özel alan ekleme ve gönderme


49

Tüm eğitimler sadece bir alan ekliyor, ancak bu dosyaların değerinin kaydedilmesi atılıyor #mindblown. Nedenini bilmiyorum, herhangi bir alan veya form eklemenin en önemli kısmı.

Magento dökümanlarını takip etmeye çalıştım , ama ... berbat.

Sınama amacıyla, yalnızca özel kapsamları, özel veri kümelerini, özel veri sağlayıcıları ve benim için çok garip görünen diğer belgelenmemiş şeyleri yoksaymak için gönderim adresine başka alanlar eklemeye çalışıyorum.

Bu formun ne demek "statik" veya "dinamik" olduğunu bilmiyorum. Benim için tüm ödeme formları dinamik olarak KnockoutJS şablonlarının üstüne inşa edilmiştir, ancak ... "statik" bir yol denediğimde buraya giriş ekleyebilirim (yani statik bir form mu değil mi?).

İlk önce Knockout gözlemcilerinin veri ayrıştırma ve gönderme sırasında neden alanları görmezden geldiğini ayıklamaya çalışıyorum. Alanlarımda boş nameparametre olduğunu buldum , ancak bu sorunu çözmenin bir yolunu yönetemiyorum. IMO, UI bileşen oluşturucuya, inputNameparametre gibi disabled, diğer seçenekler gibi , placeholdervb. Gibi diğer seçeneklerle aynı şekilde iletilmelidir (diğer parametreler iyi çalışır, XML'den oluşturulan konfigürasyonu kontrol modülünün başlatılması için kontrol ettim ve benim için iyi görünüyor)

İkincisi, "dinamik" bir yöntemle eklenti oluşturmak LayoutProcessorve aynı veriyi iletmek için kullanmaya çalıştım ... ve şimdi names alanlarına sahibim , ancak gönderme hala işe yaramıyor.

JS'ye kazı yaptıktan sonra, bu isteğin hazırlanmasının module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js, module-checkout/view/frontend/web/js/model/quote.jsNakavt gözlemlemelerinin tanımlandığı / yaratıldığı yere bağlı olarak dosyada tutulduğunu gördüm .

Her nasılsa, module-checkout/view/frontend/web/js/model/address-converter.jsbu gözlenebilirleri güncelleyin ve module-checkout/view/frontend/web/js/model/new-customer-address.jsnihayet bazı ilginç konfigürasyon seçeneklerini bulduğum yere bağlı - tüm adres alanlarının listesi.

Alanlarımı buraya eklediğimde, komut dosyaları ayrıştırmaya ve göndermeye başlar, OFC 500 alırım, b / c arka uç onları tanımıyor ... (sorma, arka uç dev değilim)

İşte benim sorularım geliyor:

  • Bu tür bir özelleştirmeyi ele almak doğru bir yol mu? (b / c benim için tuhaf görünüyor)
  • Yeni adreslerle ilgili olmayan alanların değerleri nasıl gönderilir? Hiçbir yerde benzer bir yapılandırma görmedim. Benim durumumda sipariş yorumu (textarea) ve fatura isteği (onay kutusu) göndermek istiyorum. Her ikisi de bir adres olarak kaydedilmemelidir, b / c bazı kullanıcılar ileride kullanmak üzere bu adresi kaydetmek isteyebilir.
  • "Statik" ve "dinamik" formlar veya bazı örnekler / karşılaştırmalar hakkında herhangi bir dokümantasyon var mı? Bu şekilde düşünmeye değer mi?

Ek varoluşsal soru:

  • Bu neden bu kadar tutarsız? Neden XML / PHP dosyalarında tonlarca parametre tanımlamalıyım, Magento ise sadece bir girdi oluşturabilir ve sonra her şeyi kendi başıma halletmek zorunda mıyım?

3
Magento Devdocs son zamanlarda UI Bileşenlerini kullanma hakkında bazı yeni dokümanlar ekledi. Aslında, tamamen yeni bir rehber yazma sürecindeyiz ... ama yine de gidecek yollarımız var. Lütfen devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html adresini ziyaret edin . Ne yazık ki, veri kaynaklarına ilişkin konuları henüz tamamlamadık, ki bu sizin en çok ihtiyaç duyduğunuz gibi. UI Bileşenlerini kullanan yapılandırma akışında, yardımcı olabilecek bir konu var. Daha fazla cevap bulmak için çalışacağım.
tanberry

Neden kasaya basit bir alan ekleyerek bir kabus olmak zorunda? Sadece anlayamıyorum. Ve hemen hemen her şey bu zor
slayerbleast

@slayerbleast Dünya değişiyor, sunucu tarafında ölmek üzere. Yani farklı, sebepsiz yere zor değil.
igloczek

Yanıtlar:


55

Sorularınıza cevap vermeye çalışacağım.

  1. Hayır . Bu, gönderim adres formuna özel özellikler eklemenin doğru bir yolu değildir. Düzenlemenize gerek yok new-customer-address.js. Aslında, bu JS dosyası önceden tanımlanmış tüm adres niteliklerini listeler ve karşılık gelen arka uç arabirimiyle eşleşir, \Magento\Quote\Api\Data\AddressInterfaceancak Magento, arka uç / ön uç bileşenlerinde değişiklik yapmadan arka uç için herhangi bir özel özelliği geçirme yeteneği sağlar .

    Bahsedilen JS bileşeni customAttributesözelliğe sahiptir . Özel nitelikleriniz $dataScopePrefix' shippindAddress.custom_attributes' ise otomatik olarak ele alınacaktır .

  2. Sorunuzu doğru anladıysam, müşteri adresinin bir parçası olmayan verileriniz var ancak aynı zamanda arka uç için de göndermeniz gerekiyor. Bu sorunun cevabı:

    Bağlıdır . Örneğin, aşağıdaki yaklaşımı seçebilirsiniz: tüm ek alanlarınızı içeren ödeme sayfasına özel form (like comment, invoice request etc) ekleyin, bu olayları bazı olaylara göre işleyecek JS mantığı ekleyin ve verileri ön uçtan ve depodan alacak özel bir hizmet verin gelecekteki kullanım için bir yerde.

  3. Ödeme ile ilgili tüm resmi belgeler http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_overview.html adresinde bulunur . Statik terimi, tüm alanların önceden bilindiği / önceden tanımlandığı formları ifade eder (örneğin: form her zaman önceden tanımlanmış etiketleri olan 2 metin alanına sahip olur) ve arka uçtaki bazı ayarlara göre değiştirilemez.

    Bu tür formlar kullanılarak ilan edilebilir layout XML configuration. Diğer taraftan, dinamik terimi , alan kümesi değişebilen formları ifade eder (örneğin: ödeme formu, yapılandırma ayarlarına bağlı olarak daha fazla / daha az alana sahip olabilir).

    Bu durumda, böyle bir formu beyan etmenin tek yolu LayoutProcessoreklenti kullanmaktır .

  4. :) Magento, Magento kullanımı / kişiselleştirmesi sırasında tüccarlar için mümkün olduğunca önemli olabilecek kullanım durumlarını mümkün olduğunca karşılamaya çalışır. Bazen, bazı basit kullanım durumları daha karmaşık hale geldiğinde bu duruma yol açar.

Bu yardımcı olur umarım.

================================================== =======================

Tamam ... Hadi biraz kod yazalım;)

  1. LayoutProcessor'a ek alan ekleyen PHP kodu

========

/**
 * @author aakimov
 */
$customAttributeCode = 'custom_field';
$customField = [
    'component' => 'Magento_Ui/js/form/element/abstract',
    'config' => [
        // customScope is used to group elements within a single form (e.g. they can be validated separately)
        'customScope' => 'shippingAddress.custom_attributes',
        'customEntry' => null,
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/input',
        'tooltip' => [
            'description' => 'Yes, this works. I tested it. Sacrificed my lunch break but verified this approach.',
        ],
    ],
    'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
    'label' => 'Custom Attribute',
    'provider' => 'checkoutProvider',
    'sortOrder' => 0,
    'validation' => [
       'required-entry' => true
    ],
    'options' => [],
    'filterBy' => null,
    'customEntry' => null,
    'visible' => true,
];

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

return $jsLayout;

Daha önce de bahsettiğim gibi, bu sizin alanınızı customAttributesJS adres nesnesinin özelliğine ekleyecektir . Bu özellik, özel EAV adres özellikleri içerecek şekilde tasarlanmıştır ve \Magento\Quote\Model\Quote\Address\CustomAttributeListInterface::getAttributesyöntemle ilgilidir.

Yukarıdaki kod, ön depolamadaki yerel depolama kalıcılığını otomatik olarak işler. Sen kullanarak yerel depolama adresinin alan değeri alabilirsiniz checkoutData.getShippingAddressFromData()(burada checkoutDataolduğu Magento_Checkout/js/checkout-data).

  1. 'Magento_Checkout / js / action / set-shipping-information' davranışını değiştirmek için mixin ekleyin (bu bileşen nakliye ve fatura ödeme adımları arasındaki veri gönderiminden sorumludur)

========

2.1. Yaratmak, yapmak, tasarlamak, üretmekyour_module_name/view/frontend/requirejs-config.js


/**
 * @author aakimov
 */
var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                '<your_module_name>/js/action/set-shipping-information-mixin': true
            }
        }
    }
};

2.2. Your_module_name / view / frontend / web / js / action / set-shipping-bilgi-mixin.js dosyasını oluşturun


/**
 * @author aakimov
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
    'use strict';

    return function (setShippingInformationAction) {

        return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            var shippingAddress = quote.shippingAddress();
            if (shippingAddress['extension_attributes'] === undefined) {
                shippingAddress['extension_attributes'] = {};
            }

            // you can extract value of extension attribute from any place (in this example I use customAttributes approach)
            shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];
            // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
            return originalAction();
        });
    };
});
  1. Your_module_name / etc / extension_attributes.xml dosyasını oluşturun

========

<?xml version="1.0"?>
<!--
/**
 * @author aakimov
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
        <attribute code="custom_field" type="string" />
    </extension_attributes>
</config>

Bu, arka uç tarafındaki adres modeline bir uzantı niteliği ekleyecektir. Uzatma özellikleri, Magento'nun sunduğu uzatma noktalarından biridir. Arka uçtaki verilerinize erişmek için şunları kullanabilirsiniz:

// Magento will generate interface that includes your custom attribute
$value = $address->getExtensionAttributes()->getCustomField();

Umarım, bu yardımcı olur ve resmi belgelere eklenecektir.


Cevabınız için teşekkürler Alex! Ben denedim custom_attributesama bu benim için işe yaramıyor. LayoutProcessor.php`'ın bir parçası böyle görünüyor - gist.github.com/Igloczek/eaf4d2d7a0a04bd950110296ec3f7727 Fakat shipping-info hatta localStorage checkout-databu verileri hiç içermiyor.
igloczek

Lütfen yukarıdaki güncellenmiş cevabımı görün;)
aakimov

4
Bu konuyla ilgili resmi belge zaten mevcut! devdocs.magento.com/guides/v2.1/howdoi/checkout/…
Alex

1
Değerlerin siparişte kaydedilmesi için gereken ilave bir adım var mı?
Alex Hadley

Statik bir formunuz varsa, bu örnekte olduğu gibi XML ile LayoutProcessor'a alan eklemek daha iyi olur: devdocs.magento.com/guides/v2.1/howdoi/checkout/…
cjohansson

-1

Tecrübelerime göre m2, alanlar vb. Gibi bileşenleri tanımlamak için xml kullanmaktadır. Ön-uçlar alanında, ödeme şablonlarını geçersiz kılmaya ve kendi özel alanlarınızı buraya eklemeye çalışmalısınız. KO ile ön uç ve arka uçtaki verileri çalışma ve ciltlemenize yardımcı olur


4
Yanlış bir tavsiye, b / c ödeme şablonları içermez ve asla manuel olarak eklenmiş giriş alanları içermemelidir. Seçili bölgelerdeki şablonları oluşturmak için KO kullanmalıyız (her şey UI bileşenleri kullanılarak oluşturulur)
igloczek 13:16

Ön uçta özel alan kullanıcı arabirimi bileşenleri ekleme örneğini paylaşır mısınız?
mrtuvn

@İgloczek'in dediği gibi Yanlış öneri, çünkü ödeme şablonları hiçbir zaman manuel olarak eklenmiş giriş alanları içermemelidir.
diazwatson
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.