한 페이지 결제에서 아래 배송 방법에 맞춤 블록을 추가하는 방법은 무엇입니까?

11

배송 방법 아래에 맞춤 블록을 추가하고 싶습니다.이 맞춤 블록은 배송 방법 양식 안에 있어야합니다. 다음 코드 줄이 이것을 추가하는 데 도움이된다고 생각하지만 진행 방법을 모릅니다.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
magento2 
— 시바 쿠마르 K
소스

답변:

43

1. 모듈의 체크 아웃 종속성 선언

app / code / 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. 결제 레이아웃 덮어 쓰기

app / code / NameSpace / ModuleName / view / frontend / layout / 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 UI 구성 요소 작성

Magento 2 체크 아웃은 JavaScript에서 관리합니다 (Knockout 사용). 따라서 사용자 정의 JS compnent를 작성해야합니다. 결제 UI 구성 요소와 맞춤 HTML 템플릿 사이의 링크를 만듭니다.

app / code / NameSpace / ModuleName / view / frontend / web / js / view / checkout / shipping / additional-block.js

밝히다([
    'uiComponent'

], 함수 (구성 요소) {
    '엄격한 사용';

    Component.extend ({
        기본값 : {
            템플릿 : 'NameSpace_ModuleName / checkout / shipping / additional-block'
        }
    });
});

4. HTML 템플릿 생성

그런 다음 결제시 표시 할 HTML 템플릿을 만듭니다.

app / code / NameSpace / ModuleName / view / frontend / web / template / checkout / shipping / additional-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. 캐시 지우기

마지막으로 다음 명령을 실행하십시오. 

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

여기 에서 전체 예제 데모 모듈을 다운로드 하십시오

— 소헬라나
소스
1
정말 당신은
— Sivakumar K
이 오류가 발생 했습니까? 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
다른 멍청한 놈을위한 팁 : 모듈이 app/code/SR/AdditionalShippingBlock아닌 에 들어가야 app/code/Magento/AdditionalShippingBlock합니다.
— Thiago Figueiro
@ sohel rana, 같은 장소에서 텍스트 필드 대신 동적 드롭 다운을하고 싶습니다. 감사.
— Rakesh Jesadiya
이게 진짜인가요? : S wtf
— OZZIE
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.