마 젠토 2-장소 주문 버튼으로 검토 및 결제 섹션 후 추가 결제 단계를 추가하는 방법

'검토 및 결제'섹션 다음에 추가 결제 단계를 추가하려고합니다. 요구 사항은 지불을 분할하고 별도의 단계로 검토하는 것입니다. 결제 방법을 선택한 후에는 모든 주문 정보를 "주문 주문"버튼과 함께 표시해야하는 최종 단계 "검토"로 이동해야합니다.

지금까지 아래 링크를 따라 지불 단계 후에 사용자 정의 단계를 추가했습니다. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

그러나 여기서 문제는 "주문하기"버튼이 지불 단계와 바인딩되어 있다는 것입니다. 장소 주문 버튼을 마지막 단계로 이동해야합니다.

가장 감사합니다!

magento2 onepage-checkout

— 라 메쉬
소스

마지막으로 결제 후 단계를 추가 했습니까?

— Ravi Bhalodia

@rameshpushparaj이 작업을 수행 했습니까?

— Arshad Hussain

여기에 같은 문제가 있습니까?

— Diego Queiroz

이에 대한 대안은 성공 단계에 주문 요약을 추가하는 것입니다. 고객이 지불 한 후 주문을 완료하지 않으면 문제가 될 수 있기 때문에 주문 주문 버튼은 지불 단계에 바인드됩니다. 지불은 어떤 주문에도 속하지 않습니다.

— Sanne

아래에 몇 가지 단계를 추가했습니다. 단계를 따르십시오

1. 레이아웃 폴더에 checkout_index_index.xml 파일을 만듭니다

app / code / VendorName / PlaceOrder / view / frontend / layout

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="VendorName_PlaceOrder::css/place_order_button.css"/>
    </head>
    <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="newstep" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2. 템플릿에서 newstep.html 파일 만들기

app / code / VendorName / PlaceOrder / view / frontend / web / template

<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order newstep'" class="title"></span>
    <!-- ko foreach: elems() -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
    <button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
        <span>Place Order</span>
    </button>
</div>
<!-- /ko -->

경로에 newstep.js 파일을 작성하십시오.

app / code / VendorName / PlaceOrder / view / frontend / web / js / view

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/newstep',
        'Magento_Checkout/js/model/step-navigator',
    ],
    function(
        $,
        ko,
        Component,
        stepNavigator
    ) {
        'use strict';

        return Component.extend({

            isVisible: function () {
                return stepNavigator.isProcessed('shipping');
            },
            initialize: function () {
                $(function() {
                    $('body').on("click", '#place-order-trigger', function () {
                        $(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
                    });
                });
                var self = this;
                this._super();
            }

        });
    }
);

4. 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="sidebar" xsi:type="array">
                                        <item name="children" xsi:type="array">

                                            <item name="newstep" xsi:type="array">
                                                <item name="children" xsi:type="array">

                                                    <item name="agreements" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
                                                        <item name="sortOrder" xsi:type="string">100</item>
                                                        <item name="displayArea" xsi:type="string">before-place-order</item>
                                                        <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                    </item>

                                                    <item name="agreements-validator" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
                                                    </item>

                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </body>
    </page>

— 쇼 라브
소스

place_order_button.css 파일이이 답변에서 누락되었습니다

— Vignesh Bala

이 솔루션으로 문제가 해결 되었습니까? 실제로, 나는 똑같은 일을해야합니다

— Akash Agrawal