【EC-CUBE4】会員ログインしないと商品画像が表示されないようにする方法

EC-CUBE4で会員ログインしないと商品画像が表示されないようにする方法です。

画像出力コントローラー作成

カスタマイズディレクトリに画像を出力するコントローラーを作成します。

<?php

namespace Customize\Controller;

use Eccube\Controller\AbstractController;
use Symfony\Component\Asset\Packages;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use Symfony\Component\Routing\Annotation\Route;

/**
 * @Route("/image")
 */
class ImageController extends AbstractController
{
    private $packages;

    public function __construct(Packages $packages)
    {
        $this->packages = $packages;
    }

    /**
     * @Route("/product/{filename}", name="image_product", methods={"GET"})
     *
     * @param string $filename
     * @return BinaryFileResponse
     */
    public function product(string $filename)
    {
        $projectDir = $this->getParameter('kernel.project_dir');

        // ログインしていたら商品画像を表示
        if ($this->isGranted('ROLE_USER')) {
            $file = $projectDir . $this->packages->getPackage('save_image')->getUrl($filename);
            if (file_exists($file)) {
                return new BinaryFileResponse($file);
            }
        }

        // 商品画像が見つからなかったらNo Image画像を表示
        $file = $projectDir . $this->packages->getPackage('save_image')->getUrl('no_image_product.png');
        if (file_exists($file)) {
            return new BinaryFileResponse($file);
        }

        // No Image画像がなかったらエラー
        throw new NotFoundHttpException();
    }
}

商品一覧テンプレートを編集

画像出力コントローラー経由で画像を出力するように商品一覧テンプレートを編集します。

imgタグを以下のように編集してください。

<img src="{{ path('image_product', {'filename': Product.main_list_image}) }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>

画像詳細テンプレートを編集

画像出力コントローラー経由で画像を出力するように商品詳細テンプレートを編集します。

imgタグを以下のように編集してください。

<img src="{{ path('image_product', {'filename': ProductImage}) }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}>

サムネイル画像のimgタグは以下のように編集してください。

<div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ path('image_product', {'filename': ProductImage}) }}" alt="" width="133" height="133" loading="lazy"></div>

以上で完成です。

未ログイン時はNo Image画像が表示され、ログイン時は商品画像が表示されます。