Panduan Pemula untuk Blok dan Widget Magento

Blok dan Widget adalah fitur tata letak utama di Magento. Kedua fitur ini sangat terkait erat, dan sering digunakan bersama.

Salah satu cara untuk berpikir tentang Blok adalah bahwa mereka adalah Halaman mini. Blok juga dapat berisi teks, gambar, video, dan lainnya. Tetapi karena Blok lebih kecil, Anda akan melihatnya di sekitar tepi situs Anda. Blok sering dimasukkan ke dalam header, sidebar, dan footer.

Namun, Blok ditempatkan menggunakan Widget. Pertama Anda membuat Blok, dan kemudian Anda menggunakan Widget untuk memutuskan di mana Blok itu akan ditampilkan.

Mari memandu Anda melalui beberapa contoh dan menunjukkan cara kerja Blok dan Widget di Magento.

Panduan ini diambil dari Magento 2 Explained, buku terlaris untuk Magento 2. Kami menggunakan contoh toko bernama "Orangeville" di buku itu, jadi Anda akan melihatnya dirujuk di sini.

Membuat Blok Magento Dijelaskan

Mari kita melalui proses pembuatan Blok pertama kita. Ini akan berisi tautan HTML.

• Buka "Konten", lalu "Blokir".
• Klik "Tambahkan Blok Baru" di sudut kanan atas.

• Masukkan "Tautan Kunci" sebagai "Judul Blok". Inilah yang akan dilihat pengunjung di layar.
• Masukkan "key_links" sebagai Identifier. String inilah yang digunakan Magento untuk mengidentifikasi blok, tetapi pengunjung tidak akan pernah melihatnya.

• Klik ikon peluru di bilah alat editor:

• Ketik "Tentang Orangeville" sebagai poin penting:
• Pilih teks "Tentang Orangeville" dan klik ikon tautan.

• Anda sekarang akan melihat jendela pop-up. Masukkan URL halaman "Tentang Orangeville" Anda. Jika Anda tidak yakin apa ini, Anda dapat membuka situs Magento Anda di tab browser baru dan menemukan URL-nya, yang kemungkinan besar adalah example.com/about-orangeville/.
• Klik "Sisipkan".
• Anda sekarang memiliki tautan "Tentang Orangeville" di dalam Blok Anda:

• Klik "Simpan Blok".

Membuat Widget Magento Dijelaskan

Kami sekarang memiliki tantangan untuk menempatkan blok Anda ke dalam desain situs Anda. Di sinilah Widget Magento berguna. Di Magento, Blok hanyalah sepotong konten. Ini adalah Widget yang mengontrol penempatan Blok.

Namun, tidak hanya itu yang dapat dilakukan oleh Widget. Widget dapat menempatkan Blok baru kami yang sederhana, tetapi juga dapat menempatkan banyak fitur lainnya.

• Buka "Konten", lalu "Widget".
• Klik "Tambah Widget".
• Untuk "Jenis", pilih "Blok Statis CMS".
• Untuk "Tema Desain", pilih "Magento Luma".
• Klik "Lanjutkan".

• Masukkan "Tautan Kunci Orangeville" untuk "Judul Widget".
• Di bawah "Tetapkan ke Tampilan Toko", pilih "Semua Tampilan Toko".

Selanjutnya, kita akan mengontrol URL mana Blok ini muncul.

• Klik "Tambahkan Pembaruan Tata Letak".

• Pilih "Semua Halaman".

• Pilih "CMS Footer Links" untuk opsi "Container".

Kedua pilihan ini, "Semua Halaman" dan "CMS Footer Links", mungkin belum terlalu masuk akal bagi Anda. Namun, kita akan menyelesaikan pembuatan widget dan kemudian di bab ini, di bagian yang disebut, "Dijelaskan Penempatan Widget Magento", kami akan menjelaskan lebih lanjut tentang mengapa kami membuat pilihan ini.

Di bawah "Pembaruan Tata Letak", kita akan membuat pilihan kedua untuk menempatkan widget kita.

• Pilih "Semua Jenis Produk".
• Pilih "CMS Footer Links" lagi.
• Setelah menambahkan kedua opsi ini, layar Anda akan terlihat seperti gambar di bawah ini.

Pada titik ini, Anda telah membuat Widget dan memberi tahu Magento di mana seharusnya muncul di situs Anda: Widget ini akan muncul di semua Halaman kami dan semua Produk kami.

Sekarang saatnya memilih konten Widget, yang akan menjadi Blok yang Anda buat sebelumnya.

• Klik "Opsi Widget" di bilah sisi.
• Klik "Pilih Blokir".

• Sekarang Anda dapat memilih blok "Tautan kunci" yang Anda buat sebelumnya:

• Klik "Simpan".
• Kunjungi bagian depan situs Anda, dan Anda akan melihat tautan Anda sekarang dipublikasikan di footer. Anda membuat Blok dengan konten, dan menerbitkannya di dalam Widget.

Membuat Blok dan Widget Bersama

Pasti ada beberapa langkah rumit saat Anda membuat Blok dan Widget. Jadi mari kita coba seluruh proses ini bersama-sama. Kami akan membuat Blok kedua dan menempatkannya di situs kami dengan bantuan Widget. Blok ini akan memberi tahu orang-orang bahwa kami memiliki jaminan kepuasan 100%.

• Buka "Konten", lalu "Blokir".
• Klik "Tambahkan Blok Baru".
• Judul: Kepuasan Dijamin
• Pengenal: jaminan

• Masukkan teks untuk Blok Anda. Saya menulis "Di Orangeville, kepuasan Anda adalah prioritas utama kami. Jika Anda tidak puas, kami akan mengembalikan uang Anda."

Selanjutnya, kita akan mengunggah gambar untuk blok kita.

• Tempatkan kursor Anda ke area konten utama, di bawah teks yang baru saja Anda tulis.
• Klik ikon pohon di bilah alat editor Anda.
• Saat Anda melihat kotak pop-up, klik ikon kotak kecil.
• Temukan gambar yang dapat Anda unggah. Saya telah memilih lencana 100%.

• Klik "Sisipkan File".
• Deskripsi Gambar: Jaminan Kepuasan
• Klik "Sisipkan".

• Anda sekarang memiliki Blok yang berisi teks dan gambar baru Anda.
• Klik "Simpan Blok" untuk menyelesaikan pembuatan Blok ini.

Selanjutnya, mari kita buat Widget yang akan menampilkan Blok ini di situs kita.

• Buka "Konten", lalu "Widget".
• Klik "Tambah Widget".
• Mengetik: Blok Statis CMS
• Tema Desain: Magento Luma

• Judul Widget: Dijamin Kepuasan
• Tetapkan ke Tampilan Toko: Semua Tampilan Toko

• Pembaruan Tata Letak: Kategori Jangkar
• Wadah: Sidebar Main
• Klik "Opsi Widget" dan pilih Blok "Dijamin Kepuasan" yang baru saja Anda buat.

• Klik "Simpan".
• Kunjungi bagian depan situs Anda. Klik salah satu tautan kategori di menu atas. Pada gambar di bawah, saya mengklik "Buah". Anda sekarang akan melihat Blok jaminan Anda di bilah sisi kiri:

Penempatan Widget Magento Dijelaskan

Satu pertanyaan umum yang saya dapatkan dari pelajar Magento adalah tentang penempatan Widget.

Bagaimana Anda tahu untuk memilih "CMS Footer Links" atau "Sidebar Main" untuk Container? Lagi pula, ada 22 pilihan berbeda, seperti yang Anda lihat pada gambar di bawah ini.

Apa perbedaan antara "After Page Header" dan "After Page Header Top"? Apa perbedaan antara "Page Footer" dan "Page Footer Container"? Nama-nama itu sangat mirip sehingga pasti bisa membingungkan.

Sayangnya, tidak ada cara pasti untuk mengetahuinya terlebih dahulu, meskipun namanya akan memberi Anda gambaran yang baik tentang penempatannya:

• After Page Header: Ini kemungkinan berada di bawah menu utama.
• Konten Utama Bawah: Ini mungkin terletak di bagian tengah layar, di bawah produk atau konten Halaman kami.
• Page Top: Ini akan muncul di bagian atas Halaman, tetapi tidak di layar Produk.

Perlu dicatat bahwa opsi ini berubah, bahkan di situs yang sama. Jika Anda mencoba untuk menempatkan Blok dan memilih "Semua Jenis Produk" untuk "Opsi Tata Letak" Widget Anda, maka Anda akan mendapatkan serangkaian pilihan yang berbeda, yang ditunjukkan pada gambar di bawah. Opsi ini memberikan beberapa penempatan yang hanya masuk akal untuk layar produk Anda. Misalnya, Anda sekarang melihat pilihan yang menyertakan "Penampung tautan sosial produk" dan "Kolom Formulir Tinjau Sebelum". Penempatan Widget tersebut tidak masuk akal di mana pun kecuali di layar Produk.

Di sisi lain, daftar ini terkadang bisa lebih pendek. Di bagian selanjutnya dari bab ini, kita akan melihat bahwa beberapa Widget hanya hadir dengan tiga opsi Kontainer.

Jadi, tidak ada jaminan cara untuk mengetahui dengan tepat di mana Widget Anda akan muncul jika Anda memilih Wadah tertentu. Akan ada beberapa pengujian dan eksperimen yang terlibat saat Anda menguji opsi yang berbeda ini.

Ringkasan Blok Magento dan Widget

Blok dan Widget memungkinkan Anda menambahkan item baru ke desain situs Anda. Namun, ada beberapa elemen di situs Anda yang tidak dapat dengan mudah dimodifikasi atau diganti dari antarmuka admin Magento. Mereka terlihat seperti Blok dan Widget, tetapi Magento tidak membuatnya seperti itu. Jadi, saya membuat halaman dengan instruksi untuk memperbarui beberapa elemen default tersebut.

Jika Anda siap untuk mempelajari lebih lanjut tentang Magento, lihat Magento 2 Explained, buku terlaris untuk Magento 2.

Kami juga memiliki beberapa tutorial Magento online yang lebih bagus, termasuk:

• Panduan Pemula untuk Memahami Pajak Magento
• Gambar Dasar, Kecil, Thumbnail, dan Swatch di Magento
• Pelajari Apa Itu Indeks Magento 2 dan Bagaimana Anda Dapat Mengelolanya