Blog スタッフブログ

EC-CUBE

EC-CUBE4で商品画像の上限数を変更する方法

コーダーのKです。

商品詳細ページで表示される商品画像はデフォルトでは10枚までです。

twigファイルを編集して10枚以上設定可能にする方法をご紹介します。

上限を決めているファイル

ディレクトリ内から管理画面側のproduct.twigを探します。

デフォルトではここに存在します。

/src/Eccube/Resource/template/admin/Product/product.twig

ファイルを開いて、var pond = FilePond.createから始まる以下のコードを探します。

var pond = FilePond.create(inputFileElement, {
    allowFileTypeValidation: true,
    acceptedFileTypes: [
        'image/gif',
        'image/png',
        'image/jpeg'
    ],
    allowFileSizeValidation: true,
    maxFileSize: 10000000,
    maxFiles: 10,
    allowBrowse: true,
    allowDrop: true,
    allowReorder: true,
    labelIdle: '<i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true" style="font-size: 40px"></i>{{ 'admin.common.drag_and_drop_image_description'|trans }}<span class="filepond--label-action">{{ 'admin.common.file_select'|trans }}</span>',
    styleItemPanelAspectRatio: 0.5625,
    // 保存されている画像のロード
    files: [
        {% for image in form.images %}
        {
            source: '{{ image.vars.value }}',
            options: {
                type: 'local'
            }
        },
        {% endfor %}
        // 追加してすぐの画像のロード. バリデーションエラーの場合など.
        {% for add_image in form.add_images %}
        {
            source: '{{ add_image.vars.value }}',
            options: {
                type: 'local'
            }
        },
        {% endfor %}
    ]
});

この中のmaxFilesの値が上限です。

20枚まで設定可能にする場合は、

maxFiles: 20,

に変更します。

変更時の注意点

src内のproduct.twigを変更するだけでも反映されますが、srcフォルダ内のtwigを直接編集するすることは推奨されていません。

appフォルダにコピーしてから編集することで安全に編集可能です。

変更前のproduct.twigをコピーします。

/src/Eccube/Resource/template/admin/Product/product.twig

コピーしたものを以下のディレクトリに同じファイル名でアップロードします。

/app/template/admin/Product/product.twig

app内のproduct.twigを編集します。

そうすることでEC-CUBEが優先してappの方を参照するようになります。


Warning: Undefined array key 0 in /home/fl0uhem6u4/mixltd.jp/public_html/cms/wp-content/themes/mix_theme/pagination-single.php on line 3

Warning: Attempt to read property "cat_ID" on null in /home/fl0uhem6u4/mixltd.jp/public_html/cms/wp-content/themes/mix_theme/pagination-single.php on line 3
戻る一覧へ戻る