掲載誌情報
掲載誌 Web Creators 2002/03
タイトル ColdFusion入門/ショッピングサイト構築 第4回
第1回 第2回 第3回 第4回

2) ショッピングカート内容の確認
    ここから、「ショッピングカートを見る」と、「ショッピングカートに入れる」による各遷移に共通の処理について説明する。
ショッピングカートのデータを変更した後のショッピングカートの内容を確認する。ショッピングカート管理テーブルから注文個数を取得し、商品マスタから商品コード、商品名、販売価格を取得するクエリは次のようになる。
cart.cfm 115行目〜119行目
<cfquery name="M_CartQry" datasource="shopping">
 SELECT M_Item.ItemID, M_Item.ItemCode, M_Item.ItemName, M_Item.Price, T_Cart.ItemPeaces
 FROM M_Item INNER JOIN T_Cart ON M_Item.ItemID = T_Cart.ItemID
 WHERE CartID = '#Cookie.CreateUUID#'
</cfquery>
上記のクエリ「M_CartQry」をcfoutpuタグを使用して出力してみよう。

cfoutputタグを使用してcfqueryの検索結果を表示する方法は、第2回で説明済のため省略する。
モックアップ(cart.html)の137行目〜206行目の部分をcfmで記述すると、cart.cfmの355行目〜378行目となる。

ポイントは下記の5点である。
(1) ショッピングカート内容を表示するタグを、cfoutputタグで囲む。
cart.cfm 355行目、378行目
(2) 表示項目を変数に置き換える。
cart.cfm 357, 358, 359行目
(3) 金額を表示するために、NumberFormat関数を使用する。
cart.cfm 359行目
(4) 注文個数のテキストエリアに変数を表示する。
cart.cfm 362行目
(5) #を使用している部分は、##に変更する。
※(5)はよく忘れがちなので、気をつけよう。
<cfoutput query="M_CartQry">
<tr>
 <td bgcolor="##FFFFFF" nowrap><span class="onedown">#M_CartQry.ItemCode#</span></td>
 <td bgcolor="##FFFFFF"><span class="base">#M_CartQry.ItemName#</span></td>
 <td align="right" bgcolor="##FFFFFF"><span class="base">#NumberFormat(M_CartQry.Price)#</span></td>
 <td bgcolor="##FFFFFF">
  <input type="text" maxlength="3" name="ItemPeaces" size="3" value="#M_CartQry.ItemPeaces#">
 </td>
 <td align="center" bgcolor="##FFFFFF">
  <a href="javascript:imgSubmit(#M_CartQry.ItemID#,'Delete');">
   <img src="common/image/delete_btn.gif" width="35" height="23" border="0" name="delete_1" alt="取消" >
  </a>
 </td>
</tr>
</cfoutput>

ショッピングカートに入っている商品の合計金額を取得する。購入金額小計を別のフィールド名「price」、消費税を別のフィールド名「tax」 、購入金額合計を別のフィールド名「total」 として取得するSQLをcfqueryタグを用いて記述する。
<cfquery name="Total_M_CartQry" datasource="shopping">
 SELECT SUM(M_Item.Price*T_Cart.ItemPeaces) as price,
  Int((SUM(M_Item.Price*T_Cart.ItemPeaces))*0.05) as tax,
  Int((SUM(M_Item.Price*T_Cart.ItemPeaces))*1.05) as total
 FROM M_Item INNER JOIN T_Cart ON M_Item.ItemID = T_Cart.ItemID
 WHERE CartID = '#Cookie.CreateUUID#'
</cfquery>

クエリ「 Total_M_CartQry」をcfoutpuタグを使用して出力してみよう。
モックアップ(cart.html)の215行目〜232行目の部分をcfmで記述すると、cart.cfmの393行目〜412行目となる。
ここでの出力に関してのポイントは下記の2点である。
(1) ショッピングカート内容を表示するタグを、cfoutputタグで囲む。
cart.cfm 393行目、412行目
(2) 表示項目を変数に置き換え、 NumberFormat関数を使用して表示する。
cart.cfm 401, 403, 405行目
<cfoutput query="Total_M_CartQry">
 <td align="right">
  <table border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td bgcolor="##FF9900">
     <table border="0" cellpadding="4" cellspacing="1">
      <tr>
       <td bgcolor="##FF9900">
        <img src="common/image/subtotal.gif" width="39" height="11" border="0" alt="小計"></td>
       <td bgcolor="##FFFFFF">
        <span class="base">#NumberFormat(Total_M_CartQry.price)#円</span></td>
       <td bgcolor="##FF9900">
        <img src="common/image/tax.gif" width="39" height="11" border="0" alt="消費税"></td>
       <td bgcolor="##FFFFFF">
        <span class="base">#NumberFormat(Total_M_CartQry.tax)#円</span></td>
       <td bgcolor="##FF9900">
        <img src="common/image/total.gif" width="39" height="11" border="0" alt="合計"></td>
       <td bgcolor="##FFFFFF">
        <span class="base"><b>#NumberFormat(Total_M_CartQry.total)#円</b></span></td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </td>
</cfoutput>

BACK NEXT
PAGETOP
CLOSE