ポイント使用フローに所持ポイントが0以下にならない制御を追加する

この記事では、SPIRALでの顧客マスタにおける所持ポイント管理と、商品交換フォームを通じたポイント使用フローを紹介します。
また、顧客マスタの所持ポイントがマイナスにならないように、データベース（DB）側とページ上でのエラー表示設定についても説明します。

DBについて

▼顧客DB フィールド一覧

項目名	フィールドタイプ	DB上で必須な属性
メールアドレス	メールアドレス	必須制約：ありユニーク制約：あり	ログインIDとなる想定
パスワード	パスワード	-	-
所持ポイント	整数	-	最小値：0

※その他フィールドは適宜設定してください。
▼商品マスタDB フィールド一覧

項目名	フィールドタイプ	DB上で必須な属性
商品名	テキスト	-	-
単価	整数	-	-

※その他フィールドは適宜設定してください。
▼ポイント使用DB フィールド一覧

項目名	フィールドタイプ	DB上で必須な属性
商品ID	参照フィールド	参照先：商品マスタDB	-
顧客ID	参照フィールド	参照先：顧客DB	-
個数	整数	-	-
単価	整数	-	-
使用ポイント	整数	-	-

※その他フィールドは適宜設定してください。

サイトについて

基本的にはビジュアルデザインで大丈夫ですが、カスタマイズする際は適宜ソースデザインにて編集ください。

・顧客DBから認証エリアを作成し、レコードアイテム用のページを設定してください。
・商品マスタDBからレコードリストを作成し、その遷移先を認証エリア内のレコードアイテムページに設定してください。
・ポイント使用DBから登録ブロックを作成し、個数フィールドを入力必須に設定してください。
・商品IDと顧客IDを自動登録で設定し、レコードアイテムページにレコードアイテムブロックと登録ブロックを設置してください。

DBトリガについて

ポイント使用DBにて、使用ポイントが「単価×個数」となるようにトリガを設定してください。また、使用ポイントを顧客DBの所持ポイントから減算するトリガも設定してください。

ポイント使用DB　登録トリガ　レコードアクション（１つ目）
　　表示名：商品マスタDBから単価を取得して格納
　　アクション先：自DB
　　アクション処理（＋ボタンを押して設定します）
　　　処理名：FetchAndStoreUnitPrice
　　　発動条件：指定する
　　　　経路条件：一部の経路（フォーム）
　　　処理タイプ：更新
　　　処理マッピング
　　　　アクション先DBフィールド：単価
　　　　格納値：商品ID（商品マスタDB参照） > 単価
ポイント使用DB　登録トリガ　レコードアクション（２つ目）
　　表示名：使用ポイントを登録
　　アクション先：自DB
　　アクション処理（＋ボタンを押して設定します）
　　　処理名：CalculateAndPoints
　　　発動条件：指定する
　　　　経路条件：一部の経路（フォーム）
　　　処理タイプ：更新
　　　処理マッピング
　　　　アクション先DBフィールド：使用ポイント
　　　　格納値：
　　　　　左右矢印のアイコンをクリックし、フィールド値設定から関数設定に切り替えます。
　　　　　計算機のアイコンをクリックし、関数設定画面を呼び出します。
　　　　　DBフィールド一覧からフィールドをクリックして、
　　　　　上部の欄に式（単価 * 個数）を設定します。
　　　　　式：単価 * 個数（例：@pointUseDB.itemValue * @pointUseDB.itemCount）

ポイント使用DBに格納された使用ポイントを顧客DBの所持ポイントから減算するトリガを設定してください。

ポイント使用DB　登録トリガ　レコードアクション（３つ目）
　　表示名：所持ポイントから使用ポイント（商品単価×個数）を減算
　　アクション先：他DB(顧客DB)
　　アクション処理（＋ボタンを押して設定します）
　　　処理名：SubtractUsedPoints
　　　発動条件：指定する
　　　　経路条件：一部の経路（フォーム）
　　　処理タイプ：更新
　　　処理マッピング
　　　　アクション先DBフィールド：所持ポイント
　　　　格納値：
　　　　　左右矢印のアイコンをクリックし、フィールド値設定から関数設定に切り替えます。
　　　　　計算機のアイコンをクリックし、関数設定画面を呼び出します。
　　　　　DBフィールド一覧からフィールドをクリックして、
　　　　　上部の欄に式（所持ポイント - 使用ポイント）を設定します。
　　　　　式：所持ポイント - 使用ポイント（例：@userDB.point - @pointUseDB.usedPoint）

登録フォームJavaScirptについて

顧客DBの所持ポイントの最小値を0に設定することで、
フォームから所持ポイント以上の使用申請があった場合にエラーを発生させ、
不要なポイント使用を防ぎます。
しかし、このエラーはフォーム送信後に表示されるため、
JavaScriptを使用して送信時にフロントエンドでアラートを表示させることで、
お客様の不要なページ遷移を防ぎます。

HTMLとJavaScriptのコードは、登録ブロックのソースデザインに設置し、
必要に応じてDBのIDやフィールドのIDに書き換えてください。

HTML編集

<div id="itemPoint" th:data-message="|${dbs[XXXXX].record[X]}|"></div>
<div id="customerPoint" th:data-message="|${siteClient.record[X]}|"></div>

こちらのHTMLを登録ブロックをソースデザインに切り替えてどこかに設置してください。
※${dbs[XXXXX].record[X]}の部分は、商品マスタDBのIDと単価フィールドのIDに書き換えます。
dbs[XXXXX]はDBのID、record[X]はフィールドのIDです。
※${siteClient.record[X]}の部分は、顧客DBの所持ポイントのフィールドのIDに書き換えます。

JavaScirpt

document.addEventListener('DOMContentLoaded', function() {
    var nextButton = document.querySelector('.sp-form-next-button');

    // ボタンが存在するか確認
    if (nextButton) {
        nextButton.addEventListener('click', function(event) {
            var itemCount = document.querySelector('input[name="XXXXXXX"]').value;
            var itemPoint = parseInt(document.getElementById('itemPoint').getAttribute('data-message'), 10);
            var customerPoint = parseInt(document.getElementById('customerPoint').getAttribute('data-message'), 10);

            var requiredPoints = itemPoint * itemCount;
            if (requiredPoints > customerPoint) {
                alert('所持ポイントが足りていません');
                event.preventDefault();
            }
        });
    } else {
    }
});

こちらのJavaScriptを登録ブロックのJavaScriptタブに設置してください。
「input[name="XXXXXXX"]」のXXXXXXXを、「個数」フィールドの識別名に変更してください。

開発情報・ナレッジ