Cafe24新着情報
[ショップ管理] SSOログイン時の連動ボタンデザイン適用方法 - HTML
2018-10-04
平素よりcafe24をご利用いただき、ありがとうございます。
SSOログイン連動を行う際に、ログインボタンがショップ画面に表示されるようデザインソースを適用させてください。
詳しい内容は下記をご確認ください。
■ 事前作業
- 連動するサービスのログインボタン画像を作成してください。
(画像URLを下記ソース内の "ボタン画像経路" 部分に入力してください。)
■ HTML - PC ショップ
- 位置 : デザイン管理＞デザイン編集＞ログイン(非会員注文/照会)(/member/login.html)
▼ 下記の通り 青色部分のソースを追加 します。
## 上段省略 ## <ul class="snsArea"> <li class="{$display_sso|display}"> <a href="#none" onclick="{$sso_func_login}"><img src="ボタン画像経路" alt="SSO ログイン" /></a> </li> <li class="{$display_sso1|display}"> <a href="#none" onclick="{$sso1_func_login}"><img src="ボタン画像経路" alt="SSO ログイン1" /></a> </li> <li class="{$display_sso2|display}"> <a href="#none" onclick="{$sso2_func_login}"><img src="ボタン画像経路" alt="SSO ログイン2" /></a> </li> <li class="{$display_sso3|display}"> <a href="#none" onclick="{$sso3_func_login}"><img src="ボタン画像経路" alt="SSO ログイン3" /></a> </li> <li class="{$display_sso4|display}"> <a href="#none" onclick="{$sso4_func_login}"><img src="ボタン画像経路" alt="SSO ログイン4" /></a> </li> <li class="{$display_naver|display}"> <a href="#none" onclick="{$naver_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/member/btn_naver_login.gif" alt="Naverでログイン" /></a> </li> <li class="{$display_facebook|display}"> <a href="#none" onclick="{$facebook_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/member/btn_facebook_login.gif" alt="Facebookでログイン" /></a> </li> <li class="{$display_yahoojp|display}"> <a href="#none" onclick="{$yahoojp_func_login}"><img src="https://img.echosting.cafe24.com/skin/base_ja_JP/member/btn_yahoo_login.gif" alt="Yahoo!でログイン" /></a> </li> <li class="{$display_google|display}"> <a href="#none" onclick="{$google_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/member/btn_google_login.gif" alt="Googleでログイン" /></a> </li> <li class="{$display_kakao|display}"> <a href="#none" onclick="{$kakao_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/member/btn_kakao_login.gif" alt=Kakaoでログイン" /></a> </li> <li class="{$display_line|display}"> <a href="#none" onclick="{$line_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/member/btn_line_login.gif" alt="LINEでログイン" /></a> </li> </ul> ##下段省略 ## |
■ HTML - モバイルショップ
- 位置 : Mobileデザイン > デザイン編集 > ログイン(非会員注文/照会)(/member/login.html)
▼ 下記の通り 青色部分のソースを追加 します。
## 上段省略 ## <div class="snsLogin"> <a href="#none" class="{$display_sso|display}" onclick="{$sso_func_login}"> <img src="ボタン画像経路" alt="SSOログイン" /> </a> <a href="#none" class="{$display_sso1|display}" onclick="{$sso1_func_login}"> <img src="ボタン画像経路" alt="SSOログイン1" /> </a> <a href="#none" class="{$display_sso2|display}" onclick="{$sso2_func_login}"> <img src="ボタン画像経路" alt="SSOログイン2" /> </a> <a href="#none" class="{$display_sso3|display}" onclick="{$sso3_func_login}"> <img src="ボタン画像経路" alt="SSOログイン3" /> </a> <a href="#none" class="{$display_sso4|display}" onclick="{$sso4_func_login}"> <img src="ボタン画像経路" alt="SSOログイン4" /> </a> <a href="#none" class="btnNaver {$display_naver|display}" onclick="{$naver_func_login}"><span>Naverでログイン</span></a> <a href="#none" class="btnFacebook {$display_facebook|display}" onclick="{$facebook_func_login}"><span>Facebookでログイン</span></a> <a href="#none" class="btnYahoo {$display_yahoojp|display}" onclick="{$yahoojp_func_login}"><span>Yahoo!でログイン</span></a> <a href="#none" class="btnGoogle {$display_google|display}" onclick="{$google_func_login}"><span>Googleでログイン</span></a> <a href="#none" class="btnKakao {$display_kakao|display}" onclick="{$kakao_func_login}"><span>Kakaoでログイン</span></a> <a href="#none" class="btnLine {$display_line|display}" onclick="{$line_func_login}"><span>LINEでログイン</span></a> </div> ##下段省略 ## |
---------------------------------------------------------------------------------
より簡単に、お客様の理想のネットショップ運営ができるように、cafe24では機能アップデートに特に力を入れています。
今後もスタッフ一同真心を込めて、サービスに専念いたします。
今後ともcafe24をどうぞよろしくお願いいたします。
ご不便・ご不明な点等ございましたら、092-517-9981または[お問い合わせ]まで、お気軽にお問い合わせください。