Magento'da Ürün Sayfası Düzeni Nasıl Özelleştirilir

Yayınlanan: 2021-08-16

İçindekiler

Bildiğiniz gibi, her ürün, benzersiz özelliklerine göre belirli bir sayfa düzeni gerektirir. Yani buradaki şey , kategori düzenini değiştirmeden bir kategori altındaki birkaç ürün için belirli bir ürün sayfası düzenini özelleştirmek .

Bunu yapmak için temel bilgileri gözden geçirmemiz gerekecek ve yalnızca oradan ürün sayfası düzenini düzen dosyalarıyla özelleştirmeyi öğreneceğiz.

Düzen dosyaları hakkında

Magento'da düzen dosyaları, belirli bir sayfanın yapısını tanımlamak için kullanılan .XML dosyalarıdır. Düzen dosyaları şu şekilde sınıflandırılır:

  • Temel düzenler : modüller tarafından sağlanan düzen dosyaları
Tip Konum
Sayfa yapılandırması ve genel düzen dosyaları <module_dir>/görünüm/ön uç/düzen
Sayfa düzeni dosyaları <module_dir>/view/frontend/page_layout
  • Tema düzenleri : temalar tarafından sağlanan düzen dosyaları
Tip Konum
Sayfa yapılandırması ve genel düzen dosyaları <theme_dir>/<Ad alanı>_<Modül>/düzen
Sayfa düzeni dosyaları <theme_dir>/<Ad alanı>_<Module>/page_layout

Ürün sayfası düzeni nasıl özelleştirilir

Belirli bir sayfanın düzenini özelleştirmek için, o sayfanın düzen dosyasını özel bir sayfayla geçersiz kılmanız gerekir. Bunu yapmak için temanızın ürün sayfasının düzen dosyalarını bulmanız gerekir.

Tüm ürün türleri için ürün sayfası düzenini özelleştirin

Magento 2 Önceki/Sonraki Ürün Sayfası

Magento 2 Önceki Sonraki Ürün Sayfası, müşterilerin tek bir tıklamayla ürün sayfalarında sorunsuz bir şekilde gezinmesine olanak tanıyan optimize edilmiş bir özelliktir. Bu özellik, mağazanızın kullanılabilirliğini artırır ve müşterileriniz için sorunsuz ve keyifli bir gezinme deneyimi sağlar.

Tüm ürün türleriniz için ürün sayfası düzenini özelleştirmek isterseniz ne olur?

Bu kolay kısımdır, çünkü değişikliğin tüm ürün türlerinize yansıtılması için yalnızca ortak düzen dosyasında, yani katalog_ürün_görünümü.xml'de (/theme_dir/Magento_Catalog/layout/ içinde bulunur) değişiklik yapmanız gerekir.

Kapsayıcıları kullanarak düzendeki içeriği yapılandırın

Ürün sayfalarınızın düzeni, başvurulabilecek veya içine daha fazla blok eklenmiş kaplar kullanılarak yapılandırılmıştır.

Örnek : 

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

Ürün sayfası düzeninde kullanılan yaygın kapsayıcılar şunlardır:

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

Belirli bir ürün için ürün sayfası düzenini özelleştirme

Belirli bir ürün için ürün sayfanızın düzenini özelleştirmenin iki yolu vardır, her ikisi de dosyaları belirli bir /layout/ klasörüne yerleştirmeyi içerir.

Yöntem 1 : Özel bir düzen güncellemesi oluşturun

Magento 2.3.4 ile başlayarak, Magento Yönetici Panelindeki Düzen Güncelleme XML alanı artık bir seçiciye dönüştürülmüştür, bu da artık bu alana özgürce kod ekleyemeyeceğiniz anlamına gelir.

tasarım sayfası düzeni
Ürün sayfaları için özel düzen güncellemesi artık bir seçiciye dönüştürülüyor

Ürün sayfalarınız için özel düzen güncellemeleri uygulamak için, belirli bir klasöre ( app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/ ) bir .XML dosyası koymanız gerekir. Bu .XML dosyasındaki düzen güncellemesi, seçilebilir bir seçenek olarak Özel Düzen Güncellemesi altında görünecektir.

Özel düzen güncelleme dosya adları için kural

Özel düzen güncelleme dosya adlarınızın aşağıdaki kurala uyması gerekir:

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

nerede:

  • <Product_SKU> : özel düzen güncellemesi uygulamak istediğiniz ürünün SKU'su
  • <Name for Layout Update> : Özel Yerleşim Güncelleme seçicisinde gösterilecek olan bu yerleşimin adıdır.

Örneğin, bu SKU için yeni bir özel düzen güncellemesi uygulamak istiyorsak: MH05. catalog_product_view_selectable_ MH05_test.xml adlı özel bir düzen dosyasını /theme_dir/Magento_Catalog/layout/ içine aşağıdaki gibi içerikle koymamız gerekecek:

MH05 dosyası
 <?xml version="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">
    <body>
        <move element="page.main.title" target="product.info.main" before="-"/>
        <move element="product.info.stock.sku" target="product.info.price" after="product.price.final"/>
        <move element="product.info.review" target="product.info.main" before="product.info.price"/>
		<referenceContainer name="page.wrapper">
             <referenceBlock name="ekmek kırıntıları" remove="true"/>
         </referenceContainer>
    </body>
</sayfa>

Bu test düzeninin yapacağı şey, Ürün SKU'su MH05'in ürün sayfasından içerik kırıntılarını kaldırmasıdır .

Ardından, Katalog > Ürünler 'de SKU MH05'e sahip ürünü seçin. Artık test adında özel bir düzen güncellemesi görebilmeniz gerekir:

tasarım test dosyası

Bu yeni özel düzen güncellemesini seçin ve değişiklikleri kaydedin .

Şimdi aşağıdakileri kullanarak önbelleğinizi temizleyin: 

 php bin/magento önbelleği:flush

Ve değişiklikler artık ön yüzünüze yansıtılmalıdır.

ekmek kırıntısı yok
İçerik haritalarını kaldırmak için özel bir düzen güncellemesine sahip ürünümüz (SKU MH05)

Yöntem 2 : Düzeni geçersiz kılma

addPageLayoutHandles yöntemiyle, aşağıdakileri kullanarak düzeni geçersiz kılabilirsiniz:

  • ürün kimliği
  • Ürün SKU'su
  • Ürün tipi

Örneğin, kimliği 68 olan bir ürün için ürün sayfası düzenini özelleştirmek istiyorsanız, düzen dosyasının adının aşağıdaki biçime uyması gerekir:

catalog_product_view_id_number.xml

ör., catalog_product_view_id_68

Ve dosyanın aşağıdaki bölümde olması gerekecek:

/theme_dir/Magento_Catalog/layout/

düzen kimliği 68
Belirli ürün kimliği/SKU/türü için ürün sayfası düzenini özelleştirin

Sistemin mesajını izleyerek önbelleği temizleyin. Değilse, belirli ürün için yeni özelleştirilmiş sayfa düzenini kontrol etmek için ön uca gidebilirsiniz.

Ürün türü için de aynı adımları takip ederek dosya adını buna göre değiştirebilirsiniz. Örneğin, paket ürünler için yeni sayfa düzenini uygulamak için catalog_product_view_type_bundle.xml kullanın.

Güzel öğeleriniz için yeni sayfa düzeninizi beğeneceğinizi umuyoruz!

İlgili Mesajlar:
Magento 2'de Ödeme İşlemi Nasıl Özelleştirilir
Magento E-posta Şablonlarınızı nasıl özelleştirebilirsiniz?