シェアする

  • このエントリーをはてなブックマークに追加

[EC-CUBE]デザインテンプレートについてのメモ

medium_5463694431

意気揚々と記事を書いた後にエクスポートしたテンプレートを本番環境に読み込んでビックリ。スタイルが反映されてない。。。後日きちんと検証して記事を書き直します。すみません。

デザインテンプレートの編集方法と、配布時のフローについてのメモです。

きちんとドキュメントを読んでいないため*[1] 、間違っているかもしれませんので、ご注意ください。

テンプレート編集の基本

新しいテンプレートを作る時には、defaultを直接編集するのではなく、defaultテンプレートをダウンロードして、それを元にテンプレートを追加して新しいオリジナルのテンプレートを作りましょう。

なぜそうするかというと、defaultテンプレートはいいお手本になるから。

例えばログインページのパスって何だっけ?って言う時に、dafaultを残しておけばそのソースからすぐに分かりますよね?
それに、Smartyの独特の記述に慣れていない私のような開発者ならば、defaultテンプレートのソースは良い教科書になるというわけ。

折角なので、テンプレートを追加、そして別の環境にも追加できるテンプレートファイルを作成する流れを説明しましょう。*[2]

1.defaultテンプレートをダウンロードする

管理画面の「デザイン管理」->「テンプレート設定」の、defaultテンプレートのダウンロードリンクからテンプレートをダウンロードします。

2.テンプレートを追加する

管理画面の「デザイン管理」->「テンプレート追加」から、テンプレートコード、テンプレート名を設定して、「1」でダウンロードしたtar.gzファイルをアップロードします。

テンプレートコードは半角英数字で入力。新しいテンプレートを追加すると、ここで入力した名前のディレクトリが/data/Smarty/templates/tamplate_nameと、/html/user_data/packages/tamplate_nameに作成されて、中に必要なテンプレートファイルの一式が作成されます。

3.追加したテンプレートを設定する

もういちど管理画面の「デザイン管理」->「テンプレート設定」を開き、「2」で追加したテンプレートを選択してください。

defaultテンプレートがベースになっているので見た目は変わらないと思いますが、追加したテンプレートに切り替わります。
試しに追加したテンプレートを「デザイン管理」->「テンプレート設定」のページ編集*[3] から編集してみてください。変更が反映されますね?

4.テンプレートを編集する

テンプレートの編集は、公式サイトの説明や公式ガイドブックなどを見るとEC-CUBEの管理画面から行う方法を説明していると思います。(たぶん)

でも、デザイナーさんやエンジニアの方なら自前のエディタで編集したいですよね?

ここからの説明はきちんと検証していないので、もしかしたら「間違った方法」の可能性もありますが、私の編集方法を自分用のメモということで残しておきたいと思います。

編集対象は基本的に/data/Smarty/tenplates/tamplate_nameの中のファイルです。この中の.tplファイルを編集すると表示に反映されます。

ただ、/data/Smarty/tenplates/tamplate_nameの中にはimgやcssディレクトリが見当たりません。なので、画像やスタイルシート、jsなどは/html/user_data/packages/tamplate_nameの中の該当ディレクトリを利用します。

あとで分かったことなのですが、追加したテンプレートを編集して「1」のようにダウンロードすると/data/Smarty/templates/tamplate_name/_packagesというディレクトリが生成されて、先程/html/…に追加した画像やスタイルシートなどがコピーされることがわかりました。

テンプレートをダウンロードする段階で、ちゃんとテンプレートファイルに画像やスタイルシートを含んでくれるというわけですね。*[4]

これでローカル環境で作成したテンプレートなども、本番環境に追加できます。

検証はしていないけどもしかしたら・・・

テンプレートをダウンロードする段階で/html/…を元に/data/…/tamplate_name/_packagesというディレクトリを生成してくれるということは、もしかしたら/html/…側だけを編集しても、ダウンロードした段階でちゃんと/data/…側にも変更を反映してくれるのかもしれませんね。

これは想像ですがEC-CUBEの設計思想として、機能に関する(Heavyな)カスタマイズは/dataで、デザインに関する(Lightな)カスタマイズは/htmlで行いたいというような考えが見て取れるので、もしかしたらと思った次第です。ただ、とりあえずSmartyの方の編集でうまくいったため検証はしていないので、もしご存じの方がいらっしゃいましたら教えてください。

私の方でも今進めている案件が終わったら検証してみたいと思います。

  1. というかドキュメントってあるのかな?以前はWikiっぽいところで詳しく説明されていた気がするんだけど現行バージョンのものは無いですよね? []
  2. EC-CUBEの中の人じゃないので、間違っているところがあるかもしれません。お気づきの点があればぜひご指摘を、実際にやってみる方は確認しながら自己責任でお願いしますね。 []
  3. ドラッグ&ドロップできるレイアウトの下にあるページ一覧の編集リンク []
  4. 最初は/html以下のファイルは自分でアップロードするものだと思ってました(笑)でもそれじゃあまりにお粗末すぎますよね。ひと安心。 []

シェアする

  • このエントリーをはてなブックマークに追加

フォローする