SKELETON CARTのAPIについて

version 2.1.4以降では、APIを利用して在庫数を含む商品データや、カートに入っている商品数を表示することができます。

動作サンプル

本マニュアルでは以下の点についてご案内します。

1. APIで表示できるデータ
2. APIの利用方法
3. カートに入っている商品数を表示
4. モーダルウィンドウの設置
5. 商品ページにAPIから得た商品データを表示する
6. 異なるドメインのHTMLで商品データを表示する

APIで表示できるデータ

APIを利用して以下のデータを商品ページなどに表示することができます。

• 商品ID
• 商品名
• 価格
• グループID
• 在庫数
• 重量
• カートに入っている商品数

APIの利用方法

SKELETON CARTのダウンロードファイルに同梱されているsample_item.htmlと同じように、APIとモーダルウィンドウを利用するには、以下の必要なJavaScriptを読み込んでください。

<!-- SKELETON CARTの動作に必要なJavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<!-- APIの動作に必要なJavaScript -->
<script>
SkeletonCartSettings = {
    api_base: 'api'
};
</script>
<script src="common/js/api.js"></script>
<script src="common/js/sc.js"></script>

なお、jQuery／Bootstrapのライブラリファイルは最新版のご利用をお勧めいたします。

SkeletonCartSettingsのパス変更について

商品ページ（HTML）に記載するapiへのパスは、そのHTMLから見た「SKELETON CARTのインストールディレクトリ＋api」となるよう修正する必要があります。

SkeletonCartSettings = {
<script>
    api_base: '../example/api'
};
</script>

カートに入っている商品数を表示

sample_item.htmlの右上にあるカートバッジ（カート内にある商品数を表示している部分）のように、カートに入っている商品数を表示するには、以下の部分をご利用ください。

<span id="item_count"></span>

モーダルウィンドウの設置

sample_item.htmlと同じように、「カートへ追加」ボタンをクリックした際にモーダルウィンドウを表示するには、以下のようにHTMLを記載してください。

formパーツの修正

以下のformパーツにclass="item"とdata-toggle="modal"data-target="#myModal"を追加してください。

formタグ部分
<form method="post" name="newdat" enctype="multipart/form-data" action="cart/add" class="item">

ボタン部分
<input type="submit" value="カートへ追加" class="btn btn-success" data-toggle="modal" data-target="#myModal">

モーダルウィンドウ部分のHTMLを追加

表示されるモーダルウィンドウは、sample_item.htmlの以下を参考にHTML内に追加してください。

<!-- Modal Widnow-->
    <!-- add cart -->
    <div class="modal" id="modal01">
        <div class="overLay modalClose"></div>
        <div class="inner">
            <i class="fa fa-check-circle-o" aria-hidden="true"></i>
            <p>商品をカートに追加しました！</p>
            <form>
                <input type="button" value=" カートを見る" onClick="location.href='cart/show'" class="btn btn-primary">
            </form>
            <a href="#!" class="modalClose"><span class="fa fa-times-circle" aria-hidden="true"></span> 閉じる</a>
        </div>
    </div>

    <!-- error -->
    <div class="modal" id="modal02">
        <div class="overLay modalClose"></div>
        <div class="inner">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
            <p>ERRORが発生しました<br>
            <span class="error-message">エラーが発生しました。</span></p>
            <a href="#!" class="modalClose"><i class="fa fa-times-circle" aria-hidden="true"></i> 閉じる</a>
        </div>
    </div>
<!-- /modal window-->

商品ページにAPIから得た商品データを表示する

商品ページに以下のHTMLを記載することで、商品データの中身を表示することができます。

また、上記のHTML部分や、データ取得後の処理はapi.jsのonLoadItem: function(data)部分で変更可能です。

例. 商品名を表示する部分を <span class="product-name"></span> に変更する

変更前（api.js 56行目）
var $name = $('span.item-name', this);

変更後
var $name = $('span.product-name', this);

上記のほか、onLoadItem: function(data)内を参考に処理を追加していただけます。
なお、APIでは以下のように商品データを得ることができますので、api.jsの内容とあわせてご確認ください。

{
    "success": true,
    "error": null,
    "result": {
        "id": "1",
        "name": "くまのぬいぐるみ",
        "price": 1500,
        "groupId": "1",
        "stock": "100000",
        "weight": "500"
    }
}

異なるドメインのHTMLで商品データを表示する

商品ページ（HTML）を設置するドメインと、SKELETON CARTを設置するドメインが異なる場合、以下のとおり設定することでAPIを利用できます。

init.phpの設定

初期設定ファイル init.php で以下の部分に「APIの利用を許可するドメイン」を記載してください。

// APIアクセスを許可するサイト
'allowed_origin' => 'https://www.example.com',

商品ページ（HTML）のSkeletonCartSettingsとJavaScriptのパス修正

SkeletonCartSettingsに「SKELETON CARTを設置したURL」を追加し、credentials: true,を追加してください。（※カンマの記載漏れに注意）
また、api.jsとsc.jsの読み込みパスも変更してください。

<!-- APIの動作に必要なJavaScript -->
<script>
SkeletonCartSettings = {
    api_base: 'https://example.com/cart/api',
    credentials: true,
};
</script>
<script src="https://example.com/cart/common/js/api.js"></script>
<script src="https://example.com/cart/common/js/sc.js"></script>

APIのご利用方法は以上となります。
sample_item.html, api.jsを参考にぜひご利用ください。