Thông tin nâng cấp

Danh sách

[Khách hàng] [Smart Theme] Thêm giao diện Kích hoạt tài khoản - HTML/CSS (Tiếng Nhật)

2020-06-23

Xin chào, chúng tôi là Cafe24.

Chúng tôi xin hướng dẫn cách áp dụng vào Smart Theme

để có thể gửi email mời kích hoạt tài khoản đến khách không phải thành viên.

Vui lòng tham khảo nội dung chi tiết bên dưới.

---------------------------------------------------------------------------------

■ Trang mua sắm PC -Smart Theme

Tạo mới 7 tệp html và chèn mã nguồn màu xanh như dưới đây.

1) Đường dẫn: /member/activation.html (Tạo mới)

<div class="titleArea">
<h2>アカウントを有効にする</h2>
</div>

<div module="member_activation" class="activationArea">


<h3>基本情報</h3>
<p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" /> 必須項目</p>
<div class="ec-base-table typeWrite">
<table border="1" summary="">
<caption>基本情報</caption>
<colgroup>
<col style="width:150px;" />
<col style="width:auto;" />
</colgroup>
<tbody>
<tr>
<th scope="row">パスワード <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" /></th>
<td>
<div class="eTooltip">
{$form.passwd}
<div class="ec-base-tooltip typeUpper">
<div class="content">
<strong class="txtWarn">※ {$passwd_terms}</strong>
<ul class="ec-base-help typeDash gBlank10 txtWarn">
{$passwd_chk_info}
</ul>
</div>
<a href="#none" class="btnClose"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="閉じる" /></a>
<span class="edge"></span>
</div>
</div>
{$passwd_type_desc}
</td>
</tr>
<tr>
<th scope="row">パスワード(確認) <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" /></th>
<td>{$form.user_passwd_confirm} <span id="{$pwConfirmMsg_id}"></span></td>
</tr>
</tbody>
</table>
</div>

<div class="mAgreement">
<div class="desc"><a href="agreement/agreement1.html" class="txtLink" target="_blank" onclick="{$agreementPopup}">利用規約</a>、<a href="agreement/agreement2.html" class="txtLink" target="_blank" onclick="{$agreementPopup}">個人情報の収集および利用</a>(必須)に関する内容にすべて同意します。</div>
<div class="{$display_information|display} box">
<label class="gLabel">{$form.agree_information_check} 個人情報の第三者提供 (任意)</label>
<a href="agreement/agreement3.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">詳細を見る</a>
</div>
<div class="{$display_consignment|display} box">
<label class="gLabel">{$form.agree_consignment_check} 個人情報取扱の委託 (任意)</label>
<a href="agreement/agreement4.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">詳細を見る</a>
</div>
<div class="{$display_marketing|display} box">
<label class="gLabel">{$sMarketingAgreeAllChecked} お得な情報の受信(任意)</label>
<ul class="check">
<li class="{$display_is_sms|display}">
<span>SMSを受信しますか?</span> {$form.is_sms}
</li>
<li class="{$display_is_news_mail|display}">
<span>メールマガジンを受信しますか?</span> {$form.is_news_mail}
</li>
</ul>
<a href="agreement/agreement5.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">詳細を見る</a>
</div>
</div>

<div class="ec-base-button">
<a href="#none" class="btnSubmitFix sizeM" onclick="{$action_func_join}">アカウントを有効にする</a>
</div>
</div>

2) Đường dẫn: /css/module/member/activation.css (Tạo mới)

body, form { margin:0; }

.activationArea > h3 { padding:0 0 10px; font-size:16px; color:#2e2e2e; }
.activationArea .required { margin:-25px 0 10px; color:#353535; text-align:right; }
.activationArea .required img { vertical-align:middle; }

.mAgreement { margin:55px 0 0; }
.mAgreement .desc { margin:0 0 8px; font-size:16px; font-weight:bold; color:#000; }
.mAgreement .desc .txtLink { color:#508bed; text-decoration:underline; }
.mAgreement .box { position:relative; margin-bottom:-1px; padding:12px 20px; font-size:12px; color:#353535; border:1px solid #d7d5d5; }
.mAgreement .box + .box:not(:type-of-last) { border-top:none; }
.mAgreement .box .btnDetail { position:absolute; top:12px; right:20px; color:#353535; text-decoration:underline; }
.mAgreement .box ul { padding:0 0 0 20px; }
.mAgreement .box ul li { margin:10px 0 0; }

.activationArea .ec-base-table .error { color:#f00; }

.ec-base-layer.mTerm { display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; position:relative; max-width:900px; height:100%; margin:0 auto; box-sizing:border-box;
-webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; flex-direction:column;
}
.ec-base-layer.mTerm .content { overflow-y:auto; padding:0; background:#f0f0f0;
-webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1;
}

/* tooltip */
.activationArea .eTooltip { position:relative; display:inline-block; }
.activationArea .ec-base-tooltip.typeUpper { left:25px; bottom:28px; width:390px; }
.activationArea .ec-base-tooltip.typeUpper .edge { left:20%; }
.activationArea [class^='btn'][class*='Fix'].sizeM { width:150px; }

/* activationTerms */
#activationTerms { margin:10px; padding:10px; border:1px solid #ddd; color:#777; font-size:12px; background:#fff; }
#activationTerms p { margin:0; }

3) Đường dẫn: /member/agreement/agreement1.html (Tạo mới)

4) Đường dẫn: /member/agreement/agreement2.html (Tạo mới)

5) Đường dẫn: /member/agreement/agreement3.html (Tạo mới)

6) Đường dẫn: /member/agreement/agreement4.html (Tạo mới)

7) Đường dẫn: /member/agreement/agreement5.html (Tạo mới)

<div module="member_join" id="{$join_confirm_layer_id}" class="mTerm ec-base-layer">


<div class="header">
<h3>お得な情報の受信</h3>
</div>
<div class="content">
<div id="activationTerms">
<p>割引クーポンや特典・イベント・新着アイテムのお知らせなどのお得な情報をSMSやメールで受け取ることができます。</p><br>
<p>但し、注文・お支払い情報および当サイトからの重要なお知らせは、受信同意の有無に関わらず送信されます。</p><br>
<p>任意項目は同意しなくても会員登録いただけます。また、会員登録後、いつでも会員情報修正ページにて受信設定を変更することができます。</p>
</div>
</div>
<div class="ec-base-button">
<a href="#none" class="btnNormalFix sizeS" onclick="self.close();">閉じる</a>
</div>
<a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="閉じる" onclick="self.close();" /></a>
</div>

■ Trang mua sắm Mobile - Smart Theme

Tạo mới 3 tệp html và chèn mã nguồn màu xanh như dưới đây.

1) Đường dẫn: /member/activation.html (Tạo mới)

<div id="titleArea">
<h2>アカウントを有効にする</h2>
</div>

<div module="member_activation" class="activationArea">


<div class="titleArea">
<h3>基本情報 <span><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" width="5" height="5" alt="必須">必須項目</span></h3>
</div>
<div class="ec-base-table typeWrite gClearBorderTop">
<table border="1" summary="">
<caption>基本情報</caption>
<colgroup>
<col style="width:100px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr>
<th scope="row">パスワード <img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" width="5" height="5" alt="必須"></th>
<td>
<div class="ec-base-tooltip-area">
<span class="eTip">{$form.passwd}</span>
<div class="ec-base-tooltip typeUpper">
<div class="content">
<strong class="txtWarn">※ {$passwd_terms}</strong>
<ul class="ec-base-help typeDash txtWarn">
{$passwd_chk_info}
</ul>
<button type="button" class="btnClose eClose">Đóng</button>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">パスワード(確認) <img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" width="5" height="5" alt="必須"></th>
<td>{$form.user_passwd_confirm}</td>
</tr>
</tbody>
</table>
</div>

<div class="mAgreement">
<div class="desc"><a href="agreement/agreement1.html" class="txtLink" target="_blank">利用規約</a>、<a href="agreement/agreement2.html" class="txtLink" target="_blank">個人情報の収集および利用</a>(必須)に関する内容にすべて同意します。</div>
<div class="{$display_information|display} box">
<label class="gLabel">{$form.agree_information_check} 個人情報の第三者提供 (任意)</label>
<a href="agreement/agreement3.html" class="btnDetail" target="_blank">詳細を見る</a>
</div>
<div class="{$display_consignment|display} box">
<label class="gLabel">{$form.agree_consignment_check} 個人情報取扱の委託 (任意)</label>
<a href="agreement/agreement4.html" class="btnDetail" target="_blank">詳細を見る</a>
</div>
<div class="{$display_marketing|display} box">
<label class="gLabel">{$sMarketingAgreeAllChecked} お得な情報の受信(任意)</label>
<ul class="check">
<li class="{$display_is_sms|display}">
<span>SMSを受信しますか?</span><br>{$form.is_sms}
</li>
<li class="{$display_is_news_mail|display}">
<span>メールマガジンを受信しますか?</span><br>{$form.is_news_mail}
</li>
</ul>
<a href="agreement/agreement5.html" class="btnDetail" target="_blank">詳細を見る</a>
</div>
</div>

<div class="ec-base-button gFull">
<button type="button" class="btnSubmit" onclick="{$action_func_join}">アカウントを有効にする</button>
</div>
</div>

2) Đường dẫn: /css/module/member/activation.css (Tạo mới)

.popup #joinForm { height:100%; }

/* activationArea */
.activationArea { margin:14px 7px 0; padding:0 0 29px; color:#63666e; font-size: 11px; }
.activationArea .titleArea { width:100%; margin:0; border:none; }
.activationArea .titleArea.accountArea { margin:-8px 0 0; }
.activationArea .titleArea h3 { height:30px; padding:13px 0 0 14px; border:1px solid #d5d5d5; font-size:13px; font-weight:bold; color:#4a5164; font-family:"Helvetica Neue",Helvetica,Arial; background:#f1f1f1; }
.activationArea .titleArea h3 span { float:right; padding:0 14px 0 0; color:#1b1b1b; font-size:11px; font-weight:normal; }
.activationArea .titleArea h3 span img { margin:0 3px 0 0; padding:4px 0 0; vertical-align:top; }
.activationArea p.required { margin:-25px 0 6px; color:#6292db; font-size:11px; text-align:right; }
.activationArea p.required img { vertical-align:middle; }

/* tooltip */
.activationArea .ec-base-tooltip-area { position:relative; width:100%; }

/* ec-base-table.typeWrite */
.activationArea .ec-base-table.typeWrite { color:#1b1b1b; margin:0 0 7px; }
.activationArea .ec-base-table.typeWrite th > img { vertical-align:top; padding:4px 0 0; }

/* size*/
.activationArea input[type=password] { width:100%; }

/* mAgreement */
.mAgreement { margin:10px 0 0; border:1px solid #ccc; }
.mAgreement .desc { padding:10px 14px; font-size:13px; line-height:20px; font-weight:bold; color:#4a5164; }
.mAgreement .desc .txtLink { color:#508bed; text-decoration:underline; }
.mAgreement .box { position:relative; padding:5px 75px 5px 14px; border-top:1px solid #ccc; background-color:#fff; }
.mAgreement .box + .box { border-top:none; }
.mAgreement .box label { font-size:12px; color:#1b1b1b; }
.mAgreement .box .btnDetail { position:absolute; top:8px; right:20px; font-size:11px; color:#757575; text-decoration:underline; }
.mAgreement .box ul { padding:0 0 0 27px; }
.mAgreement .box ul li { margin:7px 0 0; }

.activationArea .ec-base-table .error { color:#f00; }

/* tooltip */
.activationArea .eTooltip { position:relative; display:inline-block; }
.activationArea .ec-base-tooltip.typeUpper { left:25px; bottom:28px; width:390px; }
.activationArea .ec-base-tooltip.typeUpper .edge { left:20%; }

/* activationTerms */
#activationTerms { padding:10px; border:1px solid #ddd; color:#777; font-size:12px; background:#fff; }

3) Đường dẫn: /member/agreement/agreement5.html (Tạo mới)

<div module="member_join" class="ec-base-layer">

<h1>お得な情報の受信</h1>
<div class="wrap">
<div id="activationTerms">
<p>割引クーポンや特典・イベント・新着アイテムのお知らせなどのお得な情報をSMSやメールで受け取ることができます。</p><br>
<p>但し、注文・お支払い情報および当サイトからの重要なお知らせは、受信同意の有無に関わらず送信されます。</p><br>
<p>任意項目は同意しなくても会員登録いただけます。また、会員登録後、いつでも会員情報修正ページにて受信設定を変更することができます。</p>
</div>
</div>
<div class="ec-base-button gFull">
<button type="button" class="btnEm" onclick="self.close();">閉じる</button>
</div>
<button type="button" class="btnClose" onclick="window.close()">閉じる</button>
</div>

---------------------------------------------------------------------------------

Cafe24 không ngừng cập nhật tính năng mới để quý khách có thể điều hành trang mua sắm dễ dàng và thuận tiện hơn.

Chúng tôi sẽ cố gắng hết sức để cung cấp dịch vụ tốt nhất dành cho quý khách.

Top

Cafe24 thông báo

Thông tin nâng cấp

[Khách hàng] [Smart Theme] Thêm giao diện Kích hoạt tài khoản - HTML/CSS (Tiếng Nhật)