【EC-CUBE3】参照元(前の画面)に戻るボタンを追加する手順

【EC-CUBE3】参照元(前の画面)に戻るボタンを追加する手順

こんにちは。
今回もEC-CUBEについてです。

やりたいこと

カスタマイズで新たに追加した画面に、[戻る]ボタンを実装しています。
このボタンを押した時は、前の画面に戻るという仕様なのですが、
この画面は、カート画面や商品詳細画面など、複数の画面から呼び出される場合があります。

つまり、[戻る]ボタンを押したときに特定のページに遷移するのではなく、
参照元、呼び出し元に遷移するようにする必要があります。

リンク先が動的に変わるということですね。

これを、なるべく最小限のコードで実現したいと思います。

アクションメソッドで参照元URLを取得

まずは、コントローラーのアクションメソッド内で、
参照元URLを取得しましょう。

参照元URLは
$request->headers->get(‘referer’)
で取得できます。

コード例としては以下の通りです。

今回の説明で不要な部分は割愛していますが、
デフォルトのコントローラーを参考に作成していれば、
以下のようなindexアクションメソッドがあるはずです。

[Controller.php]



    public function index(Application $app, Request $request)
    {
        $session = $request->getSession();
        $productId = $request->get('id');
        //参照元URLを取得する
        $referer = $request->headers->get('referer');

         return $app->render('ColorSimulator/Resource/template/index.twig', array(
              'request' => $request,
              'referer' => $referer,
        ));
    }

$request->headers->get(‘referer’)で取得した結果を、
$refererに受け取っています。

ちなみに、$request->headers->get(‘referer’)で、
参照元のページのURLの完全パスが文字列として取得されます。
例として、以下のような文字列が取得されます。
例)https://〇〇.com/products/detail/4

取得したURLをrenderメソッドに渡す

次に、先ほど取得したURLをrenderメソッドの引数に渡し、
フロント側で表示できるようにします。

[Controller.php]



    public function index(Application $app, Request $request)
    {
        $session = $request->getSession();
        $productId = $request->get('id');
        //参照元URLを取得する
        $referer = $request->headers->get('referer');
    //参照元が見つからない場合、商品詳細画面を参照元とする
    if(empty($referer )){
       $referer = $app->url('product_detail', array('id' => $productId));
    }
     //renderメソッドに取得したURLを渡し、フロント側で表示できるようにする
         return $app->render('ColorSimulator/Resource/template/index.twig', array(
               'request' => $request,
               'referer' => $referer,
        ));
    }

注意点として、直接URLを叩いてページが表示された時など、
参照元のページが取得できない場合を考慮する必要があります。
上記の例の場合、参照元が見つからなければ商品詳細画面に戻るようにしています。

戻るボタンのリンク先に参照元URLを指定

ここからは単純に、アクションメソッドで取得したURLを
戻るボタンのリンク先に指定します。

Twigなので、指定の方法としては以下のようになります。

[index.twig]


<ul>
<li><a href="javascript:form1.submit()">色を確定する</a></li>
<li><a href="{{ referer }}" class="back">戻る</a></li>
</ul>

これで、どの画面から呼び出されても、
戻るボタンのリンク先が参照元のURLとなっているはずです。

まとめ

【要件】
特定のページではなく、参照元の画面・前の画面に戻るリンクを追加する。

【手順】

  • コントローラーのアクションメソッドで、参照元URLを文字列として取得する
  • 同じくコントローラーのアクションメソッドで、取得したURLをrenderメソッドの引数として渡す
  • index.twigなどのフロント側で、渡されたURLをリンク先としたaタグを追加