カゴだけmakeshopの基本と応用
2019.06.07
カゴだけmakeshopとは
makeshopのAPIを使って外部サイトや独自ページなどからmakeshopの買い物かごに購入データを渡す仕組みが、カゴだけmakeshopです。
少し難しいので具体的に言うと、makeshop以外で作成したLPやキャンペーンサイト等で商品購入ボタンをクリックすると、makeshopの買い物かごにデータが入り、makeshop内で購入させる仕組みとなります。
これにはmakeshopのAPIを使うのですが、ここでAPIとはmakeshopと外部サイトをつなぐ窓口のようなものであると考えてください。
商品購入ボタンが押されたことがmakeshopに信号が送られ、makeshopでは送られた信号に対して専用の窓を開けてmakeshop内で処理して結果を表示するといった仕組みです。
この一連の流れは、パチンコ屋で玉やコインを景品に交換し、交換所に持って行って交換所の商品棚に景品を置くと、現金になって返ってくるという不思議なシステムのようなものであると考えていただいて良いと思います。
かごだけmakeshopの使い方
<form action = "ドメイン/api/basket/add.html" method="post"> <input type="hidden" name="brand_info" value="1,000000000001,1"> <input type="submit" value="購入する"> </form>
このhtmlの内容を簡単に説明すると、/api/basket/add.htmlの仕組みを利用して、postでmakeshop側にデータを送るというもの。先ほどからの説明と全く同じですね。
またvalueの値については、最初の1がシステム商品コードなのか、独自商品コードなのかを指し、次の13桁が商品コード、最後の1が数量になります。
カゴだけmakeshopの数量を変更する
例えば数量を変更する場合は、jqueryUIのspinnerや、javascript初心者向けサイトにあるようなコードを利用すれば、次のようなコードが出来上がります。
<input type="button" name="spinner_up" class="spinner_up" value="" onclick="javascript:spinner('up');" value="＋">
<input class="kazu" type="text" name="quantity" value="1" tabindex="1" id="product1_amount">
<input type="button" name="spinner_up" class="spinner_down" value="" onclick="javascript:spinner('down');">
<script>
function spinner(counter){
var step = 1;
var min = 1;
var max = 100;
var kazu = $(".kazu").val();
var kazu = parseInt(kazu);
if (counter == 'up') { kazu += step; };
if (counter == 'down') { kazu -= step; };
if ( kazu < min ) { kazu = min; };
if ( max < kazu ) { kazu = max; };
$(".kazu").val(kazu);
$('.kazu').attr('value',kazu);
var m = $(".kazu").val();
var n = "1,000000000060,"+m;
$("#product1").attr("value", n);
}
</script>
<div class="getbasket">
<form action="/api/basket/add.html" method="post">
<input type="hidden" name="brand_info" value="" id="product1">
<input type="image" src="">
</form>
</div>
上記コードでは、3行目までが購入数量を選択するパーツです。「＋ ５ －」のようなイメージですね。
「＋」をクリックすると数が6,7,8と増え、「-」をクリックすると、5,4,3と数が減ってゆくという簡単な仕組みです。
6~18行目では数値の増減、22行目で値を作成して、29行目のvalueに値を代入という仕組みになっています。
makeshop API(/api/basket/add.html)の活用例
makeshopサポートではこのようにさらりと説明を行っていますが、実はこれが解放されたことは、個人的にはmakeshopのレスポンシブ化やwovn.ioを利用したmakeshopの多言語化よりも大きなニュースです。
先ほどは具体例を挙げて簡単に説明しましたが、要は買い物かごに入れる方法が解放されたという事です。ですのでこれにより例えば次のような購入方法も導入が可能になりました。
jsなどを利用してユーザは商品を選び、全ての商品選択が完了したら商品データを作成し、決済させるという流れです。
また、これはデザインにも応用が可能であり、ボタンクリック以外の方法でも商品が購入できるようになったと考えて良いかと思います。
実装にご興味のある方は、実際に任意のmakeshopのサーバで動くことを確認していただく事も可能で、200万くらいでプログラムを販売します。いかがでしょうか。なんちゃって。そのうちGithub上で公開するかも。