EC-CUBE3 アイコンをカスタマイズ(変更)する方法。
2016.08.31
カテゴリ：WEB制作
タグ：
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の記述は<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行目を下記に書き換えてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<symbol id="cb-shopping-cart" viewBox="0 0 37 23"> <g> <g> <path d="M10.055,17.771c-1.395,0-2.523,1.131-2.523,2.522c0,1.393,1.128,2.523,2.523,2.523c1.391,0,2.521-1.131,2.521-2.523 C12.575,18.902,11.445,17.771,10.055,17.771z"/> <path d="M18.592,17.771c-1.395,0-2.523,1.131-2.523,2.522c0,1.393,1.129,2.523,2.523,2.523c1.391,0,2.521-1.131,2.521-2.523 C21.112,18.902,19.982,17.771,18.592,17.771z"/> </g> <path d="M35.347,0.263h-7.346l-1.584,3.957H1.653C0.907,4.219,0.3,4.825,0.3,5.574c0,0.747,0.607,1.353,1.353,1.353h23.682 l-0.877,2.189H3.281c-0.051,0-0.1,0.01-0.149,0.019C2.878,9.097,2.612,9.13,2.363,9.248c-0.677,0.319-0.967,1.126-0.648,1.801 l2.905,6.165h19.517L28.58,6.101l0,0l1.253-3.131h5.514c0.745,0,1.354-0.605,1.354-1.353C36.7,0.867,36.092,0.263,35.347,0.263z M6.337,14.503l-1.263-2.676h18.301l-1.069,2.676H6.337z"/> </g> </symbol> |
これでアイコンは変わっていると思います。
イチからテンプレートを作成する場合は既存のsvg.htmlは全て消してID等も指定し直す方が速いと思います。
