Cara Menyesuaikan Tata Letak Halaman Produk di Magento

Seperti yang Anda ketahui, setiap produk memerlukan tata letak halaman tertentu berdasarkan fitur uniknya. Jadi masalahnya di sini adalah menyesuaikan tata letak halaman produk tertentu untuk beberapa produk di bawah kategori tanpa mengubah tata letak kategori .

Untuk melakukan itu, kita harus melalui dasar-dasarnya, dan hanya dari sana, kita akan belajar menyesuaikan tata letak halaman produk dengan file tata letak.

Tentang file tata letak

Di Magento, file tata letak adalah file .XML yang digunakan untuk menentukan struktur halaman tertentu. File tata letak diklasifikasikan menjadi:

• Tata letak dasar : file tata letak yang disediakan oleh modul

• Tata letak tema : file tata letak yang disediakan oleh tema

Cara menyesuaikan tata letak halaman produk

Untuk menyesuaikan tata letak halaman tertentu, Anda harus mengganti file tata letak halaman itu dengan yang khusus. Untuk melakukannya, Anda harus mencari file tata letak untuk halaman produk tema Anda.

Sesuaikan tata letak halaman produk untuk semua jenis produk

Magento 2 Halaman Produk Sebelumnya/Berikutnya

Magento 2 Previous Next Product Page adalah fitur yang dioptimalkan yang memungkinkan pelanggan menavigasi halaman produk dengan satu klik dengan mulus. Fitur ini meningkatkan kegunaan toko Anda dan mempertahankan pengalaman menjelajah yang lancar dan menyenangkan bagi pelanggan Anda.

Bagaimana jika Anda ingin menyesuaikan tata letak halaman produk untuk semua jenis produk Anda?

Ini adalah bagian yang mudah, karena Anda hanya perlu membuat perubahan pada file tata letak umum yaitu, catalog_product_view.xml (terletak di /theme_dir/Magento_Catalog/layout/) agar perubahan tersebut tercermin pada semua jenis produk Anda.

Susun konten dalam tata letak menggunakan wadah

Tata letak halaman produk Anda disusun menggunakan wadah , yang dapat direferensikan atau memiliki lebih banyak blok yang ditambahkan ke dalamnya.

Contoh :

 <move element="product.info.social" destination="product.info.main" before="product.info.price"/>

Berikut adalah wadah umum yang digunakan dalam tata letak halaman produk:

• product.info.main
• product.info.price
• product.info.stock.sku
• product.info.form.content
• product.info.extrahint
• product.info.social
• product.info.media

Sesuaikan tata letak halaman produk untuk produk tertentu

Ada dua cara Anda dapat menyesuaikan tata letak halaman produk Anda untuk produk tertentu, keduanya melibatkan penempatan file di folder /layout/ yang ditentukan.

Metode 1 : Buat pembaruan tata letak khusus

Dimulai dengan Magento 2.3.4, bidang XML Pembaruan Tata Letak di Panel Admin Magento sekarang diubah menjadi pemilih, yang berarti Anda tidak lagi dapat dengan bebas menambahkan kode ke bidang ini lagi.

Untuk menerapkan pembaruan tata letak khusus untuk halaman produk Anda, Anda harus meletakkan file .XML di folder tertentu ( app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/ ). Pembaruan tata letak dari file .XML itu kemudian akan muncul di bawah Pembaruan Tata Letak Kustom sebagai opsi yang dapat dipilih.

Aturan untuk nama file pembaruan tata letak khusus

Nama file pembaruan tata letak khusus Anda harus mematuhi aturan berikut:

catalog_product_view_selectable_<Product SKU>_<Name for Layout Update>.xml

di mana:

• <Product_SKU> : adalah SKU produk yang ingin Anda terapkan pembaruan tata letak khusus
• <Name for Layout Update> : adalah nama tata letak ini yang akan ditampilkan di pemilih Pembaruan Tata Letak Khusus

Misalnya, jika kita ingin menerapkan pembaruan tata letak kustom baru untuk SKU ini: MH05. Kita harus meletakkan file tata letak khusus bernama catalog_product_view_selectable_ MH05_test.xml di /theme_dir/Magento_Catalog/layout/ , dengan konten seperti di bawah ini:

 <?xml versi="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <tubuh>
        <move element="page.main.title" destination="product.info.main" before="-"/>
        <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
        <move element="product.info.review" destination="product.info.main" before="product.info.price"/>
		<referenceContainer name="page.wrapper">
             <referenceBlock name="breadcrumbs" remove="true"/>
         </referenceContainer>
    </tubuh>
</halaman>

Apa yang akan dilakukan oleh tata letak pengujian ini adalah menghapus remah roti dari halaman produk Produk SKU MH05.

Selanjutnya pada Catalog > Products , pilih produk dengan SKU MH05. Anda sekarang seharusnya dapat melihat pembaruan tata letak khusus bernama test :

Pilih pembaruan tata letak khusus baru ini dan Simpan perubahan.

Sekarang bersihkan cache Anda menggunakan:

 php bin/cache magento: flush

Dan perubahan sekarang harus tercermin di frontend Anda.

Metode 2 : Mengganti tata letak

Dengan metode addPageLayoutHandles, Anda dapat mengganti tata letak menggunakan:

• ID Produk
• SKU produk
• Tipe produk

Misalnya, jika Anda ingin menyesuaikan tata letak halaman produk untuk produk dengan ID 68, nama file tata letak harus mengikuti format berikut:

catalog_product_view_id_number.xml

misalnya, catalog_product_view_id_68

Dan file harus berada di bagian berikut:

/theme_dir/Magento_Catalog/layout/

Kosongkan cache mengikuti pesan sistem. Jika tidak, Anda dapat pergi ke frontend untuk melihat tata letak halaman baru yang disesuaikan untuk produk tertentu.

Untuk jenis produk, Anda dapat mengikuti langkah yang sama dan mengubah nama file yang sesuai. Misalnya, gunakan catalog_product_view_type_bundle.xml untuk menerapkan tata letak halaman baru untuk produk yang dibundel.

Semoga Anda menikmati tata letak halaman baru Anda untuk barang-barang indah Anda!

Pos terkait:
Cara Menyesuaikan Proses Checkout di Magento 2
Cara menyesuaikan Template Email Magento Anda