Magento 2'de gönderim yöntemi seçiminde özel blok nasıl gösterilir


15

Referans bağlantısını kullanarak , aşağıdaki ödeme sayfasında gönderim yöntemlerine nasıl özel blok eklenir? , Alt kısımda ek gönderim bloğu oluşturabiliyorum.

Ancak, gönderim yöntemi seçildiğinde yalnızca içerik göstermek istiyorum. Müşteri tarafından bir gönderim yöntemi seçildiğinde, imleç ek bilgilere ve özel alanlara gitmeli ve kullanıcı verileri girmelidir.

Başka bir gönderim yöntemi seçtiğimizde, bununla ilgili bilgiler div varsa gizlenmelidir.

Magento 2'deki http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ ile aynı . Magento 1'de uyguladım.

Yanıtlar:


13

İlk olarak, yeni bir eleman tanımlamak shippingAdditionaldosyası oluşturarak view/frontend/layout/checkout_index_index.xmlböyle

<?xml version="1.0"?>
<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">
            <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="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="carrier_custom" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Sonra view/frontend/web/js/view/checkout/shipping/carrier_custom.jsbu şekilde dosya oluşturun

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote'
], function ($, ko, Component, quote) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping/carrier_custom'
        },

        initObservable: function () {

            this.selectedMethod = ko.computed(function() {
                var method = quote.shippingMethod();
                var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
                return selectedMethod;
            }, this);

            return this;
        },
    });
});

Ve sonra bir dosya oluşturun view/frontend/web/template/checkout/shipping/carrier_custom.html

<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
    <p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>

Temelde XML dosyası, bir uiComponent olan js dosyasını başlatması için ödeme yapmasını söyler. Nakavt şablonunu başlatır ve selectedMethodseçili gönderim bedeli değerini (carrier_method) almak için işlevi kullanır . Değer istediğiniz şeyse bloğu gösterir. İhtiyaçlarınıza göre değiştirebilirsiniz. yalnızca seçilen operatörün kontrol edilmesi. Çünkü kullanıcı taşıyıcıyı her değiştirdiğinde yeniden değerlendirileceği için selectedMethodtanımlanır knockout.computed()çünkü quote.shippingMethod()gözlemlenebilir.

Şablon yolu yanlış olduğu için güncelledim


Özel blokta bir metin alanım var. Metin alanına girilen verilerin alıntı ve sıraya nasıl kaydedilmesi.
santhoshnsscoe
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.