EC-CUBE2.4系のスマホ対応

EC-CUBE 2.13系もリリースされている今日この頃ですが、2.12系でも2.11系でもなく、
既に運用しているEC-CUBE 2.4系サイトにて、スマートフォン対応を行ないたいというご要望をいただく事もあります。
簡易的に対応できる方法は、
モバイル版のテンプレートをスマホ対応し、スマホからアクセスされた場合も、モバイル版にリダイレクトするようにする
という事だと思いますが、実際には、

  • モバイル版とスマホ版ではデザインや文言を分けたい。
  • スマホ版の画面遷移はモバイル版ではなく、PC版と合わせたい。
  • スマホでアクセスされている場合には、PC版とスマホ版をユーザに選択させたい。
    (「PC版サイトを見る」ボタンをタップすると、PC版向けのサイトを表示させたい)

といった要望にも対応する必要が生じる場合が少なくないはずです。

その場合、スマホ向けのテンプレを別途作成すると、柔軟に対応できます

やり方としては、以下の様な要領になります。

  • data/module/Net/UserAgent/ 配下のモジュールを、スマホ対応版(2.11系以降)のEC-CUBEから移植。
  • data/class/SC_MobileUserAgent.php に、スマホかどうかを判別する関数を作成。
    また、スマホであり、スマホ表示を選択されているかどうかを判別する関数も作成。
    (「PC版サイトを見る」ボタンをタップされた場合には、その旨、cookieに保存しておく)
  • data/class/SC_View.php にて、SC_SphoneViewクラスを作成。(SC_MobileViewを踏襲)
  • それぞれのページクラスでは、process関数内にて、スマホ表示を選択されている場合には、SC_SiteViewではなくSC_SphoneViewクラスを利用するようにする。
  • data/Smarty/templates/ 配下にスマホ用のテンプレを置くディレクトリを作成し、その中に、スマホ向けのテンプレを作成していく。
この方法は、「一部のページのみで良いからスマホ対応を行ないたい」とか、「各ページについて、細やかにスマホ向けのデザインを行ないたい」といった場合には、特に有効だと思います。

EC-CUBE 2.4系以下だけどスマホ対応を行ないたいという場合にも、どうぞお気軽にお問い合わせください。