Magento 2'de Ödeme İşlemi Nasıl Özelleştirilir

Yayınlanan: 2018-04-23

İçindekiler

Magento 2'de, ödeme süreci daha hızlı ve daha kolay bir deneyim için yeniden tasarlandı. Ödeme sayfası, müşteriyi sürecin 2 kolay adımında yönlendirir. Hesaplarına giriş yapan müşteriler, bilgilerin çoğu zaten hesaplarında olduğundan ödeme işlemini hızlı bir şekilde tamamlayabilir. Ödeme sürecinin ilk adımı, müşterinin gönderim adresi bilgilerini doldurması ve gönderim yöntemini seçmesidir. İkinci adımda, müşteri ödeme yöntemini seçer ve satın alma işlemini tamamlamak için kuponları uygular.

Magento 2'nin varsayılan ödemesini özelleştirin

Varsayılan ödemeyi kendi yönteminizle özelleştirmek için yeni bir ödeme adımı ekleyebilir veya mevcut bir ödemenin görünümünü değiştirebilirsiniz.

Yeni bir ödeme adımı ekleyin

Özel bir ödeme adımı ekleyebilirsiniz, bunun bir UI bileşeni olarak uygulanması gerekir. Uyumluluk, yükseltilebilirlik ve kolay bakım için, varsayılan Magento kodunu düzenlemeyin, özelleştirmelerinizi ayrı bir modüle ekleyin.

1. Adım: Ödeme adımı bileşeninin görünüm bölümünü oluşturun

Yeni ödeme adımının görünüm bölümünü oluşturmak için:

  1. Bir modül dizini ekleyin. Tüm özel dosyalar orada saklanmalıdır. Ödeme özelleştirmenizin doğru şekilde uygulanabilmesi için özel modülünüzün Magento_Checkout modülüne bağlı olması gerekir. Özel modül adınız için Ui kullanmayın, çünkü yolları belirtirken gerekli olan %Vendor%_Ui gösterimi sorunlara neden olabilir.
  2. Görünüm modelini uygulayan .js dosyasını oluşturun.
  3. Bileşen için bir .html şablonu oluşturun.

Her adım aşağıda ayrıntılı olarak açıklanmıştır:

1. Yeni adımı uygulayan JavaScript dosyasını ekleyin

UI bileşeni olarak yeni bir ödeme adımı uygulanmalıdır. Yani, JavaScript uygulaması bir JavaScript modülü olmalıdır.

Dosya, <your_module_dir>/view/frontend/web/js/view dizini altında saklanmalıdır.

<your_module_dir> gösterimi, kök dizinden modül dizininizin yolunu gösterir. Genellikle aşağıdakilerden biri olacaktır: app/code/<YourVendor>/<YourModule> veya vendor/<yourvendor>/module-<module>-<name> .

Yorumları içeren bir my-step-view.js örneği aşağıdadır: 

 tanımlamak(
    ['ko', 'uiComponent', 'alt çizgi', 'Magento_Checkout / js / model / adım - gezgin'],
    işlev(
        ko,
        Bileşen,
        _,
        stepNavigator
    ) {'
        sıkı kullanın';
        /**
         *
         * adım adım – bileşenin .html şablonunun adıdır,
         * <Vendor>_<Module> – modül dizininizin adıdır.
         *
         */
        Component.extend({
            varsayılanlar: {
                şablon: ' < Satıcı > _ < Modül > /mystep'
            },

            // adımı görüntülemek için mantığınızı buraya ekleyin,
            isVisible: ko.observable(true),

            /**
             *
             * @İadeler {*}
             */
            başlat: function() {
                this._super();
                // adımınızı kaydedin
                stepNavigator.registerAdım(
                    //adım kodu, bileşen şablonunda adım içerik kimliği olarak kullanılacak
                    'adım_kodu',
                    // adım takma adı
                    hükümsüz,
                    //adım başlık değeri
                    'Adım Başlığı',
                    // adımı görüntülerken veya adımı gizlerken mantıkla gözlemlenebilir özellik
                    this.isGörünür,

                    _.bind(bu.gezin, bu),

                    /**
                     * sıralama değeri
                     * 'sıralama değeri' < 10: adım, sevkiyat adımından önce görüntülenir;
                     * 10 < 'sipariş değerini sırala' < 20 : sevkiyat ve ödeme adımı arasındaki adım görüntülenir
                     * 'sıralama değeri' > 20 : ödeme adımından sonra adım görüntülenir
                     */
                    15
                );

                bunu iade et;
            },

            /**
             * Gezinme () yöntemi, ödeme adımı arasındaki gezinmeden sorumludur
             * ödeme sırasında. Özel mantık ekleyebilirsiniz, örneğin bazı koşullar
             * özel adımınıza geçmek için
             */
            gezinmek: function() {

            },

            /**
             * @boş döndürür
             */
            navigasyonToNextStep: function() {
                stepNavigator.next();
            }
        });
    }
);
2. .html şablonunu ekleyin

Modül dizininde, bileşen için .html şablonunu ekleyin. <your_module_dir>/view/frontend/web/template dizini altında bulunmalıdır.

Örnek bir mystep.html aşağıdaki gibidir: 

 <!–.js dosyasındaki 'step_code' değeri kullanılmalıdır–>
<li data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Adım Başlığı'" data-role="title"></div>
    <div class="step-content" data-role="content">

        <form data-bind="gönder: navigasyonToNextStep" novalidate="novalidate">
            <div class="eylemler-araç çubuğu">
                <div class="birincil">
                    <button data-role="opc-continue" type="submit" class="düğme eylemi birincil devam ediyor">
                        <span><!– ko i18n: 'Sonraki'–><!– /ko –></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

2. Adım: Adımınızı Ödeme sayfası düzenine ekleyin

Sayfada görüntülenecek yeni adım için, checkout_index_index.xml içinde tanımlanan Checkout sayfa düzeninde bildirmeniz gerekir.

Bu nedenle, aşağıdaki konuma genişleyen bir checkout_index_index.xml düzen dosyası eklemeniz gerekir: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

Örnek bir checkout_index_index.xml aşağıdaki gibidir: 

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
        <referenceBlock name="checkout.root">
            <argümanlar>
                <argument name="jsLayout" xsi:type="dizi">
                    <item name="bileşenler" xsi:type="dizi">
                        <item name="checkout" xsi:type="array">
                            <item name="çocuklar" xsi:type="array">
                                <item name="adımlar" xsi:type="dizi">
                                    <item name="çocuklar" xsi:type="array">
                                        <!– Eklediğiniz yeni adım –>
                                        <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!–Adım içeriğini sevkiyat adımından önce görüntülemek için "sortOrder" değeri < 1–> olmalıdır.
                                            <!–Gönderim adımı ile ödeme adımı 1 arasındaki adım içeriğini görüntülemek için < "sortOrder" < 2 –>
                                            <!–SortOrder ödeme adımından sonra adım içeriğini görüntülemek için >2 –>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="çocuklar" xsi:type="array">
                                                <!–adımınız için alt bileşen bildirimini buraya ekleyin–>
                                            </ite>
                                        </ite>
                                    </ite>
                                </ite>
                            </ite>
                        </ite>
                    </ite>
                </argüman>
            </argümanlar>
        </referenceBlock>
    </body>
</sayfa>

Magento 2 Ödeme Özel Alanı

$119,00

Magento 2 Tek Adımda Ödeme

$99 $119,00

Mevcut bir ödeme görünümünü özelleştirin

Magento uygulamalarında, UI bileşenleri kullanılarak ödeme gerçekleştirilir. Bir bileşenin JavaScript uygulamasını veya şablonunu değiştirerek, bir bileşen ekleyerek, kaldırarak veya devre dışı bırakarak her adımı özelleştirebilirsiniz.

1. Adım: Bileşenin .js uygulamasını ve şablonunu değiştirin

Bileşen oluşturma için kullanılan .js uygulamasını ve şablonu değiştirmek için, yeni dosyaları ödeme sayfası düzeninde bildirmeniz gerekir. Bunu yapmak için aşağıdaki adımları izleyin:

  1. Özel modül dizininizde aşağıdaki yeni dosyayı oluşturun: <your_module_dir>/view/frontend/layout/checkout_index_index.xml . (Ödeme özelleştirmenizin doğru şekilde uygulanabilmesi için özel modülünüzün Magento_Checkout modülüne bağlı olması gerekir.)
  2. Bu dosyaya aşağıdakileri ekleyin: 
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
        <referenceBlock name="checkout.root">
            <argümanlar>
                <argument name="jsLayout" xsi:type="dizi">
                    <!– Kişiselleştirmeniz burada olacak –>
                    …
                </argüman>
            </argümanlar>
        </referenceBlock>
    </body>
</sayfa>
  1. <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml dosyasında, özelleştirmeniz gereken bileşeni bulun. İlgili düğümü ve tüm üst düğümleri <argument> değerine kadar kopyalayın. Bunları değiştirmeyeceğiniz için, ebeveyn düğümlerinin tüm niteliklerini ve değerlerini bırakmanıza gerek yoktur.
  2. Bileşenin .js dosyasına, şablonuna veya diğer herhangi bir özelliğine giden yolu değiştirin.

Örnek:

Magento_Shipping modülü, Gönderi adımına Gönderi Politikası bilgisine bağlantı olarak oluşturulan bir bileşen ekler:

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

aşağıdaki gibi görünüyor: 

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
        <referenceBlock name="checkout.root">
            <argümanlar>
                <argument name="jsLayout" xsi:type="dizi">
                    <item name="bileşenler" xsi:type="dizi">
                        <item name="checkout" xsi:type="array">
                            <item name="çocuklar" xsi:type="array">
                                <item name="adımlar" xsi:type="dizi">
                                    <item name="çocuklar" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="çocuklar" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="dizi">
                                                    <item name="çocuklar" xsi:type="array">
                                                        <item name="before-shipping-method-form" xsi:type="array">
                                                            <item name="çocuklar" xsi:type="array">
                                                                <item name="shipping_policy" xsi:type="dizi">
                                                                    <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
                                                                </ite>
                                                            </ite>
                                                        </ite>
                                                    </ite>
                                                </ite>
                                            </ite>
                                        </ite>
                                    </ite>
                                </ite>
                            </ite>
                        </ite>
                    </ite>
                </argüman>
            </argümanlar>
        </referenceBlock>
    </body>
</sayfa>

2. Adım: Yeni bileşeni ödeme sayfası düzenine ekleyin

Herhangi bir UI bileşeni, checkout_index_index.xml , bir ödeme adımı bileşeninin eklenme şekline benzer şekilde eklenir.

Ana bileşen tarafından doğru bir şekilde oluşturulabilmesi için bir bileşen bildirdiğinizden emin olun. Bir üst bileşen genel bir kullanıcı arabirimi bileşeniyse ( uiComponent diğer adıyla başvurulur), alt bileşenleri herhangi bir koşul olmadan oluşturulur. Ancak bir ana bileşen, genel bir UI bileşenlerinin bir uzantısıysa, alt öğelerin oluşturulması belirli bir şekilde kısıtlanabilir. Örneğin, bir bileşen yalnızca belirli bir displayArea gelen çocukları oluşturabilir.

Adım 3 : Bir bileşeni devre dışı bırakın

checkout_index_index.xml dosyanızdaki bileşeni devre dışı bırakmak için aşağıdaki talimatları kullanın: 

 <item name="%the_component_to_be_disabled%" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="componentDisabled" xsi:type="boolean">true</item>
    </ite>
</ite>

4. Adım: Bir bileşeni kaldırın

Düzen oluşturma işleminden bir bileşeni kaldırmak için, \Magento\Checkout\Block\Checkout\LayoutProcessor::process yöntemi için bir eklenti oluşturmanız gerekir. Eklentinizde, çalışma zamanında ilgili düzen düğümlerini kaldırarak çevre yöntemini uygulayın.

Aşağıdaki örnek, bir bileşeni kaldıran çevresinde yöntemin bir örneğidir: 

 unset($jsLayout['components']['checkout']['children']['adımlar'][%path_to_target_node%]); //%path_to_target_node%, checkout_index_index.xml içindeki bileşenin düğümünün yoludur
$jsLayout döndür;

(Bu örneği kodunuzda kullanmak istiyorsanız, %path_to_target_node% yer tutucusunu gerçek değerle değiştirin.)

*Bir bileşeni devre dışı bırakma veya bir bileşeni kaldırma: Bir bileşeni devre dışı bırakırsanız, yüklenir ancak işlenmez. Bir bileşeni kaldırırsanız yüklenmez.

İlgili Mesajlar:
Magento'da Ödemeye İndirim Kodu Nasıl Eklenir
Magento 2 Checkout'a Özel Ödeme Nasıl Eklenir