カラーミーには、商品ごとに「New」や「Sale」などの商品付加画像が用意されています。色違いなどバリエーション込で62種類。
これがまた、時代を感じさせるデザインですので変更したいと思う方も多いでしょう。今記事では商品付加画像のカスタマイズについて説明します。
付加画像カスタマイズの注意点
商品に付加画像が設定されていると、
- 商品ページ
- カテゴリー／グループページ
- おすすめ商品（設定ある時）
- 売れ筋商品（設定ある時）
- 閲覧履歴
- お気に入り商品（設定ある時）
- サイト内検索結果
で使用されますが、カスタマイズはこれらを個別に行う必要があります。一括で変更する方法はありません。
同じ手順をひたすら繰り返すだけなので頭は使いませんが時間が少しかかります。
では、カテゴリーページを題材に使って説明します。
商品付加画像を変更する方法
付加画像を「表示する」に設定すると、商品名に付加画像がくっつく形で出力されます。これはカラーミー側で処理されているので、こちらから手出しすることが出来ません。
そこで、まず商品名と付加画像を切り離す作業です。
出力される商品名から付加画像を切り離す
テンプレート編集で「商品一覧」(カテゴリー／グループ)をひらくと、商品名は
<{$productlist[num].name}>で出力されています。
付加画像がなければそのまま商品名が。付加画像がある場合は、商品名< img src="xxx" /> がHTMLに出力されます。
そこで、考え方としては、<{$productlist[num].name}>を2回出力し、一方から付加画像を、もう片方からは商品名を取り除くことで、商品名と付加画像を切り離して利用できるようにします。
商品名から付加画像を切り離す
これはhtmlタグを取り除くstirp_tagsを使えば簡単です。
カラーミーはsmartyなので、
<{$productlist[num].name|strip_tags:false}>です。
最後のfalseをtrueにすると、置き換え部分がスペースになります。
この商品名部分をあとで使うので、分かりやすいように変数にしておきます。
<{assign var=myName value=$productlist[num].name|@strip_tags:false}>↑により、＄myName という変数を使えば、【付加画像なし商品名】が出力されるようになりました。
商品名から付加画像だけを取り出す
付加画像だけを取り出すのは先程の反対の作業なので、replaceを使って$productlist[num].nameから商品名を取り除きます。phpではstr_replace()です。
<{$productlist.name|replace:$myName:""}>先程作った＄namae（【付加画像なし商品名】）を除いてやれば、付加画像だけが残ります。
これも次使うので適当な変数にしておきます。
<{assign var=gazou value=$productlist[num].name|replace:$myName:""}>↑＄gazou という変数を使えば、付加画像が出力されるようになりました。
これで切り離し作業までは終了です。
付加画像を置き換える
仮に、付加画像が「前方に表示」設定で、「New」の1番目の画像の場合、実際のページには下記のHTMLが出力されるはずです。
<img class='new_mark_img1' src='https://img.shop-pro.jp/img/new/icons1.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />商品名これを「example.png」という画像に置き換えるとすると、先程つくった＄gazou変数を利用して
<{$gazou|replace:”<img class='new_mark_img1' src='https://img.shop-pro.jp/img/new/icons1.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />:"<img src='example.png' alt='example' />"} >とすれば置き換え完了です。
ちなみにreplaceは複数つなげられるので、＄gazouを作ったりせずに、
<{$productlist[num].name|replace:$myName:""|replace:"<img class='new_mark_img1' src='https://img.shop-pro.jp/img/new/icons1.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />:"<img src='example.png' alt='example' />"}>としてもOKです。
もう少し実用的に変換する
基本の流れは分かったと思いますが、これだと付加画像1種類にしか対応していないので非効率です。（1種類しか使わないなら大丈夫）
付加画像は「前方に表示」の場合、class=”new_mark_img1″ 「後方」ならclass=”new_mark_img2″となり、ファイル名は icons1.gif から icons62.gif まで順番に番号が振られています。
クラス名まで分けてしまうと面倒なので前方表示なら前方表示のみ、と自分の中で決めてしまって、ファイル名の数字のみ取り出すと条件分岐しやすくなります。
つまり、
<{assign var=gazouNum value=$productlist[num].name|replace:$myName:""|replace:"<img class='new_mark_img1' src='https://img.shop-pro.jp/img/new/icons":""|replace:".gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />:""}>としてしまえば、＄gazouNumでファイル名の数字部分だけが取り出せます。
あとはif文など使って、数字ごとに対応する画像と置き換えるようにしてやれば出来上がりです。
SEO Plusテンプレートでは画像でなくテキストに変換していますが、下の表示となります。
今回の例ではimgタグへの置き換えでしたが、もちろんimgにこだわる必要はなく、テキストやsvgなど自由に置き換えられます。
