메뉴 건너 뛰기




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 Trung giả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)


<!--@layout(/layout/basic/layout.html)-->
 
<div class="titleArea">
    <h2>激活账号</h2>
</div>
 
<div module="member_activation" class="activationArea">
    <!--@css(/css/module/member/activation.css)-->
    <!--
        $returnUrl = /member/join_result.html
     -->
    <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)

<!--layout(/layout/basic/popup.html)-->
<div module="member_join" id="{$join_confirm_layer_id}" class="mTerm ec-base-layer">
    <!--@css(/layout/basic/css/ec-base-layer.css)-->
    <!--@css(/css/module/member/activation.css)-->
    <div class="header">
        <h3>用户协议</h3>
    </div>
    <div class="content">
        <div id="activationTerms">{$service_desc}</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>


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

<!--layout(/layout/basic/popup.html)-->
<div module="member_join" id="{$join_confirm_layer_id}" class="mTerm ec-base-layer">
    <!--@css(/layout/basic/css/ec-base-layer.css)-->
    <!--@css(/css/module/member/activation.css)-->
    <div class="header">
        <h3>收集及使用个人信息</h3>
    </div>
    <div class="content">
        <div id="activationTerms">{$privacy_desc}</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>


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

<!--layout(/layout/basic/popup.html)-->
<div module="member_join" id="{$join_confirm_layer_id}" class="mTerm ec-base-layer">
    <!--@css(/layout/basic/css/ec-base-layer.css)-->
    <!--@css(/css/module/member/activation.css)-->
    <div class="header">
        <h3>同意将个人信息提供给第三方</h3>
    </div>
    <div class="content">
        <div id="activationTerms">{$information_desc}</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>


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

<!--layout(/layout/basic/popup.html)-->
<div module="member_join" id="{$join_confirm_layer_id}" class="mTerm ec-base-layer">
    <!--@css(/layout/basic/css/ec-base-layer.css)-->
    <!--@css(/css/module/member/activation.css)-->
    <div class="header">
        <h3>同意委托处理个人信息</h3>
    </div>
    <div class="content">
        <div id="activationTerms">{$consignment_desc}</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>


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

<!--layout(/layout/basic/popup.html)-->
<div module="member_join" id="{$join_confirm_layer_id}" class="mTerm ec-base-layer">
    <!--@css(/layout/basic/css/ec-base-layer.css)-->
    <!--@css(/css/module/member/activation.css)-->
    <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="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)

<!--@layout(/layout/basic/layout.html)-->
 
<div id="titleArea">
    <h2>激活账号</h2>
</div>
 
<div module="member_activation" class="activationArea">
    <!--@css(/css/module/member/activation.css)-->
    <!--
        $returnUrl = /member/join_result.html
     -->
    <div class="titleArea">
        <h3>基本信息 <span><img src="//img.echosting.cafe24.com/skin/mobile_zh_CN/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_CN/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_CN/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)

<!--@layout(/layout/basic/popup.html)-->
<div module="member_join" class="ec-base-layer">
    <!--@css(/css/module/member/activation.css)-->
    <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