商品個別ページの作成（sample01.html)

サンプル01（sample01.html)を参考に、Ajaxを使用したカートの中身が見えるページの作成方法です。

JavaScriptとカートの中身・ユーザーログインの設定

（１）まず、商品ページのヘッダータグに次のJavaScriptを埋め込みます。

<!--カートphpのAjaxセット -->
<script type="text/javascript" src="http://www.cart-ya.com/cart/js/cart.js"></script>
<!--カートphpのURL セット -->
<script type="text/javascript"> CartUrl=’http://www.cart-ya.com/cart/cart/cart.php’;</script>
<!--マイページphpのURL セット -->
<script type="text/javascript"> MypageUrl=’http://www.cart-ya.com/cart/mypage/index.php’; </script>


http://www.cart-ya.comはご利用のドメイン名に変更してください。URLは絶対参照で入力してください。

（２）次のbodyタグにJavaScriptをよみこむ次の要素を入れます。

<body onLoad="Onload()">

（３）サイドバーに表示されているカートの中身の表示部分のタグを入れます。

<div id="maincart"></div>部分のデザインはOliveCartのテンプレートを変更します。Cartフォルダの中のstep01.htmlファイルです。（CSSファイルはCartフォルダの中のCSSフォルダの中です。）

id名は変えずに"maincart"と入れてください。

<div id="maincart"></div>

（４）サイドバーに表示されているユーザーログイン表示部分のタグを入れます。

id名は変えずに"userlogin"と入れてください。

<div id="userlogin"></div>

商品選択部分、カートのボタン

例）登録商品番号 0001が登録してある場合

（１）購入数を選択できるselectタグを入れる。

ライセンス数が選択できるselectタグを入れます。

<p>購入数：
<select id="0001"><!--商品ナンバーを設定 [id="0001"]-->
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>

（４）カートにいれるボタンを設定

●インプットタグで設定する場合

<p><input type="button" value="カートに入れる" onclick="postIn(’0001’);"/>
<!--商品ナンバーを設定 postIn(’0001’)--></p>

●画像でカートに入れるボタンを設定する場合

<a href="javascript:void(0)" onclick="postIn(’(0001)’);">
<img src="http://www.cart-ya.com/image/cart.gif" width="135" height="32"></a>

（５）設置例まとめ

●カートに入れるボタンは画像を使用する場合

<p>ライセンス数：
<select id="0001"><!--商品ナンバーを設定 [id="0001"]-->
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>

<a href="javascript:void(0)" onclick="postIn(’(0001)’);">
<img src="http://www.cart-ya.com/image/cart.gif" width="135" height="32"></a>

Cart屋.comの更新情報などをお届けするメールマガジン。ぜひご登録ください！