Knowledge Base

Requirement:

• PWA / PWA Checkout
  

How To Pay

How To Pay merupakan sebuah informasi pembayaran yang dapat digunakan pengguna untuk membantu dalam pembayaran ketika melakukan transaksi belanja. Pada halaman Pembayaran atau checkout akan terdapat tombol How To Pay yang dapat digunakan untuk untuk melihat informasi pembayaran yang dapat digunakan tanpa harus berpindah halaman.

Gambar 1: Tampilan How To Pay pada frontend di Checkout 

How To Pay memiliki sebuah tampilan baru dengan memanfaatkan tampilan Collapsible dalam mempercantik tampilan dan mempermudah pengguna dalam membaca informasi yang ada. 

Untuk membuat How To Pay, Anda harus membuat sebuah Block baru. 

Gambar 2: Tampilan pada menu Content pada bagian Elements

Masuk ke Backoffice > Content > Elements > Blocks

1. Buat Block baru dengan klik Add New Block
   

2. Isi sesuai dengan ketentuan yang ada. Pastikan pada Enable Block pilih Yes untuk mengaktifkan CMS tersebut. Untuk mengetahui lebih banyak tentang CMS Blocks silakan untuk cek dokumentasi CMS Page dan Blocks.
   

Gambar 3: Tampilan pada halaman Add New Block

3. Dalam pengisian Identifier disarankan untuk mengisi dengan HowToPay agar memudahkan dalam konfigurasi 
   

Gambar 4: Tampilan pada halaman Add New Block

4. Terdapat form input untuk mengatur tampilan How To Pay. Terdapat 3 cara untuk mengatur tampilan yaitu dengan Magezone, WYSIWYG Editor atau dapat langsung dengan memasukan kode di form tersebut. Untuk mengetahui informasi lebih dengan Magezon silakan untuk ke dokumentasi Magezon Page Builder. 
   

<div class="accordion accordion-bg clearfix" data-bind="mageInit: {'accordion':{'openedState': '_active'}} "> <div data-role="collapsible"> ------- a <div class="acctitle" data-role="title">Nama_Bank/div> ------- b <div class="acc_content clearfix" data-role="content">Masukan Teks yang  akan ditambahkan</div> ------- c </div>

5. Masukan kode diatas di form input. Anda dapat menggunakan kode tersebut untuk membuat tampilan pada How To Pay. 
   

Tampilan Pada Frontend

1.  Membuat tampilan collapsible
   

Gambar 5: Tampilan How To Pay pada frontend 

2. Menampilkan teks pada tombol collapsible
   

Gambar 6: Tampilan How To PAy pada frontend 

3. Menampilkan teks untuk menambahkan informasi
   

Gambar 7: Tampilan How To Pay pada frontend 

     4. Klik Save Block

Selain untuk menu di checkout, How To Pay digunakan pada CMS Page untuk menampilkan halaman informasi pembayaran.

Gambar 8: Tampilan How To Pay pada frontend 

Masuk ke Backoffice/Admin > Content > Pages 

1. Buat Page baru dengan klik Add New Page
   

2. Isi sesuai dengan ketentuan yang ada. Pastikan pada Enable Page pilih Yes untuk mengaktifkan CMS tersebut. Untuk mengetahui lebih banyak tentang CMS Pages silakan untuk cek dokumentasi CMS Page dan Blocks.
   

3. Klik pada bagian Content
   

Gambar 9: Tampilan pada halaman Add New Page

Terdapat form input untuk memasukan kode untuk menghubungkan dengan Block How To Pay yang sudah dibuat. 

<p>{{widgettype="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="identifie_Block"}}</p>

Identifier Block: masukan id Block yang Anda buat untuk How To Pay.

4. Masukan kode tersebut pada form input di bagian Content. Selain dengan langsung memasukan kode tersebut Anda dapat memasukan Block How To Pay dengan WYSIWYG Editor.
   

5. Klik pada tombol WYSIWYG Editor
   

Gambar 10: Tampilan pada halaman Add New Page bagian Content

6. Klik pada tombol Show / Hide Editor
   

Gambar 11: Tampilan pada halaman Add New Page bagian Content

7. Klik Insert Widget 
   

Gambar 12: Tampilan pada halaman Add New Page bagian Content

8. Pada Widget Type pilih CMS Static Block
   

Gambar 13: Tampilan pada halaman Add New Page bagian Content

9. Maka akan muncul Widget Options, pilih Template yang digunakan. Klik tombol Select Block lalu pilih Block How To Pay yang sudah dibuat. Klik Insert Widget lali Submit.
   

10. Klik Save CMS Page