スピリッツオブゼロ > XSLTテンプレートキットをカスタマイズしよう PART2

ショッピングサイトを作ろう：AWS3.0編 -目次-

検索ボックスを変更する

XSLTテンプレキットでは二種類の検索ボックスを使用しています。トップページがBlended検索、それ以外がKeyword検索用のボックスです。

↓はBlended検索フォームです。

全てのジャンルから検索

これだとBlendedを使用すると検索結果から、見たいジャンルを選択しないといけないので二度手間だからいやだ！という方は以下のようなジャンルを選択して検索するタイプにも変更できます。

Keyword検索フォーム。

それぞれの商品ジャンルから検索

こっちのほうがすっきりとしているようにも思えますね。このジャンルを選んで検索のほうに「すべてから検索」も選択項目のほうに含ませたい。と思うかもしれませんがAWS3.0のXSLTテンプレキットだけでは実現できません。そちらに関しては一部CGIを使用することになります。ここでは触れません。

以下のBlended検索のフォーム部分

<div id="search">
  <form action="http://xml-jp.amznxslt.com/onca/xml3" method="get">
    <input type="text" name="BlendedSearch" value="" style="width:160px;" />
    <input value="search" type="submit" /><br />
    <input type="hidden" name="locale" value="jp"/>
    <input type="hidden" name="dev-t" value="【デベロッパ・トークン】"/>
    <input type="hidden" name="t" value="【アソシエイトID】"/>
    <input type="hidden" name="type" value="heavy"/>
    <input type="hidden" name="f" value="【blended_search.xslのURI】"/>
  </form>
</div>

以下のジャンル検索の検索フォームのコード。

<div id="search">
  <form action="http://xml-jp.amznxslt.com/onca/xml3" method="get">
    <input type="text" name="KeywordSearch" value="" style="width:160px;" />
    <select name="mode">
      <option value="books-jp">和書</option>
      <option value="books-us">洋書</option>
      <option value="electronics-jp">エレクトロニクス</option>
      <option value="kitchen-jp">ホーム＆キッチン</option>
      <option value="music-jp">ポピュラー音楽</option>
      <option value="classical-jp">クラシック</option>
      <option value="dvd-jp">DVD</option>
      <option value="software-jp">ソフトウェア</option>
      <option value="videogames-jp">ゲーム</option>
      <option value="toys-jp">おもちゃ＆ホビー</option>
    </select>
    <input value="search" type="submit" /><br />
    <input type="hidden" name="locale" value="jp"/>
    <input type="hidden" name="dev-t" value="【デベロッパ・トークン】"/>
    <input type="hidden" name="t" value="【アソシエイトID】"/>
    <input type="hidden" name="type" value="heavy"/>
    <input type="hidden" name="page" value="1"/>
    <input type="hidden" name="f" value="【keyword_search.xslのURI】"/>
  </form>
</div>

置き換えた際にデベロッパ・トークン、アソシエイトID、XSLのURIなどはご自分のものに書き換えてくださいね。自分の好きな検索フォームにしてください。二つともつけるも良し。

お薦めの点数を★の画像表示にしたい

テンプレキットではお薦めの点数表示はテキストで表示されます。

[DVD] スウィングガールズファースト＆ラストコンサート- 詳細 - 点数表示(テキスト)

人によって表記の好みがあると思うんですがテキスト表記よりイメージ表記のほうが見た目が良くなっていい！という方もいると思います。テンプレキットではユーザーレビューの点数表示は以下の部分です。(blended_search.xsl, browse_search.xsl, keyword_search.xsl)

<!-- レビュータイトルの表示 -->
<xsl:template match="CustomerReview">
  ・<xsl:value-of select="Summary"/> / 評価: <xsl:value-of select="Rating"/>点<br />
</xsl:template>

↑のコードの中の<xsl:value-of select="Rating"/>という個所でユーザーレビューの点数を表示をしています。画像表示に変更するにはこの部分を

<!-- レビュータイトルの表示 -->
<xsl:template match="CustomerReview">
  <xsl:call-template name="Review_Rating" /> <xsl:value-of select="Summary"/> <br />
</xsl:template>

↑のように変更します。変更は先ほどの<xsl:value-of select～ />というコードを<xsl:call-template name="Review_Rating" />に置き換えています。call-templateの名前を見て分かるようにレビューの点数を画像に置き換えるコードを呼び出します。その呼び出すコードは以下のコードになります。

<!-- レビュー点数の画像処理 -->
<xsl:template name="Review_Rating">
  <xsl:param name="average" select="Rating"/>
  <xsl:choose>
    <xsl:when test="$average &gt; 4.75">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-5-0.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; 4.25">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-4-5.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; 3.75">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-4-0.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; 3.25">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-3-5.gif"/>
      </xsl:when>
    <xsl:when test="$average &gt; 2.75">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-3-0.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; 2.25">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-2-5.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; 1.75">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-2-0.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; 1.25">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-1-5.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; .75">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-1-0.gif"/>
    </xsl:when>
    <xsl:when test="$average &gt; .25">
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-0-5.gif"/>
    </xsl:when>
    <xsl:otherwise>
      <img class="ave" src="http://images-jp.amazon.com/images/G/01/detail/stars-0-0.gif"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

このコードをテンプレの一番下の行の</xsl:stylesheet>の上にコピペしてください。貼る場所や変更箇所を間違えていなければ、これで点数表示を画像が表示されます。

スウィングガールズファースト＆ラストコンサート - 詳細 - 点数表示(画像)

asin_detail.xslは他のテンプレとコードが違って、分からないとか言う人もいるかとは思いますが基本は<xsl:value-of select="Rating"/>を<xsl:call-template name="Review_Rating" />に置き換えて呼び出すコードをコピペするだけです。失敗してもエラーになるだけなので、トライ＆エラーを何度も繰り返してみてください。そうするうちに何となく分かってくると思います。俺もそうでしたから。

星の画像がAmazonと同じものでつまんないという方は自分で自作してみてはいかがですか？スピードメーター風味とか面白いかもしれませんよ。

Wish List

Navigation