トップページなどの静的ページにログイン/ログアウトの切り替えリンクを付けることはできますか。

コマースクリエイター未利用店舗様専用の記事です

はい、可能です。

本ページ内の設定を行うことで、
トップページなどの静的ページに設置する「ログイン/ログアウト」のリンクを、
ログイン状態によって切り替えて出しわけることができることができます。

常時SSL化未対応の店舗様はご利用いただけません。 PC／スマートフォンともに同様の方法で表示可能です。 動的ページ(ページURLに/fs/ が含まれるページ)にも表示できますが、注意点がございます。 詳しくはコチラをご覧ください。

設定手順

１：表示を許可するドメインを登録する
２：headタグ内にJavaScriptを挿入する
３：CSSを追記する
４：HTMLを挿入する

 

１：表示を許可するドメインを登録する

管理TOP＞初期表示設定「店舗」タブ　内の「外部連携接続許可ドメイン」の入力枠に、「ご契約ドメイン」をご登録ください。

 

ご契約ドメインとは？

構築メニュー＞その他 　にて確認できる、ログインページ等の「https」から始まるURLのドメインを指します。
例えば、ログインページのURLが
https://www.example.com/fs/testshop/Login.html 　と表示されていた場合、
ご契約ドメインは www.example.com となります。

 

２：headタグ内にJavaScriptを挿入する

静的ページのhead内に下記のタグを挿入してください。
名前やポイント数表示のためにすでにFS2.repeaterを利用している場合は下記に差し替えてください。 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="★ご契約ドメイン（https有り）★/shop/js/fs2api.js"></script>
<script type="text/javascript">
FS2.repeater({
    ssldomain: '★ご契約ドメイン（https無し）★',
    shopKey: '★ご利用店舗KEY★',
    member: function(json) {
    $('#logoutButton').show();
},
    guest: function(json) {
    $('#loginButton').show();
}
});
</script>

 

店舗KEY：testshop、ご契約ドメイン：https://www.example.com の例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.example.com/shop/js/fs2api.js"></script>
<script type="text/javascript">
FS2.repeater({
ssldomain: 'www.example.com',
shopKey: 'testshop',
member: function(json) {
$('#logoutButton').show();
},
guest: function(json) {
$('#loginButton').show();
}
});
</script>

 

３：CSSを追記する

下記のCSSを静的ページに追記してください。

<style type="text/css">
#logoutButton, #loginButton { display: none; }
</style>

 

４：HTMLを挿入する

ログイン／ログアウトを表示したい箇所に下記のタグを追記してください。

<div id="loginLogout">
<a id="logoutButton" onclick="return canSubmit();" href="https://★ご契約ドメイン（https無し）★/fs/★ご利用店舗KEY★/Logout.html?url='+encodeURIComponent(document.location)">ログアウト</a>
<a id="loginButton" onclick="return canSubmit();" href="javascript:document.location='https://★ご契約ドメイン（https無し）★/fs/★ご利用店舗KEY★/Login.html?url='+encodeURIComponent(document.location)">ログイン</a>
</div>

★ご契約ドメイン（https無し）★★ご利用店舗KEY★は、ご契約情報にあわせて書き換えてください。

 

同ページ内で複数箇所設定する場合

HTMLの仕様上、同ページ内では同じIDを複数設定できません。
トップページをレスポンシブで構築されている場合など、
同一ページに複数設置する際にはそれぞれIDを変更し、下記のように一部変更してご利用ください。
例：SP用には別ID（例：「logoutButtonSP」「loginButtonSP」）を付ける場合

JavaScript

<script type="text/javascript">
FS2.repeater({
    ssldomain: '★ご契約ドメイン（https無し）★',
    shopKey: '★ご利用店舗KEY★',
    member: function(json) {
    $('#logoutButton').show();
},
    guest: function(json) {
    $('#loginButton').show();
}
});
</script>

↓

<script type="text/javascript">
FS2.repeater({
ssldomain: '★ご契約ドメイン（https無し）★',
shopKey: '★ご利用店舗KEY★',
member: function(json) {
  $('#logoutButton').show();
  $('#logoutButtonSP').show();
},
guest: function(json) {
  $('#loginButton').show();
  $('#loginButtonSP').show();
}
});
</script>

CSS

<style type="text/css">
#logoutButton, #loginButton { display: none; }
</style>

↓

<style type="text/css">
#logoutButton, #loginButton, #loginButtonSP, #logoutButtonSP { display: none; }
</style>

HTML(一例：スマートフォン用の記述)

<div id="loginLogoutSP">
<a id="logoutButtonSP" onclick="return canSubmit();" href="https://★ご契約ドメイン（https無し）★/fs/★ご利用店舗KEY★Logout.html?url='+encodeURIComponent(document.location)">ログアウト</a>
<a id="loginButtonSP" onclick="return canSubmit();" href="javascript:document.location='https://★ご契約ドメイン（https無し）★/fs/★ご利用店舗KEY★/Login.html?url='+encodeURIComponent(document.location)">ログイン</a>
</div>

★ご契約ドメイン（https無し）★★ご利用店舗KEY★は、ご契約情報にあわせて書き換えてください。

 

動的ページで設置する際の注意点

URLに/fs/が含まれる「動的ページ」に設置する場合も、本記事と類似する方法で設置できます。

サーバー負荷のため撤去をお願いする場合があります

動的ページに設置する場合、サーバーへの負荷が高まり、サイト上の閲覧に支障が発生する可能性があります。
他店舗様にも影響を及ぼす場合には、撤去をお願いすることがございます。

あらかじめご了承ください。

常時SSL未対応店舗様は利用不可です

常時SSL化未対応店舗様ではご利用いただけません。

なお、構築＞その他に表示されるすべてのURLが「httpsからはじまる契約ドメイン」の場合、常時SSL対応済みとなります。