FutureShop2 虎の巻

Home > ページ作成のよくある質問 | 会員機能を活用する | 困った場合に | 売上アップに > [PC/SP]静的ページにログイン/ログアウトの切り替えリンクを付けたい

[PC/SP]静的ページにログイン/ログアウトの切り替えリンクを付けたい

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

(こちらはFutureShop2 OVERSEASプランではご利用いただくことができません。)


★FutureShop2にてご利用の独自ドメイン静的ページでのみ、表示可能となります★
※PC・スマートフォンにて表示可能です。
※対象ブラウザ:Internet Explorer 10 以降、Chrome、Firefox、Safari
※ドメイン名/fs/店舗KEY/から始まるURLは「動的ページ(FutureShop2システムによる自動生成ページ)」ですので、こちらに設置される場合は、サーバー負荷が高くなる可能性があり、 もしサーバー負荷が高くなるようでしたら解除していただく場合がございます。 ご了承ください。

【ご注意】 Javascript等でのカスタマイズは思わぬ挙動をする場合が ございますので、設定後、購入が正しく行えるかなど 必ず動作確認をお願いいたします。
また、バージョンアップ後にも、仕様が変更になり動作しないなど 起こる可能性がございますので、挙動の確認をお願いいたします。 ご了承の上、店舗様の責任にてご利用ください。


2017-0701-01.gif

設定方法

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

管理TOP>初期表示設定にて「店舗」タブに切り替えた画面の下部にある
外部連携接続許可ドメインの入力枠に、
「店舗のドメイン」「SSLドメイン」をご登録ください。

2:headタグ内にJavaScriptの挿入

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

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



★ご利用SSLドメイン★★ご利用店舗KEY★は、それぞれ、ご利用内容に応じて書き換えてください。

SSLドメインとは?

構築メニュー>その他 にて、ログインページ等の「https」から始まるURLの頭の部分です。
例えば、https://c03.future-shop.jp/fs/testshop/Login.html と表示されていた場合、
SSLドメインは https://c03.future-shop.jp となります。

<head>内に記述するJavaScriptの具体例

店舗KEY:testshop
店舗のドメイン:http://example.com
SSLドメイン:https://c03.future-shop.jp の場合
↓ ↓ ↓ ↓ ↓

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://c03.future-shop.jp/shop/js/fs2api.js"></script>
<script type="text/javascript">
FS2.repeater({
ssldomain: 'c03.future-shop.jp',
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の挿入

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



★ご利用SSLドメイン★★ご利用店舗KEY★は、それぞれ、ご利用内容に応じて書き換えてください。

その他

トップページ・特集ページに、お客様のお名前・会員ステージ・保有ポイント数を表示したい(虎の巻)

会員ステージをマイページに表示する方法(虎の巻)

マイページにポイント数、会員ランクを表示させたい(虎の巻)