메뉴 건너 뛰기




更新情報

一覧

[ショップ管理] 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または[お問い合わせ]まで、お気軽にお問い合わせください。

Top