組み合わせ購入パターン

組み合わせ購入パターンの表示~旧テンプレートをご利用の方へ~
このページでは【 組み合わせ購入パターン 】の表示の概要及び旧テンプレートへの追加方法を説明しています。


2005年8月25日以前にダウンロードされたテンプレートには、【 組み合わせ購入パターン 】の表示が実装されていません。

【 組み合わせ購入パターン 】の表示機能を使用するには、以下の手順に従いテンプレートの編集を行ってください。



※編集方法は使用するテンプレートにより異なります。



お知らせ 2005/08/25
・ショップの商品詳細ページに、【 組み合わせ購入パターン 】を表示する機能を追加しました。


お知らせ 2007/05/23
・管理者ページに【 組み合わせ購入パターン 】の表示設定機能を追加しました。

【 組み合わせ購入パターン 】の表示機能とは

【 組み合わせ購入パターン 】の表示機能とは、ショップの商品詳細ページに、「この商品を買った人はこんな商品も買ってます」という商品付加情報を、1商品に対し3商品まで表示する機能です。表示される商品は、一緒に購入された販売回数の上位3商品もしくはお好みで設定した商品となります。

» 【 組み合わせ購入パターン 】の詳細はこちら



※該当商品と一緒に購入された商品が無い場合は、この項目は表示されません。

※2005年8月25日以前にダウンロードされたテンプレートには、表示用htmlが入っていないため、表示されません。

【 組み合わせ購入パターン 】の表示機能を使用するには、以下の手順に従いテンプレートの編集を行ってください。

機能を追加するには

【対応内容】
以下の二通りございます。どちらかの対応をお願いします。

再度テンプレートを追加する 【※推奨】

 

テンプレートの該当箇所を修正する

テンプレートの編集を行う場合は、【商品詳細画面html】【共通css】の計2箇所を編集します。

使用するテンプレートを確認し、以下の指定箇所の編集を行ってください。


【商品詳細html】に、【 組み合わせ購入パターン 】の表示用htmlを追記します。
【商品詳細html】の編集内容はこちら
【共通css】に、【 組み合わせ購入パターン 】の表示用cssを追加します。
【共通css】の編集内容はこちら




※上記タグを変更する位置が分からない場合は、再度ご利用のテンプレートをを追加していただき、上記変更後のタグが記述されている位置をご確認ください。

 

【商品詳細html】編集内容

使用しているテンプレートを確認

【商品詳細html】に追加するタグは各テンプレート毎に異なります。

タグの挿入箇所を確認

【テンプレート別挿入タグ一覧表 】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、
文字列を【商品詳細html】内にて検索します。

指定タグをコピー、挿入

検索後、検索文字列の上部へ ピンクエリアの追加タグ を挿入してください。

■テンプレート別挿入タグ一覧表 【商品詳細html】


シンプル(レッド)

<{$product.info}>

</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<table id="together" cellpadding="0" cellspacing="0"><tr><td>


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/4/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</td></tr></table>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


</div>


<!--トラックバック-->

<{if $trackback_url != ""}>


シンプル(ブルー)

<{$product.info}>

</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<table id="together" cellpadding="0" cellspacing="0"><tr><td>


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/7/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</td></tr></table>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


</div>


<!--トラックバック-->

<{if $trackback_url != ""}>


シンプル(グレー)

<{$product.info}>

</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<table id="together" cellpadding="0" cellspacing="0"><tr><td>


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/8/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</td></tr></table>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


</div>


<!--トラックバック-->

<{if $trackback_url != ""}>


シンプル(ラベンダー)

<{$product.info}>

</form>


<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<table id="together" cellpadding="0" cellspacing="0"><tr><td>


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/9/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</td></tr></table>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


</div>


<!--トラックバック-->

<{if $trackback_url != ""}>


ナチュラル

</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/1/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


<!--トラックバック-->

<{if $trackback_url != ""}>


フラワー

</form>

<br />

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/2/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


<!--トラックバック-->

<{if $trackback_url != ""}>


ブロック

<{$product.info}>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/3/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->

<{if $trackback_url != ""}>


ストライプ

</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<table id="together" cellpadding="0" cellspacing="0"><tr><td>


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>

<div class="together_list">

<div class="together_item" onmouseover="this.style.backgroundColor='#FFF'" onmouseout="this.style.backgroundColor=''">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a><br />

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/5/noimage.gif" /></a><br />

<{/if}>

<a href="<{$together_product[num].link_url}>"><{$together_product[num].name}></a>


</div>

</div>

<{/section}>

<br style="clear:both;" />


</td></tr></table>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->

<{if $trackback_url != ""}>


エレガント

</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<table width=100%"><tr><td>

<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/6/nowprinting_100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />

</td></tr></table>

</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->

<{if $trackback_url != ""}>


ミニ

<{/if}>


<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->

<{if $trackback_url != ""}>


ウッド

</form>


<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a><br />

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/11/now_s.gif" /></a><br />

<{/if}>


<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->

<{if $trackback_url != ""}>


アクア

</div>


<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together" style="margin:20px 15px 0px 15px;line-height:180%;">


<div class="title"><img src="http://img.shop-pro.jp/tmpl_img/12/icon_title.gif" width="12" height="12" alt="" />&nbsp;この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="item_box" style="float:left;margin:15px 10px 20px 0px;width:140px;">

<div class="item_thumbnail">

<{if $together_product[num].img_url != ""}><a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" class="top_item" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/12/now_printing.gif" width="100" height="100" border="0" class="top_item" /></a>

<{/if}>

</div>


<a href="<{$together_product[num].link_url}>"><{$together_product[num].name}></a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->


<!--トラックバック-->

<{if $trackback_url != ""}>


プレーン

</div>


<!-- 「この商品を買った人はこんな商品も買ってます」 -->

<{if $together_product_num != 0}>


<div id="together">


<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>


<{section name=num loop=$together_product}>

<div class="together_list">

<{if $together_product[num].img_url != "" }>

<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>

<{else}>

<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/13/now100.gif" /></a>

<{/if}>

<br />

<a href="<{$together_product[num].link_url}>">

<{$together_product[num].name}>

</a>

</div>

<{/section}>


<br style="clear:both;" />


</div>


<{/if}>

<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->

<{if $trackback_url != ""}>

【共通css】編集内容

以下のcssを、使用しているテンプレートの【共通css】内に追記します。

挿入箇所は、css内コメントテキストの「トラックバック」の項目を目安に挿入してください。


挿入するcssソースは、テンプレートによって異なります。
使用しているテンプレートをクリックすると、該当のソースが表示されます。

コピーしてご利用ください。


以上で挿入作業は完了です。