WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

EC-CUBE3 アイコンをカスタマイズ(変更)する方法。

タグ:

EC CUBE3でアイコンを変更する方法

EC CUBE3.0で初期のアイコンが気に入らないとか、他のアイコンに変更したい、なんてときにアイコンを変更(カスタマイズ)する方法を紹介します。

1.EC CUBE3.0のアイコンの読み込み方

EC CUBE3.0になってレスポンシブ(スマホ対応)がデフォルトのテーマで適用されています。
アイコンは全てsvg(エスブイジー)データとなります。
外部HTMLにsvgのテキストデータをまとめておいてajaxでそのHTMLを取り込んで、IDでそれぞれのアイコンを取り出しています。
この方法については前回の記事の【svgデータを外部にまとめてajaxで読み込む方法】に詳しく記載しています。

2.読み込み元のHTMLとスクリプトについて

まずはajaxで取り込み部分を見ていきます。
最下層のスクリプトのソース部分でインクルードしています。下記画像。

インクルード部分

上の画像を見たらわかるようにajaxを使って【/htm/template/テンプレートの名前/img/common/svg.html】のファイルをインクルードしています。

次にHTML部分の記述です。
下記はcart.twigの一部です。

HTMLの読み込み

HTMLの記述は<svg>〜</svg>の部分になります。
hrefの#○○○でsvg.htmlの中のID名を指定して取り出しています。

3.実際にカスタマイズするには

カスタマイズの方法としてはtwigのデータを一切触らずに【/htm/template/テンプレートの名前/img/common/svg.html】のファイルを開いて、指定のIDが書かれている部分を置き換えたいsvgファイルのテキストデータに置き換えればアイコンは変わります。

右上のカートの中身のアイコンを変えて見ましょう。

①【/htm/template/テンプレートの名前/img/common/svg.html】を開きます。

書き換え前

②svg.htmlの12行目〜14行目を下記に書き換えてみてください。



	
		
		
	
	


これでアイコンは変わっていると思います。

イチからテンプレートを作成する場合は既存のsvg.htmlは全て消してID等も指定し直す方が速いと思います。

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。