こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は、クリエイターモードで会員ログイン／ログアウト時の表示を切り替えて設定するソース例をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。
こんなお悩みありませんか？
・会員がログインした時と、ログアウトしている時の表示を切り替えたい
クリエイターモード
「ログイン／ログアウト時の表示」を切り替えて設定したい
設定方法
クリエイターモードでは、分岐の変数タグを使用してログイン/非ログイン時に表示させるメニューを出し分けてご対応ください。
|
1 2 3 4 5 |
<{if $member.is_logged_in}> 「ログインをしている場合のみ表示」 <{else}> 「ログインをしていない場合のみ表示」 <{/if}> |
【ソース例】
クリエイターモード【Complete】の「ログイン/非ログイン時」を表示するソース例をご参照ください。
【ショップデザイン】>【クリエイターモード】>【モジュール管理】
モジュール名「ヘッダー」をクリック【モジュール編集】画面内の初期値のソースです。
▼HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |
●マイページ関連は、タグリファレンス全ページ共通（ページリンク）のタグをご利用ください。
|
1 2 3 4 5 |
<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を付与します。
▼入力例
|
1 2 3 4 5 6 7 |
<div class="member-only"> ログイン中の会員にのみ表示させたい内容 </div> <div class="common"> ログインしていない場合に表示させたい内容 </div> |
（2）「商品詳細」「HTML」に記述する。
【ショップデザイン】>【クリエイターモード】>【商品詳細】
「商品詳細」「HTML」の</body>の前に下記を入力します。
▼入力例
|
1 2 3 4 5 6 7 8 9 |
<{if $member.is_logged_in}> <style type="text/css"> .common{display:none;} </style> <{else}> <style type="text/css"> .member-only{display:none;} </style> <{/if}> |
完了
・ソースは一例となります。自由にデザインを調整して表示しましょう。
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。
・有料となりますが、ショップ制作代行サービスとして、おてがるリニューアルサービスをご紹介させていただきます。
いかがでしたでしょうか。
クリエイターモードでもショップにあったログイン／ログアウト表示を設定してみましょう。
それではまた！
