aşağıdaki ödeme sayfasında nakliye yöntemlerine özel blok nasıl eklenir?

11

Gönderim yöntemlerinin altına özel blok eklemek istiyorum ve bu özel blok, gönderim yöntemi formunun içinde olmalıdır. Aşağıdaki kod satırı bunu eklemek için yararlı olduğunu düşünüyorum. Ama nasıl devam edeceğimi bilmiyorum.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
magento2 
— Sivakumar K
kaynak

Yanıtlar:

43

1. Modülün ödeme bağımlılığını beyan edin

Uygulamanın / kod / NameSpace / modulename / etc / module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NameSpace_ModuleName" setup_version="0.0.1" active="true">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. Ödeme düzeninin üzerine yaz

Uygulamanın / kod / NameSpace / modulename / 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" 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="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

3. JavaScript kullanıcı arayüzü bileşeni oluşturma

Magento 2 checkout, JavaScript'te (Knockout ile) yönetilir. Bu nedenle özel bir JS bileşeni oluşturmanız gerekir. Ödeme kullanıcı arayüzü bileşeni ile özel HTML şablonunuz arasındaki bağlantıyı oluşturur.

Uygulamanın / kod / NameSpace / modulename / görünüm / kullanıcı arayüzü / web / js / görünüm / ödeme / nakliye / ek-block.js

tanımlamak([
    'UIComponent'

], işlev (Bileşen) {
    'katı kullanın';

    return Component.extend ({
        varsayılanlar: {
            şablon: 'NameSpace_ModuleName / checkout / shipping / extra-block'
        }
    });
});

4. HTML şablonu oluşturma

Ardından, ödeme sırasında görüntülenecek HTML şablonunu oluşturun.

Uygulamanın / kod / NameSpace / modulename / görünüm / kullanıcı arayüzü / web / şablon / ödeme / nakliye / ek-block.html

<div class="checkout-block" id="block-custom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

5. Önbelleği temizle

Son olarak aşağıdaki komutları çalıştırın: 

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

Tam örnek demo modülünü buradan indirin

— Sohel Rana
kaynak
1
gerçekten harikasın. magento topluluğu için bir sonu yoktur. herdem yeşil
— Sivakumar K
Bu hataları aldınız mı? Broken reference: No element found with ID 'checkout.header.wrapper'. [] [] Class SR\AdditionalShippingBlock\Model\CustomBlockConfigProvider does not exist [] [] [2016-04-13 10:15:06] main.CRITICAL: Invalid block type: Magento\Checkout\Block\Onepage [] []
— Thiago Figueiro
Diğer noobs için ipucu: modülün içeri girmesi gerekir app/code/SR/AdditionalShippingBlock, değil app/code/Magento/AdditionalShippingBlock.
— Thiago Figueiro
@sohel rana, aynı yerde metin alanı yerine dinamik açılır liste istiyorum, bana bunun için öneri verin. Teşekkürler.
— Rakesh Jesadiya
Bu gerçek mi? : S wtf
— OZZIE
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.