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 Đài Loan phồn thể)

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>是否願意接收廣告簡訊?</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>可通過簡訊或電子郵件收到網路商店所提供的各種優惠劵、網站活動及新品上市等最新訊息。</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="Close" 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_zh_TW/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_zh_TW/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_zh_TW/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>是否願意接收廣告簡訊?</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>可通過簡訊或電子郵件收到網路商店所提供的各種優惠劵、網站活動及新品上市等最新訊息。</p>
<p>無論您是否同意接收訊息，都會將訂單/交易及主要政策相關訊息寄送給您。</p>
<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 Đài Loan phồn thể)