SOY Shopで非同期で商品をカートに入れたい１

表題の通り、SOY Shopで非同期で商品をカートに入れたいという要望がありましたので、簡単ではありますが、実装方法を説明します。

実装方法の前に非同期の説明

俗にいうAjax(Asynchronous JavaScript + XML)というやつですね。

Ajax - Wikipedia

Webアプリにおける同期というのは、SOY Shopのサイトを例にとって説明すると、

soyshop_insert_cart

画面右下にあるオレンジのカートに入れるボタンを押したら、

soyshop_insert_cart2

カートのページに飛び(遷移し)つつ、カートに指定の商品が入った状態となっている。

一方非同期というのは、

soyshop_insert_cart3

カートに入れるボタンを押したら、カートの画面には遷移せず、同じ画面のまま上のカートの数字が変更されることを言う。

それでは、非同期のカートボタンを設置してみる。

まずはHTMLのどこでも良いので、下記のJavaScriptのコードを用意する。

※ショップIDはshopで話を進めます。

<script>
function add_item(id,price){
	xhr = new XMLHttpRequest();
	xhr.open("GET","/shop/cart/operation?a=add&count=1&item=" + id);
	xhr.send();
}
</script>

これでカートボタンに商品IDを指定して送信という機能ができました。

指定しているURLはSOY Shopのカートに商品を入れるためのURLです。

/ショップID/カートのURL/operation?a=add&count=1&item=1の様なURLで、GETのaの値は商品をカートに入れるという指示、countはカートに入れる時にいくつ入れるか？

itemは商品IDを指定します。

続いて、

soyshop_insert_cart4

カートに入れるボタンを同期から非同期のコードに書き換えます。

カートに入れるボタンを探し、下記の様に修正する。

<input type="image" src="/shop/themes/common/images/btn_cartin_off.png" width="152" height="57" alt="カートに入れる">

から

<a href="javascript:void(0);" onclick="add_item(<?php echo $item["id"]?>,<?php echo $item["item_price"];?>);">
<img src="/shop/themes/common/images/btn_cartin_off.png">
</a>

の様に書き換えます。

修正後にカートに入れるボタンをクリックしてみると、カートページに遷移されなくなっています。

カートに入れるボタンをクリックした後、

soyshop_insert_cart5