Cara Membuat Widget Magento 2 Khusus

Diterbitkan: 2022-03-11

Widget memungkinkan administrator toko Magento 2 menambahkan konten statis/dinamis ke halaman dan blok CMS, menyediakan banyak fungsi dan implementasi langsung. Widget adalah komponen yang dapat digunakan kembali yang dapat ditambahkan di blok CMS mana pun di Magento 2.

Oleh karena itu, mereka memungkinkan pengembang Magento 2 dan administrator toko untuk menambahkan antarmuka dan fitur interaktif di front-end tanpa harus tahu banyak tentang pemrograman. Tentu saja, mereka masih perlu mengetahui jalan di sekitar Magento untuk membuat widget.

Tujuan artikel ini adalah untuk mendemonstrasikan cara membuat widget di Magento 2, dengan penekanan pada widget khusus.

Widget Magento 2

Magento 2 adalah versi terbaru dari Magento, salah satu platform eCommerce terkemuka saat ini. Widget memainkan peran penting dalam Magento 2, terutama dari sudut pandang fungsionalitas. Selain menawarkan lebih banyak fungsionalitas sisi pengguna, widget Magento membantu administrator menambahkan konten statis atau dinamis ke halaman dan blok CMS.

Tapi, dari perspektif teknis…Apa itu widget Magento?

Widget Magento 2 pada dasarnya adalah ekstensi Magento yang dirancang dengan serangkaian opsi konfigurasi lanjutan. Karena fleksibilitas dan kontrol yang lebih besar, mereka digunakan untuk menyediakan informasi dan konten pemasaran melalui panel Administrator Magento. Salah satu kelebihan widget Magento 2 adalah Anda dapat "memanggil" mereka dari mana saja di situs.

Widget juga memungkinkan administrator untuk menambahkan antarmuka dan fitur interaktif di front-end Magento, tanpa harus membuat kode (sebenarnya, bahkan tanpa mengetahui cara membuat kode).

Magento 2 Menawarkan Beberapa Jenis Widget

Sebelum kita beralih ke implementasi, mari kita lihat lebih dekat kisaran standar widget yang didukung di Magento 2:

  • Produk yang Baru Dibandingkan — Anda pasti pernah melihat widget ini saat menelusuri produk di situs e-commerce favorit Anda. Widget ini digunakan untuk menampilkan produk yang baru dilihat atau dibandingkan di sidebar halaman katalog. Mereka mungkin juga muncul di toko Anda tergantung pada temanya. Salah satu poin penting adalah jumlah produk yang terdaftar di setiap blok dapat dikonfigurasi.
  • Pesanan dan Pengembalian — Setiap kali Anda berbelanja produk secara online, ada widget yang harus dimiliki yang menyediakan akses cepat ke pesanan dan pengembalian. Jika pengguna ingin meninjau produk yang dipesan atau dikembalikan, mereka dapat mengisi detail yang diperlukan seperti ID Pesanan, Penagihan Tanggal Terakhir, Temukan Pesanan, Email, dll.
  • Daftar Produk Katalog — Ini adalah widget lain yang banyak digunakan; semua orang akrab dengan bagian "produk unggulan" di situs eCommerce, karena hampir setiap situs memilikinya. Produk unggulan biasanya ditempatkan di halaman beranda untuk tujuan promosi produk. Produk tertentu ditampilkan dengan detail singkat seperti harga, fitur, dan opsi seperti tambahkan ke troli, tambahkan ke daftar keinginan, dan tambahkan ke fitur perbandingan.
  • Tautan Produk Katalog — Tujuan utama widget Tautan Produk Katalog adalah untuk memungkinkan admin mengelola tautan untuk produk, termasuk produk terkait, penjualan silang, peningkatan penjualan, dan produk yang dikelompokkan. Saat Anda mengunjungi halaman tautan produk katalog, Anda akan melihat berbagai kategori katalog yang diawali dengan pengenalan. Di sana, Anda akan menemukan tautan produk katalog dengan berbagai sub-tautan, seperti penetapan tautan produk katalog, atribut tautan produk katalog, penghapusan tautan produk katalog, jenis tautan produk katalog, dan banyak lagi.
  • Tautan Kategori Katalog — Di situs web eCommerce, terutama yang berbasis produk, Anda tidak akan menemukan kekurangan widget tautan kategori katalog.
  • Widget Blok Kustom — Anda dapat menggabungkan blok, widget, dan halaman kustom untuk menampilkan bagian katalog atau informasi lain yang mungkin berguna bagi pelanggan.

Ini dapat digunakan untuk meningkatkan pengalaman pengguna dan menambahkan fungsionalitas ke toko. Blok dan widget adalah elemen penting dari sebagian besar situs web eCommerce. Mereka memungkinkan pengguna untuk membuat dan mengontrol konten dengan cepat, dan dapat digunakan untuk melakukan hal-hal seperti:

  • Tambahkan blok dinamis/informasi di bilah sisi
  • Tambahkan spanduk di halaman CMS
  • Tambahkan menu khusus
  • Tambahkan antarmuka pengguna interaktif

Kasus untuk Widget Kustom Magento 2

Situs web atau halaman web apa pun membutuhkan banyak fungsi untuk berjalan dengan lancar dan untuk melibatkan lebih banyak pengunjung, dan menciptakan pengalaman pengguna yang menarik adalah suatu keharusan di eCommerce. Di situlah widget Magento 2 khusus berperan, dan itulah yang seharusnya mereka lakukan.

Widget adalah kumpulan kode yang lebih kecil yang dapat kita tambahkan ke toko. Menggunakan tautan sederhana ke kode dinamis, widget dapat menampilkan semua jenis data berguna yang disesuaikan untuk membantu pengunjung dan meningkatkan pengalaman mereka. Kemampuan untuk meningkatkan interaksi menggunakan widget yang dapat digunakan kembali dengan biaya rendah jelas sangat berarti, tetapi terkadang ini bukan hanya masalah memilih dan menambahkan widget yang siap pakai.

Menggunakan fungsionalitas Widget Kustom di Magento 2 memungkinkan kita untuk membuat template widget kita sendiri. Widget khusus terkadang dapat menawarkan cara yang lebih baik untuk mengedit atau menambahkan konten berkualitas di dalam blok atau halaman CMS.

Namun, sebelum kita beralih ke widget khusus, kita perlu memeriksa kasus penggunaan standar untuk widget di Magento 2. Mari kita lihat sesuatu yang mendasar dan banyak digunakan, misalnya:

Cara Menambahkan Daftar Produk Baru ke Beranda Menggunakan Widget

Widget sederhana ini memungkinkan kita untuk menambahkan daftar produk baru di mana pun diperlukan di situs web, dan ada berbagai cara untuk mendaftarkan produk baru di Magento 2.

Untuk menambahkan daftar produk Magento ke halaman beranda, Anda hanya perlu mengikuti proses sederhana:

  • Masuk ke halaman admin Magento 2 dan buka Konten > Widget

Gambar Konten > Pohon menu widget

  • Klik tombol Tambah Widget . Setelah itu, kita akan diarahkan ke tab Pengaturan , di mana kita harus memilih opsi dan tema Jenis dan Desain .

  • Kita dapat melihat screenshot di bawah ini, di mana kita telah memilih Daftar Katalog Produk Baru yang akan kita tampilkan di front-end.

Gambar pilihan Daftar Produk Baru Magento di menu Jenis

  • Kami memilih LUMA sebagai opsi Tema Desain.

Gambar pemilihan theme Magento Luma di menu Design Theme

  • Setelah memilih kedua nilai, kita harus melanjutkan ke langkah kedua, di mana kita harus mengisi properti etalase. Sekarang kita harus mengatur Judul Widget dan Properti Toko , seperti Judul Widget dan Tampilan Toko . Kami menggunakan Daftar Produk Baru Toptal dan Semua Tampilan Toko .

Gambar tab Magento Storefront Properties

  • Bagian terpenting adalah bagian Pembaruan Tata Letak , yang akan memberi tahu kita di mana widget ini akan muncul (misalnya, halaman beranda, halaman daftar, halaman checkout, dll.). Anda juga dapat menentukan area tempat wadah akan muncul—misalnya, di bawah header, di atas footer, footer, dll.

Pengaturan Pembaruan Tata Letak memberi Anda opsi berikut:

  • Tampilan Aktif: Halaman Tertentu atau Semua halaman.
  • Halaman: Halaman Beranda CMS
  • Wadah: Area Konten Utama
  • Template: Di sini, Anda dapat memilih gaya mana yang Anda inginkan untuk menampilkan produk baru Mode kisi atau mode Daftar

Gambar tab Pembaruan Tata Letak di Magento 2

Setelah kami memilih opsi Halaman yang Ditentukan , kami dapat melanjutkan untuk mengatur properti, memungkinkan kami untuk menampilkan widget pada halaman tertentu. Di sini kita memiliki Page dropdown, yang memungkinkan kita untuk memilih CMS Home Page . Selanjutnya, kita perlu memilih wadah dan template yang akan kita gunakan untuk menampilkan widget di bagian tertentu.

Akhirnya, kami pindah ke tab terakhir, yang mencakup opsi widget. Di sini kita bisa mengatur Condition , seperti apa jenis produk yang akan ditampilkan, atau mencantumkan batasan jumlah produk dan sebagainya.

Jika kami memilih Semua Produk , maka produk yang paling baru ditambahkan akan ditampilkan di bagian ini. Jika kami memilih Produk Baru , maka hanya produk yang kami tandai sebagai "Baru" yang akan ditampilkan di bagian ini. Jika kami ingin membiarkan pelanggan kami mengontrol navigasi untuk beberapa daftar, kami perlu mengatur Kontrol Halaman Tampilan ke "Ya." Jika kita telah memilih “Ya”, maka perlu memasukkan jumlah produk ke dalam daftar.

Di Number of Products to Display , kita bisa menentukan berapa banyak produk yang bisa ditampilkan di bagian New Products . Juga, kami dapat mengubah pengaturan Cache Lifetime jika perlu.

Sekarang kita harus menyimpan widget ini dan membersihkan cache Magento 2. Ini dapat dilakukan dari admin atau baris perintah. Kita dapat menggunakan perintah berikut untuk membersihkan cache:

php bin/magento cache:clean and php bin/magento cache:flush

Bagian Opsi Widget yang digunakan untuk mengatur parameter Widget Magento 2

Kemudian kita akan dapat melihat produk baru di halaman rumah.

Tampilan Produk Baru Magento 2, hasil dari pilihan gambar sebelumnya

Cara Membuat Widget Kustom di Magento 2

Sekarang, kita akan belajar cara membuat widget khusus untuk Magento 2. Widget khusus menawarkan cara terbaik untuk menambahkan dan mengedit konten di dalam blok atau halaman CMS, karena dapat disesuaikan dengan kebutuhan Anda.

CSS kustom dan modul kustom Magento 2 menawarkan berbagai kemungkinan

Mari kita mulai dengan dasar-dasarnya. Kita semua tahu cara membuat modul, bukan? Untuk berjaga-jaga jika Anda tidak terbiasa dengan pembuatan modul khusus di Magento 2, kami memiliki tutorial hebat yang mencakup proses secara mendalam.

Sekarang, mari kita beralih ke proses langkah demi langkah untuk membuat widget khusus di Magento 2.

Pertama, kita perlu membuat modul baru yang akan membutuhkan namespace dan folder modul. Untuk contoh ini, kita akan menggunakan Toptal untuk namespace dan CustomWidget untuk nama modul. Jadi, mari kita mulai seperti biasa dengan composer.json , registration.php , dan etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

File ini akan dimuat oleh Composer setiap kali kita menjalankannya, meskipun sebenarnya kita tidak menggunakan Composer dengan modul kita.

Sekarang kita perlu mendaftarkan modul kita dengan Magento, jadi kita diminta untuk membuat register.php di lokasi berikut: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

Sekarang, kita akan membuat file registrasi terakhir, module.xml .

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

Setelah menyelesaikan langkah registrasi, selanjutnya kita membuat file konfigurasi widget.xml .

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

Dalam kode di atas, kita mendapatkan Title dan Content sebagai parameter untuk ditampilkan di mana pun widget dipanggil. Tag <widget> berisi kelas blok Toptal\CustomWidget\Block\Widget\Samplewidget . Kelas ini diperlambat dalam Block/Widget/Samplewidget.php . Kelas menginstruksikan widget kita tentang template mana yang akan digunakan.

Widget Sampel Toptal dipilih di menu Jenis Magento 2

Cuplikan kode berikutnya menunjukkan cara menentukan blok untuk widget; kami akan mengatur template kami di sini. Mari kita lihat bagaimana tampilannya.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget dideklarasikan di atas kode. Dalam file ini, kami menetapkan file template khusus di dalam variabel $_template .

Selanjutnya, kita akan melihat apa yang berisi template widget kita.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Di sini, kita dapat melihat cara mengambil nilai dari parameter widget. Itu mudah:

$this->getData('widgettitle');

dan

$this->getData('widgetcontent');

Apa hasil akhir kita? Mari saya tunjukkan seperti apa di Magento Admin:

Parameter Widget Magento 2, seperti yang terlihat di Admin Magento 2

Input Judul Kustom Toptal dan Konten Kustom Toptal di Opsi Widget Magento 2

Sekarang kita harus menyimpan widget ini dan membersihkan cache. Seperti yang dijelaskan sebelumnya, ini dapat dilakukan dari admin atau baris perintah, menggunakan php bin/magento cache:clean dan php bin/magento cache:flush

Gambar halaman beranda Toptal dengan judul dan konten khusus di Magento 2

Anda dapat mengunduh modul sederhana ini di sini. Ini jelas bukan template widget Magento 2 yang lengkap, tetapi masih merupakan alat bantu pembelajaran. Jika Anda membutuhkan lebih banyak sumber daya, atau jika Anda relatif baru di Magento, dokumentasi resmi Magento 2 adalah tempat yang jelas untuk memulai.

Terakhir, saya ingin menyebutkan beberapa blog pengembangan pribadi yang menurut saya cukup berguna. Alan Storm mungkin memiliki konten yang paling mendidik dalam hal mempelajari Magento, dan saya pikir Anda juga harus memeriksa blog Alan Kent.

Widget: Bagian Penting dari Gambaran Besar

Tujuan artikel ini adalah untuk memberikan panduan pembuatan widget di Magento 2, dimulai dengan tutorial langkah demi langkah dasar yang mencakup pengembangan widget Magento 2 dan pembuatan widget kustom. Saya jelas penggemar yang terakhir, karena solusi khusus cenderung memberikan lebih banyak fleksibilitas dan fungsionalitas.

Widget Magento menyediakan fungsionalitas front-end yang penting, jadi tidak berlebihan untuk mengatakan bahwa widget khusus yang cerdas dapat membantu membawa proyek Magento Anda berikutnya ke tingkat berikutnya. Memungkinkan kami untuk menerapkan lebih banyak fungsi, menambahkan berbagai jenis item ke halaman beranda menggunakan widget yang berbeda, dan pada akhirnya, mereka hanya memberi pengembang lebih banyak kebebasan berkreasi.

Widget khusus, formulir web Magento 2, dan formulir kontak dapat meningkatkan pengalaman pengguna dan meningkatkan konversi

Tapi ini bukan hanya masalah meningkatkan pengalaman dan konversi pengguna, atau membuat desain yang tampak mengagumkan. Semua jelas merupakan prioritas untuk klien mana pun, tetapi ada keuntungan yang lebih kecil dan kurang jelas. Misalnya, widget Magento dapat menghemat banyak waktu dan sakit kepala di sisi admin juga, dan setiap klien juga ingin menghemat jam kerja.

Namun, itu di luar cakupan artikel ini. Maksud saya adalah untuk memberikan gambaran teknis singkat, tutorial widget Magento 2 yang mudah diikuti, bukan untuk membahas ROI dan pemasaran.