こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は、クリエイターモードで会員ログイン／ログアウト時の表示を切り替えて設定するソース例をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。

こんなお悩みありませんか？

・会員がログインした時と、ログアウトしている時の表示を切り替えたい

クリエイターモード
「ログイン／ログアウト時の表示」を切り替えて設定したい

設定方法

クリエイターモードでは、分岐の変数タグを使用してログイン/非ログイン時に表示させるメニューを出し分けてご対応ください。

<{if $member.is_logged_in}>
「ログインをしている場合のみ表示」
<{else}>
「ログインをしていない場合のみ表示」
<{/if}>

【ソース例】

クリエイターモード【Complete】の「ログイン/非ログイン時」を表示するソース例をご参照ください。

【ショップデザイン】>【クリエイターモード】>【モジュール管理】

モジュール名「ヘッダー」をクリック【モジュール編集】画面内の初期値のソースです。

▼HTML

<header class="header">
    <nav class="top-nav">
        <h1 class="header-logo">
            <a href="<{$url.top}>">
                <{if $shop.logo_url}>
                    <img src="<{$shop.logo_url}>" alt="<{$shop.name}>">
                <{else}>
                    <{$shop.name}>
                <{/if}>
            </a>
        </h1>
        <div class="header-menu">
            <ul class="gnav">
                <{if $member.is_logged_in}>
                <li class="account logout"><a href="<{$url.logout}>">ログアウト</a></li>
                <{else}>
                <li class="account membership"><a href="<{$url.member_entry}>">新規会員登録</a></li>
                <li class="account login"><a href="<{$url.login}>">ログイン</a></li>
                <{/if}>
            </ul>
            <ul class="gnav">
                <li class="gnav-menu header-favorite"><a href="<{$url.favorite}>">お気に入り</a></li>
                <li class="gnav-menu header-mypage"><a href="<{$url.mypage}>">マイページ</a></li>
                <li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
                <span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span></li>
            </ul>
        </div>
    </nav>
</header>

●マイページ関連は、タグリファレンス全ページ共通（ページリンク）のタグをご利用ください。

<a href="<{$url.mypage}>">マイページ</a>
<a href="<{$url.order_history}>">購入履歴</a>
<a href="<{$url.member_edit}>">会員情報変更</a>
<a href="<{$url.point}>">ポイント照会</a>
<a href="<{$url.favorite}>">お気に入り</a>

【おまけ】商品説明文内で切り替えて表示させる

「PC用メイン商品説明文」欄には変数タグは使用できないため、CSSで非表示に指定してご対応ください。手順は、次の通りです。

（1）PC用メイン商品説明文のHTMLへclassをつける。

【商品管理】>【商品の設定】>【商品の登録】

「PC用メイン商品説明文」のHTMLに下記のようにclassを付与します。

▼入力例

<div class="member-only">
ログイン中の会員にのみ表示させたい内容
</div>

<div class="common">
ログインしていない場合に表示させたい内容
</div>

（2）「商品詳細」「HTML」に記述する。

【ショップデザイン】>【クリエイターモード】>【商品詳細】

「商品詳細」「HTML」の</body>の前に下記を入力します。

▼入力例

<{if $member.is_logged_in}>
    <style type="text/css">
     .common{display:none;}
    </style>
<{else}>
    <style type="text/css">
      .member-only{display:none;}
     </style>
<{/if}>

完了

いかがでしたでしょうか。
クリエイターモードでもショップにあったログイン／ログアウト表示を設定してみましょう。

それではまた！