Informasi tambahan di halaman pembayaran checkout – Beragampengetahuan
Di blog ini, kami akan menambahkan informasi tambahan ke halaman pembayaran checkout. Pertama, kita perlu membuat modul khusus. Anda dapat menggunakan blog ini untuk membuat modul dengan mengklik di sini.
Topik ini berisi informasi dasar tentang cara menyesuaikan tampilan halaman pembayaran checkout yang ada. Dalam aplikasi Magento, checkout diimplementasikan menggunakan komponen UI.Anda dapat menyesuaikan setiap langkah dengan mengubah implementasi atau template JavaScript komponen
Langkah 1:- Setelah modul dibuat 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.).
Langkah 2: – Dalam file ini, tambahkan berikut ini:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src=" defer="defer" async="async" src_type="url"/>
</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="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="beforeMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="place-order-custom-container" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<item name="children" xsi:type="array">
<item name="place-order-custom" xsi:type="array">
<item name="component" xsi:type="string">Webkul_Custom/js/custom</item>
<item name="displayArea" xsi:type="string">place-order-custom</item>
<item name="configSource" xsi:type="string">checkoutConfig</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Di halaman checkout, kami menambahkan komponen Webkul_Custom/js/custom, menambahkan displayArea dan configSource.
Ubah jalur komponen .js File, template, atau properti lainnya sesuai kebutuhan Anda.
Pastikan untuk mendeklarasikan komponen sehingga komponen induk merendernya dengan benar.Jika komponen induk adalah komponen UI umum (oleh uiComponent alias) yang komponen turunannya dirender tanpa syarat apa pun. Namun, jika komponen induk merupakan ekstensi dari komponen UI umum, rendering komponen anak mungkin dibatasi dalam beberapa cara.Misalnya, sebuah komponen hanya dapat merender dari tertentu displayArea.
Langkah 3: – Setelah ini kita perlu membuat file baru berikut: <your_module_dir>/view/frontend/web/js/custom.js
Langkah 4: – Dalam file ini, tambahkan berikut ini:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define(
[
'uiComponent',
'jquery',
], function (Component, $) {
'use strict';
return Component.extend({
defaults: {
template: 'Webkul_Custom/custom',
},
initialize: function () {
this._super();
},
});
});
Dalam kode di atas, kami mendefinisikan template tempat Anda perlu menambahkan kode khusus sesuai kebutuhan.
Contents
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Informasi #tambahan #halaman #pembayaran #checkout
