解説(7)Smartyテンプレートの作り方

ヤフーショッピングのwebサービスを使った商品検索ページ作り、最後は検索結果を表示するページのテンプレート作りの解説です。

 

手順としては、まず検索結果ページをイメージして結果を表示するためのHTMLファイルを作ってください。

 

スタイルシートを指定して使うこともできます。

 

全く普通のHTMLページでOKです。

 

既存のページのHTMLを改造するのが速いですその中に、商品情報の配列$list_yの要素を織り込んでいく形になります。

 

解説の前に、ソースコードをおさらいしておきます。

 

赤文字のところが、スマーティの変数タグになります。

 

★kekka.tplのソースコード（中身はHTMLファイル+Smarty変数）<
html>
<
head>
<
title>
{$keywords}:調査結果<
/title>
<
/head>
<
body>
<
h1>
{$keywords}の検索結果<
/h1>
<
p>
ページ更新日:{$smarty.now|date_format:'%Y/%m/%d'} <
/p>
<
!-- ■ここから商品検索結果を表示 -->
{foreach from=$list_y item=row }<
div>
<
p>
<
a href="{$row.url}" target="_blank">
<
img src="{$row.img}" border="0" alt="{$row.title}" />
<
/a>
<
/p>
<
p>
<
a href="{$row.url}" target="_blank">
{$row.title}<
/a>
<
/p>
<
p>
<
b>
{$row.price}円<
/b>
<
/p>
<
p>
{$row.caption} <
/p>
<
p>
{$row.Description} <
/p>
<
p>
【平均評価】：{$row.reviewAverage}（５点満点） <
/p>
<
p>
<
a href="{$row.url}" target="_blank">
詳しくはこちら<
/a>
<
/p>
<
/div>
{/foreach}<
!-- ■ここまで -->
<
br clear="all">
<
!-- WEBサービスのクレジット表示 -->
<
!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<
a href="http://developer.yahoo.co.jp/about">
<
img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" alt="Webサービス by Yahoo! JAPAN" border="0" >
<
/a>
<
!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
<
/body>
<
/html>
終わりの方の「クレジット表示」ですが、ヤフーのwebサービスを使って作ったページには、クレジット表示が義務づけられています。

 

→Yahoo!デベロッパーネットワーク・クレジット表示楽天のウェブサービスの場合も、クレジット表示が必要です。

 

→楽天webサービスのクレジット表示そのほかのウエブサービスでも、クレジット表示は必ずするようにしてください。