วิธีปรับแต่งกระบวนการชำระเงินใน Magento 2

เผยแพร่แล้ว: 2018-04-23

สารบัญ

ใน Magento 2 กระบวนการเช็คเอาต์ได้รับการออกแบบใหม่เพื่อประสบการณ์ที่รวดเร็วและง่ายขึ้น หน้าการชำระเงินจะนำลูกค้าไปสู่ ​​2 ขั้นตอนง่ายๆ ของกระบวนการ ลูกค้าที่ลงชื่อเข้าใช้บัญชีของตนสามารถชำระเงินได้อย่างรวดเร็ว เนื่องจากข้อมูลส่วนใหญ่อยู่ในบัญชีอยู่แล้ว ขั้นตอนแรกของกระบวนการเช็คเอาต์คือให้ลูกค้ากรอกข้อมูลที่อยู่สำหรับจัดส่ง และเลือกวิธีการจัดส่ง ในขั้นตอนที่สอง ลูกค้าจะเลือกวิธีการชำระเงิน และใช้คูปองเพื่อดำเนินการซื้อให้เสร็จสิ้น

ปรับแต่งการชำระเงินเริ่มต้นของ Magento 2

คุณสามารถเพิ่มขั้นตอนการชำระเงินใหม่หรือเปลี่ยนมุมมองของการชำระเงินที่มีอยู่เพื่อปรับแต่งการชำระเงินเริ่มต้นในแบบของคุณเอง

เพิ่มขั้นตอนการชำระเงินใหม่

คุณสามารถเพิ่มขั้นตอนการชำระเงินที่กำหนดเองได้ ซึ่งควรนำไปใช้เป็นส่วนประกอบ UI เพื่อความเข้ากันได้ การอัพเกรด และการบำรุงรักษาง่าย อย่าแก้ไขโค้ด Magento เริ่มต้น เพิ่มการปรับแต่งของคุณในโมดูลแยกต่างหาก

ขั้นตอนที่ 1: สร้างส่วนมุมมองของส่วนประกอบขั้นตอนการชำระเงิน

ในการสร้างส่วนมุมมองของขั้นตอนการชำระเงินใหม่:

  1. เพิ่มไดเร็กทอรีโมดูล ไฟล์ที่กำหนดเองทั้งหมดจะต้องเก็บไว้ที่นั่น เพื่อให้การปรับแต่งการชำระเงินของคุณใช้งานได้อย่างถูกต้อง โมดูลที่กำหนดเองของคุณควรขึ้นอยู่กับโมดูล Magento_Checkout อย่าใช้ Ui สำหรับชื่อโมดูลที่กำหนดเองของคุณ เนื่องจากต้องใช้สัญกรณ์ %Vendor%_Ui เมื่อระบุพาธ อาจทำให้เกิดปัญหาได้
  2. สร้างไฟล์ . .js ที่ใช้โมเดลมุมมอง
  3. สร้างเทมเพลต .html สำหรับส่วนประกอบ

แต่ละขั้นตอนมีรายละเอียดด้านล่าง:

1. เพิ่มไฟล์ JavaScript ที่ใช้ขั้นตอนใหม่

ต้องใช้ขั้นตอนการชำระเงินใหม่เป็นองค์ประกอบ UI กล่าวคือ การใช้งาน JavaScript ต้องเป็นโมดูล JavaScript

ไฟล์ต้องถูกเก็บไว้ภายใต้ <your_module_dir>/view/frontend/web/js/view

<your_module_dir> สัญกรณ์หมายถึงพาธไปยังไดเร็กทอรีโมดูลของคุณจากไดเร็กทอรีราก โดยปกติแล้วจะเป็นหนึ่งในสิ่งต่อไปนี้: app/code/<YourVendor>/<YourModule> or vendor/<yourvendor>/module-<module>-<name>

ตัวอย่าง my-step-view.js พร้อมความคิดเห็นดังนี้: 

 กำหนด(
    ['ko', 'uiComponent', 'underscore', 'Magento_Checkout / js / model / step - เนวิเกเตอร์'],
    การทำงาน(
        โก
        ส่วนประกอบ,
        _,
        stepNavigator
    ) {'
        ใช้อย่างเข้มงวด';
        /**
         *
         * mystep – คือชื่อของเทมเพลต .html ของคอมโพเนนต์
         * <Vendor>_<Module> – คือชื่อของไดเร็กทอรีโมดูลของคุณ
         *
         */
        ส่งคืน Component.extend ({
            ค่าเริ่มต้น: {
                แม่แบบ: ' < ผู้ขาย > _ < โมดูล > /mystep'
            },

            // เพิ่มตรรกะของคุณที่นี่เพื่อแสดงขั้นตอน
            isVisible: ko.observable(จริง),

            /**
             *
             * @returns {*}
             */
            เริ่มต้น: ฟังก์ชั่น () {
                this._super();
                // ลงทะเบียนขั้นตอนของคุณ
                stepNavigator.registerStep(
                    //รหัสขั้นตอนจะถูกใช้เป็นรหัสเนื้อหาขั้นตอนในเทมเพลตส่วนประกอบ
                    'step_code',
                    //ขั้นตอนนามแฝง
                    โมฆะ,
                    //ค่าชื่อขั้นตอน
                    'ชื่อขั้นตอน'
                    // คุณสมบัติที่สังเกตได้พร้อมตรรกะเมื่อแสดงขั้นตอนหรือซ่อนขั้นตอน
                    this.isVisible,

                    _.bind(this.navigate, นี่)

                    /**
                     * เรียงลำดับมูลค่า
                     * 'จัดเรียงมูลค่าการสั่งซื้อ' < 10: แสดงขั้นตอนก่อนขั้นตอนการจัดส่ง;
                     * 10 < 'sort order value' < 20 : แสดงขั้นตอนระหว่างขั้นตอนการจัดส่งและการชำระเงิน
                     * 'sort order value' > 20 : แสดงขั้นตอนหลังจากขั้นตอนการชำระเงิน
                     */
                    15
                );

                ส่งคืนสิ่งนี้;
            },

            /**
             * วิธีนำทาง () มีหน้าที่ในการนำทางระหว่างขั้นตอนการชำระเงิน
             * ระหว่างชำระเงิน คุณสามารถเพิ่มตรรกะที่กำหนดเองได้ ตัวอย่างเช่น เงื่อนไขบางอย่าง
             * เพื่อเปลี่ยนเป็นขั้นตอนที่คุณกำหนดเอง
             */
            นำทาง: ฟังก์ชั่น () {

            },

            /**
             * @returns เป็นโมฆะ
             */
            NaviToNextStep: ฟังก์ชั่น () {
                stepNavigator.next();
            }
        });
    }
);
2. เพิ่ม .html template

ในไดเร็กทอรีโมดูล เพิ่มเทมเพลต .html สำหรับส่วนประกอบ ต้องอยู่ใต้ <your_module_dir>/view/frontend/web/template

ตัวอย่าง mystep.html มีดังนี้: 

 <!–ควรใช้ค่า 'step_code' จากไฟล์ .js–>
<li data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
    <div class="step-content" data-role="content">

        <form data-bind="submit: navigationToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!– ko i18n: 'Next'–><!– /ko –></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

ขั้นตอนที่ 2: เพิ่มขั้นตอนของคุณลงในเค้าโครงหน้าชำระเงิน

สำหรับขั้นตอนใหม่ที่จะแสดงบนเพจ คุณต้องประกาศในโครงร่างหน้า Checkout ซึ่งกำหนดไว้ใน checkout_index_index.xml

ดังนั้น คุณต้องเพิ่มไฟล์โครงร่าง checkout_index_index.xml แบบขยายในตำแหน่งต่อไปนี้: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

ตัวอย่าง checkout_index_index.xml มีดังนี้: 

 <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">
            <อาร์กิวเมนต์>
                <ชื่ออาร์กิวเมนต์="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="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!–หากต้องการแสดงเนื้อหาขั้นตอนก่อนจัดส่ง ค่าขั้นตอน "sortOrder" ควรเป็น < 1–>
                                            <!–เพื่อแสดงเนื้อหาขั้นตอนระหว่างขั้นตอนการจัดส่งและขั้นตอนการชำระเงิน 1 < "sortOrder" < 2 –>
                                            <!–เพื่อแสดงเนื้อหาขั้นตอนหลังจากขั้นตอนการชำระเงิน "sortOrder" >2 –>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!–เพิ่มการประกาศองค์ประกอบลูกสำหรับขั้นตอนของคุณ–>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </อาร์กิวเมนต์>
            </arguments>
        </referenceBlock>
    </body>
</page>

ฟิลด์กำหนดเองของ Magento 2 Checkout

$119,00

การชำระเงิน Magento 2 ขั้นตอนเดียว

$99 $119,00

ปรับแต่งมุมมองของการชำระเงินที่มีอยู่

ในแอปพลิเคชัน Magento การชำระเงินจะดำเนินการโดยใช้ส่วนประกอบ UI คุณสามารถปรับแต่งแต่ละขั้นตอนโดยเปลี่ยน JavaScriptimplementation หรือเทมเพลตสำหรับส่วนประกอบ เพิ่ม ลบ หรือปิดใช้งานส่วนประกอบ

ขั้นตอนที่ 1: เปลี่ยนการใช้งานและเทมเพลต .js ของคอมโพเนนต์

หากต้องการเปลี่ยนการใช้งาน . .js และเทมเพลตที่ใช้สำหรับการแสดงผลคอมโพเนนต์ คุณต้องประกาศไฟล์ใหม่ในเลย์เอาต์ของหน้าเช็คเอาต์ โดยทำตามขั้นตอนต่อไปนี้:

  1. ในไดเร็กทอรีโมดูลที่กำหนดเองของคุณ ให้สร้างไฟล์ใหม่ต่อไปนี้: <your_module_dir>/view/frontend/layout/checkout_index_index.xml (เพื่อให้การปรับแต่งการชำระเงินของคุณใช้งานได้อย่างถูกต้อง โมดูลที่กำหนดเองของคุณควรขึ้นอยู่กับโมดูล Magento_Checkout)
  2. ในไฟล์นี้ เพิ่มสิ่งต่อไปนี้: 
 <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">
            <อาร์กิวเมนต์>
                <ชื่ออาร์กิวเมนต์="jsLayout" xsi:type="array">
                    <!– การปรับแต่งของคุณจะอยู่ที่นี่ –>
                    …
                </อาร์กิวเมนต์>
            </arguments>
        </referenceBlock>
    </body>
</page>
  1. ในไฟล์ <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml ให้ค้นหาส่วนประกอบที่คุณต้องการปรับแต่ง คัดลอกโหนดที่เกี่ยวข้องและโหนดหลักทั้งหมดไม่เกิน <argument> ไม่จำเป็นต้องทิ้งแอตทริบิวต์และค่าทั้งหมดของโหนดหลัก เนื่องจากคุณจะไม่ทำการเปลี่ยนแปลง
  2. เปลี่ยนพาธไปยังไฟล์ . .js ของคอมโพเนนต์ เทมเพลต หรือคุณสมบัติอื่นๆ

ตัวอย่าง:

โมดูล Magento_Shipping เพิ่มองค์ประกอบที่แสดงเป็นลิงก์ไปยังข้อมูลนโยบายการจัดส่งไปยังขั้นตอนการจัดส่ง:

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

ดูเหมือนว่าต่อไปนี้: 

 <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">
            <อาร์กิวเมนต์>
                <ชื่ออาร์กิวเมนต์="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="before-shipping-method-form" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="shipping_policy" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </อาร์กิวเมนต์>
            </arguments>
        </referenceBlock>
    </body>
</page>

ขั้นตอนที่ 2: เพิ่มองค์ประกอบใหม่ให้กับเค้าโครงหน้าชำระเงิน

คอมโพเนนต์ UI ใดๆ จะถูกเพิ่มใน checkout_index_index.xml เหมือนกับวิธีการเพิ่มคอมโพเนนต์ขั้นตอนการชำระเงิน

ตรวจสอบให้แน่ใจว่าคุณได้ประกาศส่วนประกอบเพื่อให้แสดงผลได้อย่างถูกต้องโดยองค์ประกอบหลัก หากองค์ประกอบหลักเป็นองค์ประกอบ UI ทั่วไป (อ้างอิงโดยนามแฝง uiComponent ) ส่วนประกอบย่อยจะแสดงผลโดยไม่มีเงื่อนไขใดๆ แต่ถ้าองค์ประกอบหลักเป็นส่วนขยายของส่วนประกอบ UI ทั่วไป การเรนเดอร์ลูกอาจถูกจำกัดในบางวิธี ตัวอย่างเช่น ส่วนประกอบสามารถแสดงผลเฉพาะลูกจาก displayArea บางตัว

ขั้นตอนที่ 3 : ปิดการใช้งานส่วนประกอบ

หากต้องการปิดใช้งานคอมโพเนนต์ใน checkout_index_index.xml ให้ใช้คำแนะนำต่อไปนี้: 

 <item name="%the_component_to_be_disabled%" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="componentDisabled" xsi:type="boolean">จริง</item>
    </item>
</item>

ขั้นตอนที่ 4: ลบส่วนประกอบ

ในการลบส่วนประกอบออกจากการแสดงผลเลย์เอาต์ คุณต้องสร้างปลั๊กอินสำหรับวิธี \Magento\Checkout\Block\Checkout\LayoutProcessor::process ในปลั๊กอินของคุณ ใช้เมธอด around เพื่อลบโหนดเลย์เอาต์ที่เกี่ยวข้องในขณะใช้งาน

ตัวอย่างต่อไปนี้เป็นตัวอย่างของวิธีการ around ที่ลบส่วนประกอบ: 

 unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% คือเส้นทางไปยังโหนดของส่วนประกอบใน checkout_index_index.xml
ส่งคืน $jsLayout;

(ถ้าคุณต้องการใช้ตัวอย่างนี้ในโค้ดของคุณ ให้แทนที่ตัวยึดตำแหน่ง %path_to_target_node% ด้วยค่าจริง)

*ปิดการใช้งาน vs ลบส่วนประกอบ: หากคุณปิดใช้งานส่วนประกอบ ส่วนประกอบจะถูกโหลดแต่จะไม่แสดงผล หากคุณลบส่วนประกอบ ส่วนประกอบจะไม่ถูกโหลด

กระทู้ที่เกี่ยวข้อง:
วิธีเพิ่มรหัสส่วนลดเพื่อชำระเงินใน Magento
วิธีเพิ่มการชำระเงินแบบกำหนดเองให้กับ Magento 2 Checkout