リアルタイムショッピングカートの配置

Open-ECでは、Ajaxを利用したリアルタイムで何がカートに入っているか分かりやすく表示する機能がついています。

ショッピングカートの配置方法

ショッピングカートは、Ajaxのスクリプトによって簡単に配置できるようになっています。

ショッピングカートの配置用Divタグ

ショッピングカートを「[ALINOUS_HOME]/templetes/index.html」のHTMLに配置する為には、次のようなコードを書きます。

<!--買い物かご-->
<div id="bar_cart_head">
<h2>買い物カゴ</h2>
</div>
<div class="side_box" id="cart">
<script type="text/javascript">loadCart()</script>
</div>
<!--買い物かご END-->

ここには、２つのdivタグがあります。そのうち下の方のidの値が「cart」のdivタグの方が、ショッピングカートの中身が読み込まれるdivタグです。このような記述を行うことによって、JavaScriptのloadCart()がdivタグの中にカートの中身を表示するHTMLをロードします。

カートの中身のHTML

カートの中身のHTMLは、「ALINOUS_HOME/parts/cart/index.html」にあります。単純なHTMLですので、特に説明することもなく分かってしまうと思います。もし、分からない方がいらっしゃった場合には、チュートリアルの「ニュース表示の変更」のページを読んでみてください。

[↑ページトップ]