Magento 2: Di chuyển nút đặt hàng từ thanh toán sang thanh bên trên trang thanh toán?


13

Tôi muốn chuyển nút đặt hàng từ thanh toán sang thanh bên trên trang thanh toán.

nhập mô tả hình ảnh ở đây

Bất cứ ai có thể cho tôi một đề nghị?

Chỉnh sửa : Điều này thậm chí có thể (với câu trả lời / cách tiếp cận được cung cấp) ?

Từ nghiên cứu của tôi, mọi phương thức thanh toán đều có mẫu .html riêng bao gồm một nút riêng. Nút này không được tải từ mẫu knockout.js. Ví dụ: một phần của phương thức thanh toán "miễn phí":

    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()}
                    ">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

Mặc dù phương thức thanh toán "séc / phiếu chuyển tiền" trông như thế này (chỉ có sự khác biệt enable: (getCode() == isChecked())nhưng hey, vẫn có sự khác biệt và không có "nút đặt hàng chung 1 toàn năng":

  <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    enable: (getCode() == isChecked())
                    "
                    disabled>
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

Câu trả lời được cung cấp chỉ di chuyển các thỏa thuận dẫn đến kết quả như thế này:

nhập mô tả hình ảnh ở đây


Xin chào - bạn đã tìm thấy một cách hợp lý để làm điều này cuối cùng? Cảm ơn
Tom Burman

Làm thế nào bạn tìm thấy thành công trong việc xác thực hộp kiểm của các điều khoản và điều kiện?
Condor

Câu trả lời:


6

Tôi có yêu cầu tương tự để thay đổi nút đặt hàng ở dưới cùng của khối tóm tắt. Vì có nút đặt hàng được chỉ định cho từng phương thức thanh toán. Tôi đã tạo một nút đặt hàng tùy chỉnh bên cạnh khối tóm tắt đơn hàng. Trong khi nhấp vào nút, tôi đã kích hoạt nút đặt hàng của phương thức thanh toán đã chọn.

Bước 1:

Tạo một checkout_index_index.xmltập tin trong

đường dẫn ứng dụng / mã / 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="summary" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/summary</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/summary</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Bước 2:

Tạo một tệp summary.htmltrong đường dẫn

ứng dụng / mã / VendorName / PlaceOrder / view / frontend / web / template

<div class="opc-block-summary" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order Summary'" 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 -->

Bước 3:

Tạo một tệp summary.jstrong đường dẫn

ứng dụng / mã / VendorName / PlaceOrder / view / frontend / web / js / view

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/summary',
        '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();
            }

        });
    }
);

Bước 4:

Để ẩn nút thứ tự vị trí mặc định, sử dụng tệp CSS như sau

ứng dụng / mã / VendorName / PlaceOrder / view / frontend / web / css / place_order_button.css

.payment-method-content .actions-toolbar{
    display: none;
}

Kèm theo là ảnh chụp màn hình!

nhập mô tả hình ảnh ở đây


Xin chào @Haritha, tôi đã thử giải pháp của bạn nhưng nó không hoạt động. Nút không hiển thị trên trang thanh toán. Bạn có thể vui lòng giúp tôi về điều này.?

Xin chào Mayank Zalavadia, Bạn có thể kiểm tra xem mô-đun tùy chỉnh của mình đã được tải sau Mô-đun Magento_Checkout trong ứng dụng / etc / config.php
Haritha

Tôi đã kiểm tra xem và bây giờ nó đang hoạt động nhưng tôi không thể thêm nút Đặt hàng như bạn đã đề cập trong ảnh chụp màn hình của mình. Nó chỉ hiển thị trong bản tóm tắt. Bạn có thể vui lòng giúp tôi di chuyển nút Đặt hàng tại cùng địa điểm như bạn đề cập trong ảnh chụp màn hình của bạn.

Bạn có thể chia sẻ ảnh chụp màn hình của bạn?
Haritha

nimb.ws/5EdgS2 kiểm tra ảnh chụp màn hình

1

Tất cả các câu trả lời này không đầy đủ vì thiếu tệp register.php cho mô-đun đăng ký

Đây là câu trả lời tốt nhất tôi tìm thấy.

https://github.com/davidroberto/magento2-place_order_sidebar

Đây là mô-đun hoàn chỉnh, bạn chỉ cần đặt bên dưới Ứng dụng / mã và để chạy thiết lập php bin / magento: lệnh nâng cấp

Hy vọng điều này giúp đỡ!!!


cảm ơn, nó làm việc cho tôi
sarvesh Dineshkumar Patel

0

lúc đầu, bạn cần tạo checkout_index_index.xml trong chủ đề của mình, sau đó cần vô hiệu hóa mục trước thứ tự địa điểm trong dòng 314:

 <item name="before-place-order" xsi:type="array">

với:

<item name="before-place-order" xsi:type="array">
      <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

Sau đó, bạn cần thêm lại yếu tố đó vào cuối Thanh toán, sau nút đặt hàng, như thế này:

<item name="after-place-agreements" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">after-place-agreements</item>
<item name="dataScope" xsi:type="string">before-place-order</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
    <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
</item>
<item name="children" xsi:type="array">
    <item name="agreementss" 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">after-place-agreements</item>
        <item name="dataScope" xsi:type="string">checkoutAgreements</item>
        <item name="provider" xsi:type="string">checkoutProvider</item>
    </item>
</item>

Sau đó sao chép trong mẫu mặc định của bạn (html) sau khi đặt hàng:

<!-- ko foreach: getRegion('after-place-agreements') -->
<!-- ko template: getTemplate() --><!-- /ko -->
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.