메뉴 건너 뛰기




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 Anh)

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>Activate your account</h2>
</div>
 
<div module="member_activation" class="activationArea">
    <!--@css(/css/module/member/activation.css)-->
    <!--
        $returnUrl = /member/join_result.html
     -->
    <h3>Personal Information</h3>
    <p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="Required Field" /> Required Fields</p>
    <div class="ec-base-table typeWrite">
        <table border="1" summary="">
            <caption>Personal Information</caption>
            <colgroup>
                <col style="width:150px;" />
                <col style="width:auto;" />
            </colgroup>
            <tbody>
                <tr>
                    <th scope="row">Password <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="Required Field" /></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="Close" /></a>
                                <span class="edge"></span>
                            </div>
                        </div>
                        {$passwd_type_desc}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Confirm Password <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="Required Field" /></th>
                    <td>{$form.user_passwd_confirm} <span id="{$pwConfirmMsg_id}"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <div class="mAgreement">
        <div class="desc">I agree to the <a href="agreement/agreement1.html" class="txtLink" target="_blank" onclick="{$agreementPopup}">Terms of Use</a> and the <a href="agreement/agreement2.html" class="txtLink" target="_blank" onclick="{$agreementPopup}">Privacy Policy</a>. (Required)</div>
        <div class="{$display_information|display} box">
            <label class="gLabel">{$form.agree_information_check} Sharing Information with Third Parties(optional)</label>
            <a href="agreement/agreement3.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">Show details</a>
        </div>
        <div class="{$display_consignment|display} box">
            <label class="gLabel">{$form.agree_consignment_check} Entrusting Personal Information (optional)</label>
            <a href="agreement/agreement4.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">Show details</a>
        </div>
        <div class="{$display_marketing|display} box">
            <label class="gLabel">{$sMarketingAgreeAllChecked} Agree to receive shopping information (optional)</label>
            <ul class="check">
                <li class="{$display_is_sms|display}">
                    <span>Do you agree to receive SMS?</span> {$form.is_sms}
                </li>
                <li class="{$display_is_news_mail|display}">
                    <span>Do you agree to receive e-mails?</span> {$form.is_news_mail}
                </li>
            </ul>
            <a href="agreement/agreement5.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">Show details</a>
        </div>
    </div>
 
    <div class="ec-base-button">
        <a href="#none" class="btnSubmitFix sizeM" onclick="{$action_func_join}">Activate your account</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>Terms of Use</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();">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>Privacy Policy</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();">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>Sharing Information with Third Parties</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();">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>Entrusting Personal Information</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();">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>Agree to receive shopping information</h3>
    </div>
    <div class="content">
        <div id="activationTerms">
            <p>You can receive discount coupons, benefits, events, new arrivals, and other valuable information from the shopping mall via Text or Email.</p>
            <p>However, some information will be sent without your agreement such as order/payment status and policy related articles.</p>
            <p>You can join the membership without agreeing to the optional categories, and update your status anytime at Edit Profile page once you join the membership.</p>
        </div>
    </div>
    <div class="ec-base-button">
        <a href="#none" class="btnNormalFix sizeS" onclick="self.close();">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>Activate your account</h2>
</div>
 
<div module="member_activation" class="activationArea">
    <!--@css(/css/module/member/activation.css)-->
    <!--
        $returnUrl = /member/join_result.html
     -->
    <div class="titleArea">
        <h3>Personal Information <span><img src="//img.echosting.cafe24.com/skin/mobile_en_US/member/ico_required.png" width="5" height="5" alt="Required Field"> Required Fields</span></h3>
    </div>
    <div class="ec-base-table typeWrite gClearBorderTop">
        <table border="1" summary="">
            <caption>Personal Information</caption>
            <colgroup>
                <col style="width:100px;">
                <col style="width:auto;">
            </colgroup>
            <tbody>
                <tr>
                    <th scope="row">Password <img src="//img.echosting.cafe24.com/skin/mobile_en_US/member/ico_required.png" width="5" height="5" alt="Required"></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">Confirm<br>Password <img src="//img.echosting.cafe24.com/skin/mobile_en_US/member/ico_required.png" width="5" height="5" alt="Required"></th>
                    <td>{$form.user_passwd_confirm}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <div class="mAgreement">
        <div class="desc">I agree to the <a href="agreement/agreement1.html" class="txtLink" target="_blank">Terms of Use</a> and the <a href="agreement/agreement2.html" class="txtLink" target="_blank">Privacy Policy</a>. (Required)</div>
        <div class="{$display_information|display} box">
            <label class="gLabel">{$form.agree_information_check} Sharing Information with Third Parties(optional)</label>
            <a href="agreement/agreement3.html" class="btnDetail" target="_blank">Show details</a>
        </div>
        <div class="{$display_consignment|display} box">
            <label class="gLabel">{$form.agree_consignment_check} Entrusting Personal Information (optional)</label>
            <a href="agreement/agreement4.html" class="btnDetail" target="_blank">Show details</a>
        </div>
        <div class="{$display_marketing|display} box">
            <label class="gLabel">{$sMarketingAgreeAllChecked} Agree to receive shopping information (optional)</label>
            <ul class="check">
                <li class="{$display_is_sms|display}">
                    <span>Do you agree to receive SMS?</span><br>{$form.is_sms}
                </li>
                <li class="{$display_is_news_mail|display}">
                    <span>Do you agree to receive e-mails?</span><br>{$form.is_news_mail}
                </li>
            </ul>
            <a href="agreement/agreement5.html" class="btnDetail" target="_blank">Show details</a>
        </div>
    </div>
 
    <div class="ec-base-button gFull">
        <button type="button" class="btnSubmit" onclick="{$action_func_join}">Activate your account</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>Agree to receive shopping information</h1>
    <div class="wrap">
        <div id="activationTerms">
            <p>You can receive discount coupons, benefits, events, new arrivals, and other valuable information from the shopping mall via Text or Email.</p><br>
            <p>However, some information will be sent without your agreement such as order/payment status and policy related articles.</p><br>
            <p>You can join the membership without agreeing to the optional categories, and update your status anytime at Edit Profile page once you join the membership.</p>
        </div>
    </div>
    <div class="ec-base-button gFull">
        <button type="button" class="btnEm" onclick="self.close();">Close</button>
    </div>
    <button type="button" class="btnClose" onclick="window.close()">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