比較バージョン

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。
目次
minLevel1
maxLevel7

...

futureshopのレイアウトパーツの表示条件にて会員情報連携を設定しています。

留意事項

futureshopの表示条件の機能を活用してログインユーザー未ログインユーザーのWhatYaタグの出し分けを行っています。以下の点をご理解の上ご利用をご検討いただけますと幸いです。

  1. ショップテーマのレイアウト部分を触ることになりますので、作業にご不安の企業様はベンダーさまにご依頼ください。

  2. 一括での導入ができない(手作業で必要ページにタグを入れる)部分になりますので、
    ・トップページ
    ・商品一覧(商品グループ・バンドル商品・クーポン対象商品)
    ・商品検索結果一覧
    ・商品詳細
    ・ショッピングカートページ
    ・会員登録完了
    ・メールマガジン申込完了
    ・注文完了ページ 
    上記リストでチェックを行いながら実施をお願いします。

...

以下埋め込みタグのサンプルです。
※以下の埋め込みタグはあくまでもサンプルとなりますので、変数やScriptのサポートは出来ませんのでご了承下さい。
※全ページに表示したい場合は、共通出力へ、特定のページに表示したい場合は、指定の項目へ以下のスクリプトを入力してください。
https://whatya.solairo-api.com/XXXX/chat.jsXXXX部分は御社の環境へ書き換えをお願いいたします。

コード ブロック
<script>
document.addEventListener("DOMContentLoaded", function () {
    let scriptLoaded = false;
    let retryCount = 0; // 再試行の回数
    const maxRetries = 10; // 最大再試行回数
    const retryInterval = 500; // 再試行間隔(ミリ秒)

    // スクリプトを読み込む関数
    function loadChatScript(attributes = {}) {
        if (scriptLoaded) {
            console.log("スクリプトはすでに読み込まれています");
            return;
        }

        const script = document.createElement("script");
        script.src = "https://whatya.solairo-api.com/XXXX/chat.js";

        // 属性を動的に追加
        for (const [key, value] of Object.entries(attributes)) {
            script.setAttribute(key, value);
        }

        script.onload = function () {
            console.log("スクリプトが正常に読み込まれました");
        };

        script.onerror = function () {
            console.error("スクリプトの読み込みに失敗しました: " + script.src);
        };

        document.body.appendChild(script);
        scriptLoaded = true;

        console.log("スクリプトタグが追加されました:", script.outerHTML);
    }

    // 会員情報をチェックし、スクリプトをロードする
    function checkAndLoadScript() {
        const memberInfo = document.querySelector(".member-info");

        if (!memberInfo) {
            console.error(".member-info が見つかりません");
            return;
        }

        const memberId = memberInfo.getAttribute("data-member-id");
        const lastName = memberInfo.getAttribute("data-member-lastname");
        const firstName = memberInfo.getAttribute("data-member-firstname");
        const nickname = memberInfo.getAttribute("data-member-nickname");

        // テンプレート文字列が残っている場合は未置き換えと判定
        if (
            [memberId, lastName, firstName, nickname].some(value =>
                value && value.includes("{@")
            )
        ) {
            console.log("置き換えが未完了です。再試行を行います...");
            if (retryCount < maxRetries) {
                retryCount++;
                setTimeout(checkAndLoadScript, retryInterval);
            } else {
                console.warn("置き換えが完了しないため、未ログイン状態として扱います");
                loadChatScript(); // 未ログイン時のスクリプトを読み込み
            }
            return;
        }

        // `guest`, `null`(文字列)、または `null` の場合は未ログインと判定
        if (memberId === "guest" || memberId === "null" || memberId === null) {
            console.log("未ログインユーザーと判定。デフォルトスクリプトを読み込みます");
            loadChatScript();
            return;
        }

        // ログイン済みの場合のスクリプトを読み込み
        console.log("ログイン済みと判定。スクリプトを読み込みます");
        loadChatScript({
            "data-cs-id": memberId,
            "data-cs-secret": `${lastName} ${firstName}`,
            "data-cs-user_name": `${lastName} ${firstName}`,
            "data-cs-nickname": nickname,
        });
    }

    // MutationObserverで置き換えを監視
    const observer = new MutationObserver(() => {
        console.log("DOM変更を検出しました");
        checkAndLoadScript();
        observer.disconnect(); // 1回のみ実行
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });

    // 初期チェック
    checkAndLoadScript();
});
</script>

...