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

本案内は「コマースクリエイターで作成した自動生成ページ」でのみ利用できます。
(/s/配下の静的HTMLファイルのページ やCMSサーバー上のコンテンツではご利用いただけません。)

ログイン/ログアウトの切り替えリンクを付けるには、
「レイアウトパーツの表示条件機能を利用する方法」と「置換文字を利用する方法」があります。

ログイン状態に応じて、ログイン/ログアウトや画像、会員名など、
多くの箇所をまとめて切り替え表示したい場合にはレイアウトパーツが適しています。

ログイン/ログアウトのみを切り替え表示したい場合には置換文字を利用する方法が手軽でおすすめです。

ここでは、メニューパーツを使った方法をご紹介しますが、フリーパーツでも作成可能です。
フリーパーツで作成する場合は以下のオンラインマニュアル内「会員情報置換文字」の欄をご参照ください。

　■オンラインマニュアル：置換文字一覧

メニューパーツを利用したログイン/ログアウトの切り替えリンク設置方法

(1)メニューパーツを作成し、特定のclassを設定する

commerce creator＞パーツ　より、左下の「パーツを追加する」をクリックし、「メニュー」を選択します。


編集画面のclassに
fs-clientInfo

と入力します。
 

(2)ログイン/ログアウトに特定のclassを設定する

右側の「メニュー項目」の最下部にある「メニュー項目を追加する」ボタンを押下し、ログインメニューとログアウトメニューを作成します。

ログインメニュ―には、
login my-{@ member.logged_in @}

ログアウトメニュ―には、
logout my-{@ member.logged_in @}

のclassを設定してください。
 

作成したら、「保存する」を押下し、テーマのレイアウトにて表示させたい箇所にメニューパーツを設置します。

(3)表示切り替えを行うCSSを追加する

commerce creator＞テーマ＞利用中テーマのオリジナルCSS　にて、以下CSSを追記してください。

/*ログインログアウトの表示切り替えを行うCSS*/
.logout.my-false { display: none; }
.login.my-true { display: none; }

以上で完了です。


{@ member.logged_in @}はfs-clientInfoのclass要素内でのみ利用ができる会員のログイン状態の置換文字であり、
ログイン時はtrue、未ログイン(ログアウト)時はfalseに置き換わります。

手順(2)で設定したclass「my-{@ member.logged_in @}」は、
ログアウト中は「my-false」と置き換わるので、CSSによりログアウトメニューが非表示に、
ログイン中は「my-true」と置き換わるので、CSSによりログインメニューが非表示になります。