商品リストに新着（NEW）マークやおすすめのバッジを出力する簡単な方法が、ネットショップ管理プラグインにはありませんでしたが、バージョン2.7.7 より比較的簡単に新着やおすすめの画像を表示することができるようになりました。
新着やおすすめマークを表示するには、新たに追加された商品ショートコードのオプションを使用します。マーク関連の商品ショートコードのオプションについて簡単に解説し、実際にマークを表示するサンプルをご紹介いたします。
マーク関連の商品ショートコードオプション
まず、マークの出力は、以下のようにします。新着とおすすめの条件に合致した場合に、「new mustbuy」という文字列が出力されます。条件と文字列はオプションで変更できます。
[product option=mark]
- mark
- どのマークを対象にするか指定します。デフォルトでは新着とおすすめである「new,mustbuy」が指定されています。新着「new」だけやおすすめ「mustbuy」だけにすることも可能です。
例）[product option=mark mark=new] - mk_days
- 何日前に登録された商品を新着として扱うかを指定します。デフォルトでは、30日となっています。販売開始日時が指定されている場合は、登録日時よりも販売開始日時を基準に判断されます。
例）[product option=mark mk_days=45] - mk_days_label
- 新着で出力される文字列を変更します。デフォルトでは、newとなっています。
例）[product option=mark mk_days_label=”新着商品”] - mk_mustbuy
- おすすめの基準となる順序の値を指定します。デフォルトでは、10で、順序が10以下（数字の小さい値）の商品がおすすめの対象となります。
例）[product option=mark mk_mustbuy=5] - mk_mustbuy_label
- おすすめで出力される文字列を変更します。デフォルトでは、mustbuyとなっています。
例）[product option=mark mk_mustbuy_label=”おすすめ商品”]
新着、おすすめマークバッジを出力する設定例
あらかじめ商品画像の上に表示させたいNEWやおすすめといったバッジ画像を用意しておいてください。バッジを簡単に生成できるジェネレーターサイトもありますので利用してもよいと思います。
まず、商品テンプレートの商品リスト用のテンプレートに以下のような<div>タグを追加します。
[product option=form]<p><a href="[product field=product_url]">[product field=product_image0]</a><br /><a href="[product field=product_url]">[product field=product_name]</a><br />価格 [product field=product_price] 円<br />[product option=add_to_cart addtocart_label=カートに入れる]</p>[product option=/form]
<div class="[product option=mark]"></div>
新着やおすすめの条件に合致すると、new や mustbuy といった class が <div>タグにセットされるので、スタイルシートを設定します。
.nsa_product_child { position:relative; }
.nsa_product_list div.mustbuy { background: url(images/mustbuy.png) no-repeat; width:48px; height:48px; top:0; left:0; position:absolute; }
.nsa_product_list div.new { background: url(images/new.png) no-repeat; width:48px; height:48px; top:0; left:0; position:absolute; }
設定が完了すると、以下のように、NEW や おすすめ のマークが商品画像の上に出力されるようになります。
今後の開発として、実際の販売状況に応じた、人気商品のマークも簡単に出力できるようにしていく予定です。
マークやバッジを画像として出力する例をご紹介しましたが、通常のテキストも出力できるので、「新着」や「おすすめ」といったキーワードをテキストとして表示するのにもご利用ください。
機能追加やお問い合わせはお気軽に
その他、細かな機能追加や修正も随時行っております。また、機能追加やこんなことが実現できるか、などのご相談はお気軽にお問い合わせください。