futureshop FAQ

本サイトは、弊社サービス「futureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00~17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 4443
  • 公開日時 : 2018/10/31 10:50
  • 更新日時 : 2020/06/16 17:00
  • 印刷

ログイン/ログアウトの切り替えリンクを付けるにはどうすればいいですか?

サポートカテゴリー : 

回答

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

本案内は「コマースクリエイターで作成した自動生成ページ」でのみ利用できます。
(/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によりログインメニューが非表示になります。

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日10:00~17:00)お電話でのお問い合わせ(平日10:00~17:30)
  • メールフォームをご利用くださいお問い合わせフォーム

※弊社サービスと類似した名称の通販サイトとの問い合わせ先間違いが増えております。
 弊社では通販サイトの運営は一切行っておりません。

ページ
トップへ