Cara Menyesuaikan Proses Checkout di Magento 2

Diterbitkan: 2018-04-23

Daftar Isi

Di Magento 2, proses checkout didesain ulang untuk pengalaman yang lebih cepat dan lebih mudah. Halaman Checkout mengarahkan pelanggan melalui 2 langkah proses yang mudah. Pelanggan yang masuk ke akun mereka dapat menyelesaikan pembayaran dengan cepat, karena sebagian besar informasi sudah ada di akun mereka. Langkah pertama dari proses checkout adalah pelanggan melengkapi informasi alamat pengiriman, dan memilih metode pengiriman. Selama langkah kedua, pelanggan memilih metode pembayaran, dan menerapkan kupon apa pun untuk menyelesaikan pembelian.

Sesuaikan checkout default Magento 2

Anda dapat menambahkan langkah checkout baru atau mengubah tampilan checkout yang ada untuk menyesuaikan checkout default dengan cara Anda sendiri.

Tambahkan langkah checkout baru

Anda dapat menambahkan langkah checkout khusus, itu harus diterapkan sebagai komponen UI. Demi kompatibilitas, peningkatan kemampuan, dan perawatan yang mudah, jangan edit kode Magento default, tambahkan penyesuaian Anda di modul terpisah.

Langkah 1: Buat bagian tampilan dari komponen langkah checkout

Untuk membuat bagian tampilan dari langkah checkout baru:

  1. Tambahkan direktori modul. Semua file kustom harus disimpan di sana. Agar penyesuaian checkout Anda diterapkan dengan benar, modul khusus Anda harus bergantung pada modul Magento_Checkout . Jangan gunakan Ui untuk nama modul kustom Anda, karena notasi %Vendor%_Ui , yang diperlukan saat menentukan jalur, dapat menyebabkan masalah.
  2. Buat file .js yang mengimplementasikan model tampilan.
  3. Buat template .html untuk komponen.

Setiap langkah dijelaskan secara rinci di bawah ini:

1. Tambahkan file JavaScript yang mengimplementasikan langkah baru

Langkah checkout baru harus diimplementasikan sebagai komponen UI. Artinya, implementasi JavaScript-nya harus berupa modul JavaScript.

File harus disimpan di bawah <your_module_dir>/view/frontend/web/js/view .

<your_module_dir> adalah singkatan dari path ke direktori modul Anda dari direktori root. Biasanya salah satu dari berikut ini: app/code/<YourVendor>/<YourModule> atau vendor/<yourvendor>/module-<module>-<name> .

Contoh my-step-view.js dengan komentar berikut: 

 mendefinisikan(
    ['ko', 'uiComponent', 'underscore', 'Magento_Checkout / js / model / step - navigator'],
    fungsi(
        ko,
        Komponen,
        _,
        langkah Navigator
    ) {'
        gunakan ketat';
        /**
         *
         * mystep – adalah nama template .html komponen,
         * <Vendor>_<Module> – adalah nama direktori modul Anda.
         *
         */
        kembalikan Component.extend({
            default: {
                template: ' < Vendor > _ < Modul > /langkah saya'
            },

            // tambahkan di sini logika Anda untuk menampilkan langkah,
            isVisible: ko.observable(true),

            /**
             *
             * @kembali {*}
             */
            inisialisasi: fungsi() {
                ini._super();
                // daftarkan langkahmu
                stepNavigator.registerLangkah(
                    //kode langkah akan digunakan sebagai id konten langkah dalam template komponen
                    'langkah_kode',
                    //langkah alias
                    batal,
                    //nilai judul langkah
                    'Judul Langkah',
                    //properti yang dapat diamati dengan logika saat menampilkan langkah atau menyembunyikan langkah
                    ini.Terlihat,

                    _.bind(ini.navigasi, ini),

                    /**
                     * urutkan nilai pesanan
                     * 'urutkan nilai pesanan' < 10: langkah ditampilkan sebelum langkah pengiriman;
                     * 10 < 'urutkan nilai pesanan' < 20 : tampilan langkah antara langkah pengiriman dan pembayaran
                     * 'urutkan nilai pesanan' > 20 : langkah ditampilkan setelah langkah pembayaran
                     */
                    15
                );

                kembali ini;
            },

            /**
             * Metode navigasi () bertanggung jawab untuk navigasi antara langkah checkout
             * saat checkout. Anda dapat menambahkan logika khusus, misalnya beberapa kondisi
             * untuk beralih ke langkah khusus Anda
             */
            navigasi: fungsi() {

            },

            /**
             * @mengembalikan batal
             */
            navigasiToNextStep: function() {
                stepNavigator.berikutnya();
            }
        });
    }
);
2. Tambahkan template .html

Di direktori modul, tambahkan template .html untuk komponen. Itu harus berada di bawah <your_module_dir>/view/frontend/web/template .

Contoh mystep.html berikut: 

 <!–Nilai 'step_code' dari file .js harus digunakan–>
<li data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Judul Langkah'" data-role="title"></div>
    <div class="step-content" data-role="content">

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

Langkah 2: Tambahkan langkah Anda ke tata letak halaman Checkout

Agar langkah baru ditampilkan di halaman, Anda harus mendeklarasikannya di tata letak halaman Checkout, yang didefinisikan di checkout_index_index.xml .

Jadi, Anda perlu menambahkan file layout checkout_index_index.xml yang diperluas di lokasi berikut: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

Contoh checkout_index_index.xml berikut: 

 <halaman xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <tubuh>
        <referenceBlock name="checkout.root">
            <argumen>
                <nama argumen="jsLayout" xsi:type="array">
                    <nama item="komponen" xsi:type="array">
                        <nama item="checkout" xsi:type="array">
                            <nama item="anak" xsi:type="array">
                                <nama item="langkah" xsi:type="array">
                                    <nama item="anak" xsi:type="array">
                                        <!– Langkah baru yang Anda tambahkan –>
                                        <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!–Untuk menampilkan konten langkah sebelum pengiriman, nilai "sortOrder" langkah harus < 1–>
                                            <!–Untuk menampilkan konten langkah antara langkah pengiriman dan langkah pembayaran 1 < "sortOrder" < 2 –>
                                            <!–Untuk menampilkan konten langkah setelah langkah pembayaran "sortOrder" >2 ->
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <nama item="anak" xsi:type="array">
                                                <!–tambahkan di sini deklarasi komponen anak untuk langkah Anda–>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argumen>
            </argumen>
        </referenceBlock>
    </tubuh>
</halaman>

Bidang Kustom Checkout Magento 2

$119,00

Magento 2 Pembayaran Satu Langkah

$99 $119,00

Sesuaikan tampilan checkout yang ada

Dalam aplikasi Magento, checkout diimplementasikan menggunakan komponen UI. Anda dapat menyesuaikan setiap langkah dengan mengubah implementasi JavaScript atau template untuk komponen, menambahkan, menghapus, atau menonaktifkan komponen.

Langkah 1: Ubah implementasi dan template .js komponen

Untuk mengubah implementasi .js dan template yang digunakan untuk rendering komponen, Anda perlu mendeklarasikan file baru di tata letak halaman checkout. Untuk melakukannya, lakukan langkah-langkah berikut:

  1. Di direktori modul khusus Anda, buat file baru berikut: <your_module_dir>/view/frontend/layout/checkout_index_index.xml . (Agar kustomisasi checkout Anda diterapkan dengan benar, modul kustom Anda harus bergantung pada modul Magento_Checkout.)
  2. Dalam file ini, tambahkan yang berikut ini: 
 <halaman xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <tubuh>
        <referenceBlock name="checkout.root">
            <argumen>
                <nama argumen="jsLayout" xsi:type="array">
                    <!– Kustomisasi Anda akan ada di sini ->
                    …
                </argumen>
            </argumen>
        </referenceBlock>
    </tubuh>
</halaman>
  1. Dalam file <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml , temukan komponen yang perlu Anda sesuaikan. Salin simpul yang sesuai dan semua simpul induk hingga <argument> . Tidak perlu meninggalkan semua atribut dan nilai node parente, karena Anda tidak akan mengubahnya.
  2. Ubah jalur ke file .js komponen, templat, atau properti lainnya.

Contoh:

Modul Magento_Shipping menambahkan komponen yang dirender sebagai tautan ke info Kebijakan Pengiriman ke langkah Pengiriman:

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

terlihat seperti berikut: 

 <halaman xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <tubuh>
        <referenceBlock name="checkout.root">
            <argumen>
                <nama argumen="jsLayout" xsi:type="array">
                    <nama item="komponen" xsi:type="array">
                        <nama item="checkout" xsi:type="array">
                            <nama item="anak" xsi:type="array">
                                <nama item="langkah" xsi:type="array">
                                    <nama item="anak" xsi:type="array">
                                        <nama item="langkah-pengiriman" xsi:type="array">
                                            <nama item="anak" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <nama item="anak" xsi:type="array">
                                                        <item name="before-shipping-method-form" xsi:type="array">
                                                            <nama item="anak" 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>
                </argumen>
            </argumen>
        </referenceBlock>
    </tubuh>
</halaman>

Langkah 2: Tambahkan komponen baru ke tata letak halaman checkout

Setiap komponen UI ditambahkan di checkout_index_index.xml mirip dengan cara komponen langkah checkout ditambahkan.

Pastikan Anda mendeklarasikan sebuah komponen sehingga dirender dengan benar oleh komponen induk. Jika komponen induk adalah komponen UI umum (direferensikan oleh alias uiComponent ), komponen turunannya dirender tanpa kondisi apa pun. Tetapi jika komponen induk adalah perpanjangan dari komponen UI umum, maka rendering anak mungkin dibatasi dengan cara tertentu. Misalnya komponen hanya dapat merender anak-anak dari displayArea tertentu.

Langkah 3 : Nonaktifkan komponen

Untuk menonaktifkan komponen di checkout_index_index.xml Anda, gunakan petunjuk berikut: 

 <nama item="%the_component_to_be_disabled%" xsi:type="array">
    <nama item="config" xsi:type="array">
        <item name="componentDisabled" xsi:type="boolean">benar</item>
    </item>
</item>

Langkah 4: Hapus komponen

Untuk menghapus komponen dari rendering tata letak, Anda perlu membuat plugin untuk metode \Magento\Checkout\Block\Checkout\LayoutProcessor::process . Di plugin Anda, terapkan metode around menghapus node tata letak yang sesuai saat run-time.

Contoh berikut adalah contoh metode around menghilangkan komponen: 

 unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% adalah jalur ke node komponen di checkout_index_index.xml
kembali $jsLayout;

(Jika Anda ingin menggunakan contoh ini dalam kode Anda, ganti placeholder %path_to_target_node% dengan nilai sebenarnya.)

*Nonaktifkan vs hapus komponen: Jika Anda menonaktifkan komponen, komponen dimuat tetapi tidak dirender. Jika Anda menghapus komponen, itu tidak dimuat.

Pos terkait:
Cara Menambahkan Kode Diskon ke Checkout di Magento
Cara Menambahkan Pembayaran Kustom ke Magento 2 Checkout