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

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

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

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

前提

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

エンドポイント一覧

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

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

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

APIの作成

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

エンドポイントの作成

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

ログイン

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

Image (fetched from Gyazo)

項目内容
パス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やメンバー情報の取得を実行します。

Image (fetched from Gyazo)

項目内容
パスprofile
カテゴリー認証
モデルLogin
オペレーションprofile
Parameters:basic_infoname1
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機能を利用した検索にも対応しています。

Image (fetched from Gyazo)

項目内容
パス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を指定して商品をカートに追加します。

Image (fetched from Gyazo)

項目内容
パス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": []
}

カートの内容を取得

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

Image (fetched from Gyazo)

項目内容
パス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です。 各決済方法別にリクエストサンプルと注意事項を記載します。

Image (fetched from Gyazo)

項目内容
パス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の作成完了です。

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

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