- coneco.net >
- ウィジェットアドバンス >
- HTMLソース解説
HTMLソース解説
表示例Dのソース解説を行います。
1.全体テンプレート定義
1
2
<div class="coneco_widget_adv_area" id="widget_sample1"
title="category_id=0;count=3;description_length=55;flex=1;load_before_function=loadBeforeSample1;show_before_function=showBeforeSample1;show_after_function=showAfterSample1">
coneco_widget_adv_areaというclass名を持つDIV要素が、coneco.netウィジェットアドバンス（以下ウィジェット）のテンプレートとして変換対象となります。title属性で各種設定を行うことが出来ます。→title属性に指定できる設定項目一覧
変換後にこの要素のstyleにdisplay:blockが設定されて表示状態になります。変換前のテンプレートが表示されないよう、事前にdisplay:blockをstyle指定しておく事をおすすめします。
また、idを指定しておくと、独自の機能を追加する事ができます。
9 <select class="crwa_category_selecter" size="10"></select>crwa_category_selecterというclass名を持つSELECT要素があると、指定したカテゴリ配下のカテゴリ一覧が展開されます。通常のSELECT要素と同様に、size属性でサイズを指定できます。 自由に記述できます。
12
：
35
<div class="crwa_items_list">
：
</div>crwa_items_listというclass名を持つ要素が、商品テンプレートとして変換対象となります。検索結果が複数の場合、この要素の内部（上記HTMLソース内の水色で表示されている範囲）が繰り返して出力されます。
38 <a class='crwa_category_anchor' target='_blank'>coneco.netでこのカテゴリの商品を見る</a>crwa_category_anchorというclass名を持つA要素は、表示中のカテゴリページへのURLが設定されます。
63<script type="text/javascript" src="http://www.coneco.net/widget/coneco_widget_adv.js" charset="utf-8"></script>テンプレートの後でJavaScriptを定義する事で、変換が実行されます。1ファイル内に複数指定する必要はなく、この定義より前にあるテンプレートが全て変換対象となります。
2.商品テンプレート定義
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class='item_body'>
<p class='item_title'>
<span title='全商品中 %%rank%%位'>%%category_rank_img%%</span>
<a href='%%url%%' target='_blank'>%%com_name%%</a>
/ %%maker%%
</p>
<div class="item_info">
<a href='%%url%%' target='_blank' title='%%com_name%%'><img src='%%s_img_url%%' class='com_image %%no_image%%' align='left' border='0'></a>
<p class="price">
<a href='%%url%%' target='_blank'><span style='%%buy_price_style%%'>最安値:</span>
<span style='%%buy_price_style%%'>¥%%lowest_price%%</span></a>
</p>
<p class="description">%%description%%</p>
</div>
<div class='rating'>
<p>
<a href='%%review_url%%' target='_blank' title='%%com_name%%のレビューを見る'><img src='%%rating_img%%' alt='満足度：%%rating%%' border='0' height='12' /></a>
</p>
</div>
</div>
12行目で定義した商品テンプレートの内部では、定められたキーワードが検索結果の各情報に変換されて出力されます。→テンプレート内で使用できる変換キーワード一覧
3.ページ遷移機能
38
39
40
41
42
43
<a class="page_button crwa_move_first">≪</a>
<a class="page_button crwa_move_prev">＜</a>
<a class="crwa_current_page" style="font-weight:bold;"></a>
<a class="crwa_max_page" id="sample1_max_page" style="font-size:80%;color:#aaa"></a>
<a class="page_button crwa_move_next">＞</a>
<a class="page_button crwa_move_last">≫</a>
ページ遷移用のボタンを配置しています。
4.ユーザー独自機能追加
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script type="text/javascript">
<!--
function loadBeforeSample1(){
// alert("beforeSample1()");
return true;
}
function showBeforeSample1(json){
// alert(json.Header.Page.PageCount);
return true;
}
function showAfterSample1(json){
document.getElementById("sample1_max_page").innerHTML = "/"+document.getElementById("sample1_max_page").innerHTML;
return true;
}
// -->
</script>
2行目で設定したload_before_function（検索前に呼び出される関数名）、show_before_function（検索結果表示前に呼び出される関数名）、show_after_function（検索結果表示後に呼び出される関数名）を使って、それぞれのタイミングに処理を追加します。
load_before_functionにはloadBeforeSample1が、show_before_functionにはshowBeforeSample1が、show_after_functionにはshowAfterSapmle1が指定されていますので、それぞれの関数を作成し、処理を記述します。
loadBeforeSample1()には、ここでは処理を記述していません。
showBeforeSample1()には、ここでは処理を記述していません。コメント部分を有効にすると、検索結果のページ数を表示します。
showAfterSample1()では、総ページ数の前に"/"を付加しています。
show_before_functionおよびshow_after_functionでは、ウェブサービスの検索結果がJSON形式で渡されます。詳しいデータの構造に関しては、coneco.net WebServicesのドキュメントを参照してください。
それぞれの関数は、復帰値としてtrueを返す必要があります。falseを返した場合、それ以降の処理は実行されません。
