• このエントリーをはてなブックマークに追加

futureshopのcommerce creatorで、会員登録していない方は、
会員登録している方は、姓名を表示し、
こんにちは!ゲスト様と表示する方法・サンプルコード。

会員情報置換文字を使って、実現します。

下記の通り、fs-clientInfoというクラス名の付与された要素(div等)で囲んだ中に置換文字を入れる。fs-clientInfoが付与されていないと、動作しない。

HTML

<div class="fs-clientInfo">置換文字</div>

{@ member.first_name @} には名が置換されて、表示されれる。ここにはログインしているときはファーストネーム(名)が表示され、ログインしていないときはゲスト様となる。姓だけだと、実現できない。

姓だけ表示させて、ゲスト様の切り替えも実現するときは以下のコード。

HTML

<div class="fs-clientInfo">
<span class="login login-{@ member.logged_in @}">
<span class="name name-member">{@ member.last_name @}</span>
<span class="name name-guest">ゲスト</span>
</span>様
</div>

CSS

.login .name{
display:none;
}
.login-false .name-guest{
display:inline;
}
.login-true .name-member{
display:inline;
}

ログイン・ログアウトの切り替えサンプルコード

<div class="txt-greeting fs-clientInfo">
こんにちは、<br>
{@ member.last_name @} {@ member.first_name @}様
</div>

ログイン・ログアウトの切り替えなどは、display:none;と組み合わせて表示を切り替える。なので、あらかじめ、切り替えに使用するクラスにはdisplay:none;を指定して、消しておく必要がある。true/falseの文字が置換文字と入れ替わって動作する。

HTML

<div class="login-logout fs-clientInfo">
<span class="logout my-{@ member.logged_in @}"><a href="/p/logout">ログアウト</a></span>
<span class="login my-{@ member.logged_in @}"><a href="/p/login">ログイン</a></span>	
</div>

CSS

.logout.my-false { display: none; } /* ログアウトしていないときは非表示 / .login.my-true { display: none; } / ログインしているときは非表示 */

JavaScriptが動作した後に切り替わるため、最初は表示状態が美しく感じないかもしれないが、CSSを予めうまく指定してあげることにより、うまく表示できる。