메뉴 건너 뛰기

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 Việ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)

<!--@layout(/layout/basic/layout.html)-->
 
<div class="titleArea">
    <h2>Kích hoạt tài khoản</h2>
</div>
 
<div module="member_activation" class="activationArea">
    <!--@css(/css/module/member/activation.css)-->
    <!--
        $returnUrl = /member/join_result.html
     -->
    <h3>Thông Tin Cá Nhân</h3>
    <p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="Required Field" /> Mục bắt buộc</p>
    <div class="ec-base-table typeWrite">
        <table border="1" summary="">
            <caption>Thông Tin Cá Nhân</caption>
            <colgroup>
                <col style="width:150px;" />
                <col style="width:auto;" />
            </colgroup>
            <tbody>
                <tr>
                    <th scope="row">Mật Khẩu <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">Xác Nhận Mật Khẩu <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">Đồng ý với tất cả nội dung bắt buộc của <a href="agreement/agreement1.html" class="txtLink" target="_blank" onclick="{$agreementPopup}">Điều khoản sử dụng</a>, <a href="agreement/agreement2.html" class="txtLink" target="_blank" onclick="{$agreementPopup}">Chính sách thu thập và sử dụng thông tin cá nhân</a>.</div>
        <div class="{$display_information|display} box">
            <label class="gLabel">{$form.agree_information_check} Chia Sẻ Thông Tin với Bên Thứ Ba (không bắt buộc)</label>
            <a href="agreement/agreement3.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">Xem nội dung</a>
        </div>
        <div class="{$display_consignment|display} box">
            <label class="gLabel">{$form.agree_consignment_check} Ủy Thác Thông Tin Cá Nhân (không bắt buộc)</label>
            <a href="agreement/agreement4.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">Xem nội dung</a>
        </div>
        <div class="{$display_marketing|display} box">
            <label class="gLabel">{$sMarketingAgreeAllChecked} Đồng ý nhận thông tin mua sắm (không bắt buộc)</label>
            <ul class="check">
                <li class="{$display_is_sms|display}">
                    <span>Bạn có đồng ý nhận SMS?</span> {$form.is_sms}
                </li>
                <li class="{$display_is_news_mail|display}">
                    <span>Bạn có đồng ý nhận email?</span> {$form.is_news_mail}
                </li>
            </ul>
            <a href="agreement/agreement5.html" class="btnDetail" target="_blank" onclick="{$agreementPopup}">Xem nội dung</a>
        </div>
    </div>
 
    <div class="ec-base-button">
        <a href="#none" class="btnSubmitFix sizeM" onclick="{$action_func_join}">Kích hoạt tài khoản</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>Điều Khoản và Điều Kiện</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();">Đóng</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>Chính Sách Bảo Mật</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();">Đóng</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>Chia Sẻ Thông Tin với Bên Thứ Ba</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();">Đóng</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>Ủy Thác Thông Tin Cá Nhân</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();">Đóng</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>Đồng ý nhận thông tin mua sắm</h3>
    </div>
    <div class="content">
        <div id="activationTerms">
            <p>Bạn sẽ nhận được thông tin về mã giảm giá, ưu đãi, sự kiện, hàng mới về và các thông tin giá trị khác từ shopping mall qua Tin nhắn hoặc Email.</p><br>
            <p>Tuy nhiên, một số thông tin sẽ được gửi mà không cần sự đồng ý của bạn như tình trạng đơn hàng/thanh toán và thông tin liên quan đến chính sách.</p><br>
            <p>Bạn có thể đăng ký làm thành viên mà không cần đồng ý với các danh mục không bắt buộc, và có thể cập nhật trạng thái bất kì lúc nào tại trang Sửa Hồ Sơ khi bạn đã trở thành thành viên.</p>
        </div>
    </div>
    <div class="ec-base-button">
        <a href="#none" class="btnNormalFix sizeS" onclick="self.close();">Đóng</a>
    </div>
    <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="Đóng" 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>Kích hoạt tài khoản</h2>
</div>
 
<div module="member_activation" class="activationArea">
    <!--@css(/css/module/member/activation.css)-->
    <!--
        $returnUrl = /member/join_result.html
     -->
    <div class="titleArea">
        <h3>Thông Tin Cá Nhân <span><img src="//img.echosting.cafe24.com/skin/mobile_vi_VN/member/ico_required.png" width="5" height="5" alt="Required">Mục bắt buộc</span></h3>
    </div>
    <div class="ec-base-table typeWrite gClearBorderTop">
        <table border="1" summary="">
            <caption>Thông Tin Cá Nhân</caption>
            <colgroup>
                <col style="width:100px;">
                <col style="width:auto;">
            </colgroup>
            <tbody>
                <tr>
                    <th scope="row">Mật Khẩu <img src="//img.echosting.cafe24.com/skin/mobile_vi_VN/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">Xác Nhận<br> Mật Khẩu <img src="//img.echosting.cafe24.com/skin/mobile_vi_VN/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">Đồng ý với tất cả nội dung bắt buộc của <a href="agreement/agreement1.html" class="txtLink" target="_blank" title="Mở cửa sổ mới">Điều khoản sử dụng</a>, <a href="agreement/agreement2.html" class="txtLink" target="_blank" title="Mở cửa sổ mới">Chính sách thu thập và sử dụng thông tin cá nhân</a>.</div>
        <div class="{$display_information|display} box">
            <label class="gLabel">{$form.agree_information_check} Chia Sẻ Thông Tin với Bên Thứ Ba (không bắt buộc)</label>
            <a href="agreement/agreement3.html" class="btnDetail" target="_blank" title="Mở cửa sổ mới">Xem nội dung</a>
        </div>
        <div class="{$display_consignment|display} box">
            <label class="gLabel">{$form.agree_consignment_check} Ủy Thác Thông Tin Cá Nhân (không bắt buộc)</label>
            <a href="agreement/agreement4.html" class="btnDetail" target="_blank" title="Mở cửa sổ mới">Xem nội dung</a>
        </div>
        <div class="{$display_marketing|display} box">
            <label class="gLabel">{$sMarketingAgreeAllChecked} Đồng ý nhận thông tin mua sắm (không bắt buộc)</label>
            <ul class="check">
                <li class="{$display_is_sms|display}">
                    <span>Bạn có đồng ý nhận SMS?</span><br>{$form.is_sms}
                </li>
                <li class="{$display_is_news_mail|display}">
                    <span>Bạn có đồng ý nhận email?</span><br>{$form.is_news_mail}
                </li>
            </ul>
            <a href="agreement/agreement5.html" class="btnDetail" target="_blank" title="Mở cửa sổ mới">Xem nội dung</a>
        </div>
    </div>
 
    <div class="ec-base-button gFull">
        <button type="button" class="btnSubmit" onclick="{$action_func_join}">Kích hoạt tài khoản</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>Đồng ý nhận thông tin mua sắm</h1>
    <div class="wrap">
        <div id="activationTerms">
            <p>Bạn sẽ nhận được thông tin về mã giảm giá, ưu đãi, sự kiện, hàng mới về và các thông tin giá trị khác từ shopping mall qua Tin nhắn hoặc Email.</p><br>
            <p>Tuy nhiên, một số thông tin sẽ được gửi mà không cần sự đồng ý của bạn như tình trạng đơn hàng/thanh toán và thông tin liên quan đến chính sách.</p><br>
            <p>Bạn có thể đăng ký làm thành viên mà không cần đồng ý với các danh mục không bắt buộc, và có thể cập nhật trạng thái bất kì lúc nào tại trang Sửa Hồ Sơ khi bạn đã trở thành thành viên.</p>
        </div>
    </div>
    <div class="ec-base-button gFull">
        <button type="button" class="btnEm" onclick="self.close();">Đóng</button>
    </div>
    <button type="button" class="btnClose" onclick="window.close()">Đóng</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