• No : 1965
  • 公開日時 : 2018/01/31 13:45
  • 更新日時 : 2020/05/08 11:10
  • 印刷

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

回答

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

はい、可能です。

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

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

設定手順

1:表示を許可するドメインを登録する
2:headタグ内にJavaScriptの挿入
3:CSSの追記
4:HTMLの挿入

1:表示を許可するドメインを登録する

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

 

ご契約ドメインとは?

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

 

2:headタグ内にJavaScriptの挿入

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

 

<head>内に記述するJavaScriptの具体例
店舗KEY:testshop
ご契約ドメイン:https://www.example.com の場合

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/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>

3:CSSの追記

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

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

4: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★は、
それぞれ、ご利用内容に応じて書き換えてください。

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

トップページをレスポンシブサイト内でご利用されている場合などの
PC用の記述とスマートフォン用の記述を記載する場合などの店舗様はご確認ください。

HTMLの仕様上、
IDの記述は1つのHTMLで1つしか使用することができないため、
同ページ内では同じIDで複数設定することはできません。

お手数ですが、
もう一方のIDを別IDに変更し、下記の記述を
上記にて記載している記述に追記・変更していただくようお願いします。
例:SP用には別ID(例:「logoutButtonSP」「loginButtonSP」)を付ける場合

JS(2の記述を一部変更)

<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(3の記述の変更)

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

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

HTML(2箇所目の記述)

<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を対応していない店舗様の場合はご利用いただけません。