1. ecforce faq
  2. Tips
  3. 機能活用の例
機能活用の例

パーソナライズ回答後に商品、商品個数を変更する方法

ecforceでは、1d-colorと連携することによって パーソナライズ診断の回答によって選択商品と商品個数を変更することが可能になります。
この対応を行う事によってパーソナライズ回答後の商品案内がスムーズになります。
顧客（エンドユーザー）が行うステップを少なくする施策としてご検討いただける機能です。

使用する具体的なケース

以下の画面上でパーソナライズをポップアップもしくはiframe表示し、パーソナライズ回答後に商品、商品個数の変更がメソッド経由で自動的に選択できるようにする。

  • LP
  • サンクスオファー（サンクスアップセル）

  • SHOP > マイページ > 定期詳細 >商品情報の編集

※サンクスクロスセルは対象外

変更可能イメージ

メソッドを実行することによって、画面上以下の情報が1d-colorで変更できるようになります。

LP

__________2021-08-17_22.45.06.png

サンクスオファー

__________2021-08-17_22.45.51.png

SHOP

mceclip5.png

使用メソッド一覧

LP/サンクスオファー

  • プルダウン内にある商品の選択（LP）
window.ec_force.changeProductFromOtherService(product_id.toString());
  • プルダウン内にある商品の選択（サンクスオファー）
window.ec_force.changeProductFromOtherService(variant_id.toString());
  • プルダウン内にある個数の選択
window.ec_force.changeQuantityFromOtherService(quantity.toString());

SHOP > マイページ > 定期詳細 >商品情報の編集

  • [現在の商品情報]個数プルダウンを操作できるメソッド
window.ec_force.changeCurrentOrderItemQuantity(quantity);
  • [現在の商品情報]更新ボタンを押下できるメソッド
window.ec_force.clickUpdateButton();
  • [商品の変更]商品名商品のプルダウンを操作できるメソッド
window.ec_force.changeOrderItemAfterChange(variant_id);
  • [商品の変更]の個数プルダウンを操作できるメソッド
window.ec_force.changeOrderItemQuantityAfterChange(quantity);
  • [商品の変更]保存ボタンを押下できるメソッド
window.ec_force.clickSaveButton();

一部のパラメータの意味について

パラメータ 詳細
product_id 受注商品ID
variant_id SKU ID
quantity 商品個数

具体的な作成手順(サンプル)

LP/サンクスオファーでパーソナライズ回答後、商品と商品個数を変更する

  1. [1d-color] パーソナライズのアクションにメソッドを設定する(LP/サンクスオファー用)
    アクション管理の説明についてはこちらをご確認ください。
    アクション管理->該当のアクション->iframe用JSもしくはポップアップ用JSに以下のコードを追加してください。
    ※リダイレクトURLは任意のURLを入力してください。

    ■入力例
    window.ec_force.changeProductFromOtherService("4012".toString());
    window.ec_force.changeQuantityFromOtherService("4".toString());
    ※商品変更のみ、商品個数変更のみで選択したい場合は必要に応じて削除してください。

    例：product_idが4012の商品を選択 かつ 商品個数から4を選択
    mceclip0.png
    ※サンクスアップセルの場合はproduct_idではなくvariant_idですのでご注意ください。
    ※サンクスアップセルでは商品が変更できない仕様なので、個数は変更できません。

  2. [ecforce] パーソナライズを表示させるLPを作成する
    スタートガイドのSTEP1,2を参考にLPを作成する。
    サンクスオファーの説明についてはこちらをご確認ください。
    ※商品変更メソッドを使用する場合は、商品選択のプルダウンリストから選択できる商品が対象の為、2つ以上の商品がLPに紐付いている必要があります。

  3. [ecforce] LPテンプレート管理にてLPもしくはサンクスオファーのテンプレートにパーソナライズを表示させる

    LPテンプレートの説明はこちらをご確認ください。
    パーソナライズを表示させたいLPもしくはサンクスオファーのLPテンプレート管理->編集->ボディー編集にJSタグを追記して保存してください。

    1d-colorのドメイン・タグ発行にJSタグの表示例があり、そのままの状態のコピーでも使用可能です。
    内容についてはこちらをご確認ください。

    例：LPテンプレート管理->編集->ボディー編集で「__PAYMENT_FORM__」より上部にパーソナライズをiframe表示
    __________2021-08-16_19.05.26.png
    設定は以上です。
    LP/サンクスオファーで表示させたパーソナライズを回答後、作成したアクションが起動し、商品、商品個数がアクションで指定した内容で反映されるようになります。

マイページ(商品情報の編集)でパーソナライズ回答後、商品と商品個数を変更する

  1. [1d-color] パーソナライズのアクションにメソッドを設定する(マイページ用)
    前提：基本的にはLP/サンクスオファーと同様ですが、使用できるメソッドはマイページ用ですのでご注意ください。
    アクション管理の説明についてはこちらをご確認ください。
    アクション管理->該当のアクション->iframe用JSもしくはポップアップ用JSに以下のコードを追加してください。
    ※リダイレクトURLは任意のURLを入力してください。

    ■入力例
    ・(変更可能SKUが存在しない場合)に、商品個数を変更し、「更新」押下
    window.ec_force.changeCurrentOrderItemQuantity(5);
    window.ec_force.clickUpdateButton();
    ・(変更可能SKUが存在する場合)に、商品、商品個数を変更し、「保存」押下
    window.ec_force.changeOrderItemAfterChange(5347);
    window.ec_force.changeOrderItemQuantityAfterChange(2);
    window.ec_force.clickSaveButton();
    ※商品変更のみ、商品個数変更のみで選択したい場合は必要に応じて削除してください。
    ※「商品の変更」を利用する場合は購入した商品が「変更可能SKU」が紐付いている必要があります。詳細はこちらの「変更可能SKUグループ」の説明をご確認ください。

    例：商品個数から5を選択し、「更新」押下
    mceclip3.png

    例：variant_idが5347の商品を選択 かつ 商品個数から2を選択し、「更新」押下mceclip4.png

  2. [ecforce] マイページにパーソナライズを表示させる
    テーマ管理のコード編集の説明についてはこちらをご確認ください。
    テーマ管理の「商品情報の編集」でJSタグを貼り付けて保存してください。

    1d-colorのドメイン・タグ発行にJSタグの表示例があり、そのままの状態のコピーでも使用可能です。
    内容についてはこちらをご確認ください。

    例：定期詳細の見出し下にパーソナライズをiframe表示
    mceclip2.png

    設定は以上です。
    マイページで表示させたパーソナライズを回答後、作成したアクションが起動し、商品、商品個数、更新もしくは保存ボタン押下等アクションで指定した内容で反映されるようになります。

この記事の目次

このセクションの記事

機能活用の例

  • もっと見る