ECサイト構築に必要なAPIの設定を行う

Kurocoを利用してECサイトを作成する方法を、具体的な手順で説明します。 サイト構築には大きく3つの作業・設定が必要です。

1. 管理画面よりECの設定を行う
2. ECサイト構築に必要なAPIを設定する（本ページ）
3. フロントエンドを作成する

本チュートリアルでは、ECサイト構築の際に必要であるAPI設定の方法を説明します。

前提

ECの購入は、ログイン後に行う前提です。 そのため、ページではECのAPI設定と合わせて関連するログイン・プロファイル情報取得用のAPI設定も記載します。 ログイン実装の説明については本チュートリアルでは省略しますので、KurocoとNuxt.jsで、ログイン画面を構築するにてご確認ください。

エンドポイント一覧

今回作成するエンドポイントは下記です。

項目	エンドポイント パス	サンプルVueファイル
ログイン	login	-
注文者情報取得	profile	product_list.vue purchase.vue
商品一覧取得	product-list	product_list.vue
カートに追加	add-cart	product_list.vue
カートの内容を取得	cart-items/{ec_cart_id}	product_list.vue purchase.vue
商品を購入	purchase	purchase.vue

ヒント

サンプルVueファイルはこの後のフロントエンドを作成するで作成するページのVueファイル名になります。

APIの作成

まずはAPIを作成します。今回は、「EC」というAPIを作成します。 API画面より[新しいAPIを作成する]をクリックします。

下記入力し、[追加する]をクリックします。

項目	内容
タイトル	EC
版	1
ディスクリプション	EC用のAPI

エンドポイントの作成

次にエンドポイントを作成します。 先ほど作成したECのAPI画面より、[Configure Endpoint]をクリックします。

エンドポイント作成画面が表示されます。

こちらから、下記エンドポイントを作成します。

ログイン

ログイン処理を行います。

項目	内容
パス	login
カテゴリー	認証
モデル	Login
オペレーション	login_challenge

サンプルリクエスト

{
  "email": "test@example.co.jp",
  "password": "test_password",
  "login_save": 0
}

キー	説明
email	ログインするメンバーのメールアドレス
password	ログインするメンバーのパスワード
login_save	ログイン状態を保持するか否か（保持する場合は1を指定）

サンプルレスポンス

{
  "grant_token": "(省略)",
  "status": 0,
  "member_id": 123,
  "info": {
    "validUntil": 1633945168
  },
  "messages": [],
  "errors": []
}

注文者情報取得

ログイン後にカートIDやメンバー情報を取得します。

項目	内容
パス	profile
カテゴリー	認証
モデル	Login
オペレーション	profile
Parameters：basic_info	name1 name2 zip_code tdfk_cd address1 address2 address3 tel email

サンプルレスポンス

{
  "name1": "テスト",
  "name2": "太郎",
  "zip_code": "1234567",
  "tdfk_cd": "03",
  "address1": "住所(市区町村)",
  "address2": "丁目番地",
  "address3": "建物名",
  "tel": "09022223333",
  "email": "test@example.co.jp",
  "member_id": 123,
  "group_ids": {
    "102": "Login User"
  },
  "shash": "(省略)",
  "expiresAt": 1633945233,
  "ec_cart_id": 1000,
  "ec_point": 1,
  "ec_temp_point": 150
}

商品一覧取得　

本APIで商品のコンテンツデータ、商品アイテムデータが取得できます。 filter機能を利用した検索にも対応しています。

項目	内容
パス	product-list
カテゴリー	EC
モデル	ECProduct
オペレーション	list
Parameters：topics_group_id	（対象のコンテンツ定義のグループIDを指定）

ヒント

コンテンツ定義のグループIDは、Kuroco管理画面のコンテンツ定義より確認できます。

サンプルレスポンス

  "list": [
    {
      "product_id": 41205,
      "ymd": "1970-01-01",
      "subject": "PHP Development\t- Paperback",
      "link_url": "",
      "open_flg": 1,
      "inst_ymdhi": "2020-06-19 17:42:18.033674+09",
      "update_ymdhi": "2020-11-04 20:48:26.468659+09",
      "product_group_id": 11,
      "ext_col_01": "",
      "topics_id": 7,
      "combination_id": 235,
      "stock": 3978,
      "stock_unlimited": 0,
      "sale_limit": 0,
      "sale_unlimited": 1,
      "price_01": "0",
      "price_02": "2500",
      "set_product_ids": "",
      "release_ymdhi": null,
      "delivery_type": 255,
      〜略〜
      "product_data": {
        "topics_id": 7,
        "season": 2016,
        "ymd": 0,
        "contents_type": 6,
        "contents": "<img class=\"img-responsive\" src=\"/files/user/201512070955_1.jpg\"><br/>\r\n<br/>\r\n画面サイズを小さくするとレイアウトが変わります。",
        "subject": "PHP Development",
        "topics_flg": 1,
        "open_flg": 1,
        "regular_flg": 0,
        "inst_ymdhi": "2016-06-09T12:28:31+09:00",
        "update_ymdhi": "2020-06-19T17:09:39+09:00",
        "topics_group_id": 5,
        "ext_col_01": "",
        〜略〜
      },
      "combination_name": "Paperback",
      "class_options": {
        "16": {
          "ec_class_id": 16,
          "ec_class_option_id": 44,
          "label_nm": "Paperback"
        }
      },
      "order_list": []

カートに追加

カートIDを指定して商品をカートに追加します。

項目	内容
パス	add-cart
カテゴリー	EC
モデル	ECCart
オペレーション	add

サンプルリクエスト

{
  "ec_cart_id": 1000,
  "item": {
    "product_id": 41205,
    "quantity": 1
  }
}

キー	説明
ec_cart_id	カートID
item.product_id	商品アイテムID
item.quantity	個数

サンプルレスポンス

{
  "messages": [
    "新規追加しました。"
  ],
  "errors": []
}

カートの内容を取得

現在のカートの内容を取得します。

項目	内容
パス	cart-items/{ec_cart_id}
カテゴリー	EC
モデル	ECCart
オペレーション	details

サンプルレスポンス

{
  "messages": [],
  "errors": [],
  "details": {
    "ec_cart_id": 1000,
    "items": [
      {
        "product_id": 41205,
        "quantity": 1
      }
    ],
    "subtotal": 2500,
    "deliv_fee": 200,
    "total": 2700,
    "total_quantity": 1
  },
  "payment_list": {
    "59": {
      "payment_type": "Bank transfer",
      "payment_method": 4,
      "use_link_type": false,
      "use_token": false
    }
  }
}

ヒント

payment_list にはカートに入っている商品アイテムで共通に利用出来る支払方法の情報が格納されています。

商品を購入

カートに入れた商品を購入するためのAPIです。 各決済方法別にリクエストサンプルと注意事項を記載します。

項目	内容
パス	purchase
カテゴリー	EC
モデル	ECOrder
オペレーション	purchase

サンプルリクエスト

{
  "ec_cart_id": 0,
  "order_products": {},
  "product_id": 0,
  "quantity": 0,
  "ec_payment_id": 1,
  "discount": {
    "point": 0,
    "serial_code": "string"
  },
  "shipping_address": {
    "name1": "",
    "name2": "",
    "zip_code": "000",
    "tdfk_cd": "",
    "address1": "",
    "address2": "",
    "address3": "",
    "tel": ""
  },
  "sp_career_info": {
    "sp_career": 1,
    "open_id": "string",
    "return_url": "string",
    "cancel_url": "string",
    "other_url": "string",
    "outline": "string"
  },
  "orderer": {
    "name1": "string",
    "name2": "string",
    "zip_code": "000",
    "tdfk_cd": "01",
    "address1": "string",
    "address2": "string",
    "address3": "string",
    "tel": "string",
    "email": "email@example.com"
  },
  "card_token": "string",
  "order_note": "string",
  "validate_only": false
}

キー名	説明
ec_cart_id	カートID ログイン済みの場合はprofile APIから取得可能 未ログインの場合は0を指定
order_products	カートを利用せず、APIリクエスト時に購入商品を直接指定する場合に利用する(※)
product_id	カートを利用せず、APIリクエスト時に購入商品を直接指定する場合に利用する(※)
quantity	カートを利用せず、APIリクエスト時に購入商品を直接指定する場合に利用する(※)
ec_payment_id	支払い方法IDを設定してください 一般的には、商品に紐付く「販売方法」を取得後、その中から選択された対象の支払い方法に対応するIDを指定することになります
shipping_address	配送先情報 ログイン済みで未入力の場合はログイン社の情報が設定されます
orderer	注文者情報 ログイン済みで未入力の場合はログイン社の情報が設定されます
order_note	注文時メモ
validate_only	入力チェックのみを行い、実際の決済・購入処理は行いたくない場合はtrueを設定してください

以上でAPIの作成完了です。

ヒント

エンドポイント項目の詳細な説明は、エンドポイント 設定項目一覧を参照ください。

次に、フロントエンドを設定します。フロントエンドを作成するをご確認ください。