カラーミーショップの付加画像をオリジナルに変更する方法
【2016年10月18日 追記】2016年10月中旬頃に、カラーミー側にて付加画像URLの変更があったようです。そのため、2016年10月以前にこちらの投稿（現在は修正済み）を参考にカスタマイズされている場合、付加画像が表示されなくなっている可能性があります。該当される場合は、以下、修正済みのコードを参考に改修を行って頂ければと思います（修正箇所には【修正】との記載があります）。
カラーミーショップの付加画像ってあまりよくないですよね。というかダサい。あれひとつでショップデザインのイメージが崩壊してしまいかねないので、デザインにこだわったショップさんの場合は、死活問題かと思います(大げさｗ)。
JavaScriptでオリジナルなものに変更する方法もありますが、ここではスマートにsmartyを使ったカスタマイズについて記載したいと思います。といっても、考え方は一緒で、クライアントサイドでない分、いくらか軽量になるだけです。。。
※前置きがかなり長くなってしまってますｗ 該当部分だけみたい場合はこちら。
付加画像とは
カラーミーを利用されている方なら分かると思いますが、商品の登録時などで設定することができる「NEW」だったり「SALE」だったりの小さな画像のことで、商品名の前か後に付けることができるものです。
aNEWマークと言ったりもしますが、実際にはNEWだけじゃなく、SALEや売切れ、オススメなんかもあります。
↓これ
(前または後に)表示する設定がされると、商品名に自動で付加される仕様となっていて、これ用の独自タグは用意されていません。
そのため、この付加画像をオリジナルなものに変更するには、少しの工夫と少しのやる気が必要となってきます。やる気といっても、そんなに難しくはありません。めんどくさいだけですｗ
付加画像のimgタグを利用する
上の画像の通り、付加画像は全部で60個用意されていますが、これらは全てgif形式の画像で、それぞれimgタグを使って表示されています。
商品名の独自タグに反応するようになっていて、付加画像の設定をONにすると、(独自タグを使って表示している)商品名の前か後ろに自動的に画像のURLを含んだimgタグが付く、という仕組みになっています。そのコードというかタグが以下。
【2016年10月18日 修正】付加画像URLの変更に伴い一部修正いたしました。
<img class='new_mark_img1' src='//img.shop-pro.jp/img/new/icons番号.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />このタグが自動的につくわけですが、これを利用することになります。
ちなみに「番号」は、上の画像の付加画像の左に記載されている数字とリンクしていて、例えば「番号」を「1」とすると
が表示されるという感じになっています。「ショップドメイン」はそのままショップのドメインが入ります。
付加画像は全ての商品名に付加される
余談ですが、付加画像の設定を有効にすると、全ての商品名を取得する独自タグに付加画像が表示されます。一部だけ変更しないというわけにもいかないと思うので、付加画像をオリジナルにする場合は、商品名を取得する独自タグ全てに手を加える必要があります。
先程「めんどくさい」と言ったのはまさにこれのことで、一からサイトを構築する際はいいですが、後からカスタマイズする時は、全てのページを確認する必要があるので「やる気」がないととてもできない作業です。なので、トライする際は頑張ってくださいｗ
一部の商品名に付加画像を付けない方法
商品名に付加画像を付けたくないという場合もあるかと思います。そんな時は、付加画像を付けたくない箇所の商品名を取得する独自タグの後へ、|(パイプ)とstrip_tags修飾子を指定することで、付加画像を非表示にすることが可能です。
例えば、パンくずリストには付加画像を付けたくないので、
<{$product_name|strip_tags:false}>とすることで、たとえ商品に付加画像の表示を設定したとしても、商品名のみが表示されます。※商品名を取得する独自タグは、設置場所によって変化しますので注意が必要です。
実際にやってみる
前置きがかなり長くなりましたが、ここからが本題です。と、その前に、商品名を取得する独自タグをおさらいします。
商品名を取得する独自タグは、ページによってまたは表示する場所によって異なり、以下のような種類があります。
| テンプレート | 独自タグ | 使用場所 |
|---|---|---|
| 共通ページ | product_name |
パンくずリスト用 |
incart.name |
カートの中身のリスト | |
recommend[num].name |
おすすめ商品情報ループ内 | |
seller[num].name |
売れ筋商品情報ループ内 | |
| 商品詳細ページ | product_name |
ページ内全域 |
together_product[num].name |
組み合わせ購入パターン | |
| 商品一覧 | productlist[num].name |
ページ内全域 |
| 商品検索結果 | productlist[num].name |
ページ内全域 |
※マニュアルに記載のあるタグのみ。テンプレートプラス利用で使用できるタグは除外
抜けているものもありますが、だいたいこんな感じでしょうか。
今回は、一番代表的と思われる商品一覧の独自タグ(productlist[num].name)を利用して付加画像をオリジナルなものに変更する方法を記載したいと思います。
まず、商品一覧ページで<{$productlist[num].name}>を探して、以下のように書き換えます。
【2016年10月18日 修正】付加画像URLの変更に伴い一部修正いたしました。SSL化を選択している場合は「http:」を「https:」へ変更してください。
<{assign var="new" value=$productlist[num].name|replace:"<img class='new_mark_img1' src='http://img.shop-pro.jp/img/new/icons1.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />":"NEW"}>
<p><{$new}></p>これを実行すると、付加画像のナンバー1()が、NEWという文字に置き換えられます。つまり、「NEW商品名」となるわけです。
注1)管理画面の付加画像設定で、1番()の付加画像を選択する必要があります。
注2)付加画像の位置を「後方に表示」としている場合は、商品名の後にNEWの文字が付きます。
ブラウザのソースでは、
<p><span class='icons-new'>NEW</span>商品名</p>となっていますので、span.icons-newのスタイルを指定することで、背景色やフォントの大きさ、カラーなどを自由に変更することができます。
例えば、cssでicons-newクラスにposition:absoluteを指定すれば、画像の上にもっていくこともできますし、自由自在に配置することが可能です。その辺はお好みで調整してくだしあ。
オリジナルの画像に変更する場合
自分で作ったオリジナルの画像に変更したい場合は、下記
<span class='icons-new'>NEW</span>の部分を、その画像のURLを含んだimgタグに変更すればOKです。
応用編
実はこれだけだと、ひとつの付加画像しか利用していないため、NEWしか出すことができません。これだと汎用性が全くないので、さらにもうひと手間加えてより使いやすくしたいと思います。
1.利用する画像を選択する
まずは、60個の付加画像から利用する画像を適当に選びます。例では、分かりやすく1、2、3の画像を使用します。
2.それぞれの役割を決める
画像を決めたら、それぞれの画像で何を表示させるかを決めます。ここは後の運用で関わってくるところなので、メモなどしておくと便利です。ここでは以下の通り、
・1の付加画像() → NEW
・2の付加画像(
) → SALE
・3の付加画像(
) → 再入荷
とします。
3.smartyで置き換え
先程と同じように、商品一覧ページで<{$productlist[num].name}>を探し、その独自タグの前に以下のコードを追加します。ショップドメインは各自変更してください。
【2015年9月22日 追記】ご指摘頂き、一部コードを修正・追加致しました。
【2016年10月18日 修正】付加画像URLの変更に伴い一部修正いたしました。SSL化を選択している場合は「http:」を「https:」へ変更してください。
<{assign var="pName" value=$productlist[num].name|strip_tags:false}>
<{assign var="new" value=$productlist[num].name|replace:"<img class='new_mark_img1' src='http://img.shop-pro.jp/img/new/icons1.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />":"NEW"}>
<{assign var="sale" value=$productlist[num].name|replace:"<img class='new_mark_img1' src='http://img.shop-pro.jp/img/new/icons2.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />":"SALE"}>
<{assign var="re" value=$productlist[num].name|replace:"<img class='new_mark_img1' src='http://img.shop-pro.jp/img/new/icons3.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />":"再入荷"}>
<{assign var="iconnum" value=$productlist[num].name|replace:"<img class='new_mark_img1' src='http://img.shop-pro.jp/img/new/icons":""|replace:".gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />":""|replace:"`$pName`":""}>更に<{$productlist[num].name}>この部分を、まるまる以下に書き換えます。
<p><{if $iconnum == 1}><{$new}><{elseif $iconnum == 2}><{$sale}><{elseif $iconnum == 3}><{$re}><{else}><{$productlist[num].name|strip_tags:false}><{/if}></p>これでOK。さっきと同じようにCSSでスタイルを指定すれば、好みのデザインに変更することができます。オリジナル画像に置き換えたい場合も同じで、3つそれぞれをimgタグに変更してあげればいいです。
あとは、管理画面にて、各商品に付加画像(1、2、3のいずれかの画像)を設定するだけ。
商品に対して付加画像を設定しなければ当然表示されませんし、1、2、3以外の付加画像が選択された場合には、付加画像自体が表示されないように設定してあります。
もちろん、3つだけではなくもっと増やすこともできます。コードを見て頂ければ何となく分かるかと思いますので、色々と工夫してみてください。
まとめ
読み返してみるとものすごく長いし分かりづらいですねｗ サンプル画像とかを載せることができないので、文章だけで伝えるのがすごく難しかった。そして、アイキャッチが見づらいのは、ほんとすみませんｗ
もっと分かりやすく簡潔に文章を書けるようにしたいと思いつつ、参考になれば幸いです。
