Magento管理画面でページビルダーエリアを使用してアップロード画像フィールドを置き換える方法

目次

  1. はじめに
  2. Magentoのカテゴリー画像フィールドの制限
  3. カスタムモジュールのセットアップ
  4. 元の画像アップローダーの削除
  5. コンテンツが正しく保存されているか確認する
  6. 結論
  7. よくある質問

はじめに

カテゴリーごとにデスクトップとモバイルのビューで異なる画像が必要な場合、Magentoの制約された画像フィールドオプションが制限的に感じることはありませんか？多くのMagentoユーザーは、プラットフォームの機能を特定のデザイン要件に合わせるという課題に直面しています。このブログ記事では、Magento管理画面でアップロード画像フィールドをPage Builderエリアで置き換える手順をご紹介します。このステップバイステップガイドは、Magentoストアのカスタマイズ性を向上させ、さまざまなデバイスでのユーザーエクスペリエンスを向上させるための知識を提供することを目的としています。

以下に焦点を当てます：

  • Magentoのカテゴリー画像オプションの現在の制約の理解
  • 新しい機能を実装するためのカスタムモジュールのセットアップ
  • 不要な要素の削除と正しい機能の確認

この記事の最後までお読みいただくと、カテゴリー画像の管理においてより柔軟性のあるマジェントー管理画面を利用するための知識を身につけることができます。

Magentoのカテゴリー画像フィールドの制限

現在の状況

Magento 2のデフォルトセットアップでは、カテゴリー画像のために1つの画像アップロードのみが許可され、すべての画面サイズに適用されます。この制限は、レスポンシブウェブデザインに特に問題があり、デスクトップ用に最適化された画像がモバイルデバイス上では見栄えがしない場合やその逆の場合があるためです。

希望の解決策

これを解決するために、モバイルデバイス専用の第2の画像アップロードフィールドを導入したり、直接HTML入力ができるPage Builderエリアを提供することを目指します。この方法により、デバイスに基づいて画像やその他のコンテンツをカスタマイズできるようになり、より洗練されたユーザーエクスペリエンスを提供します。

カスタムモジュールのセットアップ

初期セットアップ

はじめに、Magentoでカスタムモジュールをセットアップしてください。以下は、それの手順の概要です：

  1. モジュールディレクトリ構造の作成： 

    app/code/YourVendor/YourModule

  2. モジュールのXML設定： モジュールディレクトリの中のapp/code/YourVendor/YourModule/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="YourVendor_YourModule" setup_version="1.0.0"/>
</config>

  3. 登録ファイル： YourVendor/YourModule内にregistration.phpを作成してください：

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

Page Builder要素の実装

単純な画像アップロードフィールドではなく、Page Builderエリアを追加するには、次の手順に従ってください：

  1. category_form.xmlの変更：

    自身のモジュール内のcategory_form.xmlファイルを変更する必要があります。このファイルは次のパスに存在します：

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

    以下は、Page Builderを含むサンプルのファイル構造です：

    <?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>
                <!-- ここに他の設定を追加 -->
            </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>

このXML設定では、シンプルな画像アップロードフィールドをPage Builderで駆動されるWYSIWYG（表示されるままのもの）エディターに置き換えました。このエリアでは、デスクトップビューとモバイルビュー用の別々の画像タグを含むHTMLコンテンツを受け付けることができます。

元の画像アップローダーの削除

Page Builderエリアが完成したら、次のステップは、まだ存在する元の画像アップローダーを削除することです。これを実現するためには：

  1. 「category_form.xml」を開いてください。
  2. 元の画像アップローダーに対応するフィールドを見つけてください。
  3. そのセクションを削除またはコメントアウトしてください。
下記は、XMLの更新例です：

<field name="image">
    <!-- このセクションを削除またはコメントアウトします -->
    <argument name="data">
        <!-- アップローダーのためのその他の設定 -->
    </argument>
</field>
このセクションをコメントアウトまたは削除することで、使用しない画像アップローダーが管理画面に表示されなくなります。

コンテンツが正しく保存されているか確認する

Page Builderを設定した後は、追加されたコンテンツが正しく保存されていることを確認する必要があります。以下の手順に従ってください：

  1. データベーススキーマ： 新しいデータを処理できるように、データベーススキーマを確認してください。モジュール内のetc/db_schema.xmlを変更してください：

    <table name="catalog_category_entity">
    <column name="custom_html" xsi:type="text" nullable="true" comment="Page Builder用のカスタムHTML"/>
</table>

  2. モデル内のデータ処理： モデル内のデータ処理ロジックが正しく更新されることを確認してください。モジュールの構造に応じて、特定のMagentoモデルを変更または拡張する必要があるかもしれません。

  3. 検証とテスト： 新しい設定を確認するためにテストしてください。Page Builderエリアに入力されたすべてのデータが正しく保存され、デスクトップおよびモバイルビューの両方で予想どおりにレンダリングされることを確認してください。

結論

Magentoのデフォルト機能を強化することは大変な作業のように思えるかもしれませんが、明確なステップバイステップのプロセスがあれば、管理可能です。標準の画像アップロードフィールドを柔軟なPage Builderエリアに置き換えることで、ビューするデバイスに基づいて独自のコンテンツを追加する柔軟性が得られます。これにより、フロントエンドのユーザーエクスペリエンスが向上し、優れた管理インターフェースが提供されます。

Magentoカスタマイズを試して、堅牢なバックエンド管理とダイナミックなフロントエンド表示を組み合わせた多くの可能性を活用してください。このガイドでは基礎を築くことを目指しましたが、次はあなたの番です。レスポンシブなeコマースWebサイトを作成しましょう。

よくある質問

Q：必要な場合、単一の画像アップロードフィールドに戻すことはできますか？ A：はい、ページビルダーセクションをコメントアウトし、category_form.xml内のオリジナルの画像アップロードフィールドをコメントアウトまたは再追加することにより、元に戻すことができます。

Q：2つ以上の画像フィールドを追加することは可能ですか？ A：絶対に可能です。要件に応じて、ここで説明した原則を拡張し、追加の画像フィールドや他のコンテンツエリアを追加できます。

Q：Magentoのアップデートはこれらの変更に影響しますか？ A：カスタムモジュールはできるだけアップデート対策に設計する必要があります。ただし、互換性を確保するため、アップデート後にカスタマイズを十分にテストすることが常に良いアイデアです。