EC-CUBE3を始めよう! – part2 –

EC-CUBE3を始めよう! – part2 –

お久しぶりです。かぽんです。

 

前回GoProを購入してからちょくちょく使ってるのですが、SDの相性がかなり顕著に出る事に最近気づきました。

SDカードにはHCやXCやスピードクラスなど種類がいろいろあるのですが、早いものを選べば間違いないだろうと思い

TOSHIBAのものを購入してしばらくは問題なく使っていました。

しかし4KやPROTUNEという機能を使うと映像が途切れ途切れになる事が判明。。

原因はSDカードのメーカーとGoProの相性でした。

みなさん購入になる際は、SanDiscなどのGoProが動作保障したものにしましょう。

 

さて今回は前回予告したとおり、テンプレートの修正の方法を紹介したいと思います。

 

 

はじめに

前回紹介したディレクトリ構造でいうと、今回かかわってくるのが

・app/templete

・html

になります。

ここがいわゆるフロントエンドエンジニアの作業領域になるかなと思います。

EC-CUBE3のテンプレートはSilexのビューにあたるtwigというテンプレートエンジンを使っています。

なので、テンプレートの修正はtwigの作法に沿って行うようにしましょう。

 

 

テンプレート修正の前に

EC-CUBE3のテンプレートは先述した通り「app/templete」下になりますが、その前にしなければならない事があります。

これをしないと本体のテンプレートが読まれます。

本体のテンプレートを修正する場合そのままでもいいのですが、

アップデートの際に大変になるので、基本的には「src」下は触らないようにするのが無難です。

 

・デフォルトテンプレートをコピーする

src/Eccube/Resource/template/default

上記以下のファイル(本体のテンプレート)を全てコピーして「app/templete/default」に配置します。

これで配置したテンプレートをダウンロード出来るようになります。

 

・管理画面での作業

管理画面の

「オーナーズストア」→「テンプレート」→「テンプレート一覧」

からデフォルトのテンプレートをダウンロードします。

ダウンロードしたテンプレートを

「オーナーズストア」→「テンプレート」→「アップロード」

よりテンプレートコードとテンプレート名を入力してアップロードしましょう。

これで入力したテンプレートが使用できるようになります。

 

 

テンプレートの修正

HTMLタグや文言、読み込みファイルの修正などがこれにあたります。

twigは「{% *** %}」で囲って変数や処理などを記述する事が出来ます。

使える処理などは限られているので、都度調べてください。

あまり複雑な処理は出来ないと思うので、その辺りは次回紹介したいと思います。

管理画面でアップロードする際に入力したテンプレートコードと同じディレクトリが

「app/templete」下にあると思うので、その中の各ページのtwigファイルを修正します。

ページは管理画面の「コンテンツ管理」→「ページ管理」の右側の三点リーダーの「ページ編集」から

ブロックは上記三点リーダーの「レイアウト編集」から設定されているブロックを割り出して、

「コンテンツ管理」→「ブロック管理」から対象ファイルを導き出す事が出来ます。

 

 

JS,CSSの修正

JS、CSSの修正はテンプレートの修正で導き出した、twigで読み込まれているJS,CSSファイルを割り出して、

該当ファイルを「html/templete/[テンプレートコード]」下から見つけて修正します。

 

 

まとめ

EC-CUBE3はテンプレートの修正程度であれば上記を元に簡単に修正する事が出来ます。

まだまだEC-CUBE3の情報が少ないですが、その際は使っているライブラリやフレームワーク等で検索するといいと思います。

今回の場合であればSilexやtwigですね。

次回は少し難易度を上げて、プラグインのカスタマイズについて紹介したいと思います。


Previous: 「経営者の条件」より開発部門管理についての思考 第四弾 Next: jQueryの基本 Part4

© 2017 ALL CONNECT Inc. All Rights Reserved.