Magento Yönetiminde Yükleme Resmi Alanını Sayfa Oluşturucu Alanıyla Değiştirmek

İçindekiler

  1. Giriş
  2. Magento'nun Kategori Resim Alanının Sınırlılığı
  3. Özel Modülünüzü Kurulum Yapma
  4. Orijinal Resim Yükleyicisini Kaldırma
  5. İçeriğin Doğru Kaydedildiğinden Emin Olma
  6. Sonuç
  7. SSS
Shopify - App image

Giriş

Magento'nun sınırlı resim alanı seçenekleri sizi sınırladığı durumlarda, özellikle kategori görünümlerinde masaüstü ve mobil için farklı resimlere ihtiyaç duyduğunuzda Magento kullanıcıları özel tasarım gereksinimlerini karşılamak için platformun yeteneklerini uyarlamak zorundalar. Bu blog yazısında Magento yönetiminde bir sayfa oluşturucu alanıyla yükleme resim alanını nasıl değiştireceğinizi adım adım anlatacağız. Bu kılavuz, Magento mağazanızda özelleştirme konusunda size rehberlik ederek, çeşitli cihazlarda kullanıcılara daha iyi bir deneyim sunmanıza olanak tanıyan yeni bir özelleştirme düzeyi eklemenize yardımcı olacaktır.

Odak noktamız:

  • Magento'nun mevcut kategori resim seçeneklerinin sınırlamalarını anlama
  • Yeni özellikleri uygulamak için özel bir modülün kurulumu
  • İstemediğiniz öğeleri kaldırma ve doğru işlevselliği sağlama

Bu makaleyi okuduktan sonra, kategorilerdeki resim yönetiminde daha fazla esnekliğe sahip olacak ve çoklu cihazda kullanıcılara daha iyi bir deneyim sunabileceksiniz.

Magento'nun Kategori Resim Alanının Sınırlılığı

Mevcut Durum

Magento 2'nin varsayılan yapısı, kategori resimleri için yalnızca bir resim yüklenebileceği ve bu resmin tüm ekran boyutlarında kullanıldığı bir yapı sunar. Bu sınırlama, özellikle duyarlı web tasarımı için sorun yaratabilir, çünkü masaüstü için optimize edilen resimler mobil cihazlarda iyi görünmeyebilir ve tam tersi durum da geçerlidir.

İstenilen Çözüm

Bunu aşmak için, mobil cihazlar için özel olarak ikinci bir resim yükleme alanı eklemeyi veya doğrudan HTML girişine izin veren bir sayfa oluşturucu alanı sağlamayı amaçlıyoruz. Bu yaklaşım, kullanılan cihaza bağlı olarak resimlerin veya diğer içeriklerin özelleştirilmesini mümkün kılarak daha rafine bir kullanıcı deneyimi sunar.

Özel Modülünüzü Kurulum Yapma

İlk Kurulum

Bir Magento özel modülü kurmak için aşağıdaki adımları izleyin:

  1. Modül Dizin Yapısını Oluşturma:

    app/code/YourVendor/YourModule

  2. Modül XML Yapılandırması: Create the module.xml file in app/code/YourVendor/YourModule/etc:

    <?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="YourVendor_YourModule" setup_version="1.0.0"/>
</config>

  3. Kayıt Dosyası: Create registration.php in YourVendor/YourModule:

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

Sayfa Oluşturucu Elemanını Uygulama

Basit bir resim yükleme alanı yerine bir sayfa oluşturucu alanı eklemek için aşağıdaki adımları izleyin:

  1. category_form.xmlyi Düzenle:

    Kendi modülünüz içindeki category_form.xml dosyasını düzenlememiz gerekiyor. Bu dosya aşağıdaki yolda bulunur:

    app/code/YourVendor/YourModule/view/adminhtml/ui_component/category_form.xml

    Page Builder'i kullanan örnek bir dosya yapısı aşağıda gösterilmiştir:

    <?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
    <object name="category_form">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
                <item name="deps" xsi:type="string">category_form.category_form_data_source</item>
                <!-- Add other configurations here -->
            </item>
        </argument>
        <dataSource name="category_form_data_source">
            <argument name="dataProvider" xsi:type="configurableObject">
                <argument name="class" xsi:type="string">Magento\Catalog\Model\Category\DataProvider</argument>
                <argument name="name" xsi:type="string">category_form_data_source</argument>
                <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
                <argument name="requestFieldName" xsi:type="string">id</argument>
            </argument>
        </dataSource>
        <fieldset name="general">
            <field name="Description">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">Description</item>
                        <item name="formElement" xsi:type="string">wysiwyg</item>
                        <item name="wysiwygConfigData" xsi:type="array">
                            <item name="height" xsi:type="string">300px</item>
                        </item>
                    </item>
                </argument>
            </field>
        </fieldset>
    </object>
</form>

Bu XML yapılandırmasında, basit resim yükleme alanını, Sayfa Oluşturucu tarafından desteklenen WYSIWYG (Ne Görüyorsan Onu Al) düzenleyiciyle değiştirdik. Bu alan şimdi ayrı masaüstü ve mobil görünümler için resim etiketleri de dahil olmak üzere HTML içeriğini kabul edebilir.

Orijinal Resim Yükleyicisini Kaldırma

Artık Page Builder öğemizi aldığımıza göre, bir sonraki adım hala mevcut olan orijinal resim yükleyicisini kaldırmaktır. Bunu başarmak için:

  1. category_form.xml dosyasını açın.
  2. Orijinal resim yükleyicisine karşılık gelen alanı bulun.
  3. O bölümü kaldırın veya yorum satırına alın..

İşte XML dosyanızı nasıl güncelleyebileceğiniz:

<field name="image">
    <!-- Bu bölümü kaldır veya yorum satırına al -->
    <argument name="data">
        <!-- Yükleyici için diğer yapılandırmalar -->
    </argument>
</field>

Bu bölümü yorum satırına alarak veya kaldırarak, kullanılmayan resim yükleyicisinin artık yönetici panelinde görüntülenmediğini sağlarız.

İçeriğin Doğru Kaydedildiğinden Emin Olma

Sayfa Oluşturucuyu ayarladıktan sonra, son adım bu alan aracılığıyla eklenen içeriğin doğru bir şekilde kaydedildiğinden emin olmaktır. Aşağıdaki adımları izleyin:

  1. Veritabanı Şeması: Yeni verileri işleyebilecek şekilde veritabanı şemasının güncellenmesini sağlayın. Modülünüzdeki etc/db_schema.xml dosyasını değiştirin:
    2. <table name="catalog_category_entity">
    <column name="custom_html" xsi:type="text" nullable="true" comment="Sayfa Oluşturucu için Özel HTML"/>
</table>
  2. Modelde Veri İşleme: Modelinizdeki veri işleme mantığının doğru bir şekilde güncellendiğinden emin olun. Modül yapınıza bağlı olarak, belirli Magento modellerini değiştirmeniz veya genişletmeniz gerekebilir.
  3. Doğrulama ve Test: Yeni yapılandırmanızı tamamen test ederek, Sayfa Oluşturucu alanına girilen tüm verilerin doğru bir şekilde kaydedildiğini ve masaüstü ve mobil görünümlerde beklenildiği gibi görüntülendiğini sağlayın.

Sonuç

Magento'nun varsayılan yeteneklerini geliştirmek karmaşık görünebilir, ancak net bir adım adım süreçle yönetilebilir hale gelir. Standart resim yükleme alanını çok yönlü bir Sayfa Oluşturucu alanıyla değiştirerek, görüntüleme cihazına göre özelleştirilmiş içerik ekleyebilirsiniz. Bu, sadece ön uç kullanıcı deneyimini geliştirmekle kalmaz, aynı zamanda daha üstün bir yönetici arabirimi sunar.

Magento özelleştirmelerinizle deneyler yapın ve sağlam bir arka uç yönetimiyle dinamik bir ön uç görüntüsünü birleştirerek sunulan geniş olasılıklardan yararlanın. Bu kılavuz temel bir yapı sağlamayı amaçladı, şimdi sıra sizde, üzerine inşa edip tamamen duyarlı bir e-ticaret web sitesi oluşturmak için.

SSS

S: İhtiyaç halinde tek resim yükleme alanına geri dönebilir miyim? A: Evet, Sayfa Oluşturucu bölümünü yorum satırına alarak veya kaldırarak ve category_form.xml'de orijinal resim yükleme alanını ilave etmek veya yorum satırlarını kaldırmak yeterli olacaktır.

S: İki resim alanından fazlasını eklemek mümkün müdür? A: Kesinlikle. Burada açıklanan prensibi genişletebilir ve gereksinimlerinize bağlı olarak ek resim alanları veya diğer içerik alanları ekleyebilirsiniz.

S: Magento güncellemem bu değişiklikleri etkiler mi? A: Özel modüller mümkün olan en güncellemeye karşı güncelleme geçirmez şekilde tasarlanmalıdır. Bununla birlikte, uyumluluğu sağlamak için her güncelleme sonrası özel değişiklikleri kapsamlı bir şekilde test etmek her zaman iyi bir fikirdir.