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

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

JavaScriptとカートの中身の設定

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

(WordPressのOliveCartテーマを使用する場合はこれは必要ありません。)

<!--カートphpのAjaxセット -->
<script type="text/javascript" src="http://www.cart-ya.com/olivecart/js/cart.js"></script>
<!--カートphpのURL セット -->
<script type="text/javascript"> Url=’http://www.cart-ya.com/’;</script>

各リンクURLは絶対参照で入力します。

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

<body onLoad="Onload()">

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

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

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

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

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

ページに貼り付ける「カートに入れる」ボタンのタグは、カートの管理ページ、(設置したURL)/olivecart/admin/index.php にアクセスして商品管理、登録一覧の商品のソースから「カートに入れる」ボタンのタグをコピーして、実際の商品ページに 貼り付けて使用します。在庫管理機能を使用する場合は、在庫管理タイプボタンから、タグをコピーしてください。

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