Cafe24新着情報
[Mobileデザイン] モバイルシンプル注文書のデザイン適用ガイド - 注文完了 HTML/CSS (ベトナム語)
2020-02-06
平素よりCafe24をご利用いただき、誠にありがとうございます。
モバイルシンプル注文書は、デザインを変更することでショップにすぐ適用することができます。
詳細は以下の内容をご確認ください。
---------------------------------------------------------------------------------
■ Mobileデザイン > 注文完了(order_result.html)
- 位置 : Mobileデザイン > スマートデザイン編集ウィンドウ(ベトナム語ショップ) > 注文(order) > 注文完了(order_result.html)
▼ 以下のソースをすべてコピーし、既存のソースをシンプル注文書のソース(青)に変更してください。
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes">
<title>Hoàn tất đặt hàng</title>
<!--@css(/css/module/order/ec_orderform/form_onetouch.css)-->
<!-- If you want to create your own style, create a new CSS style sheet. Try coding #userStyle #mCafe24Order { } . -->
<!-- The code in includes "JQuery 1.4.4". Be careful to add another version of jQuery. -->
<!--@js(/layout/basic/js/common.js)-->
<!--@js(/js/module/order/ec_orderform/orders.js)-->
</head>
<body id="userStyle">
<header id="header">
<div class="header">
<h1 module="Layout_LogoTop"><a href="/index.html">{$mobile_title}</a></h1><!-- PC는 {$mall_name} / 모바일에서는 {$mobile_title} 변수 사용-->
<div class="headerMenu gLeft">
<span class="btnBack" module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}">Quay lại</a>
</span>
</div>
<div class="headerMenu gRight">
<span module="Layout_orderBasketcount" class="btnBasket">
<a href="/order/basket.html">Giỏ hàng<span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>
</span>
<a href="/myshop/index.html" module="Layout_statelogoff" class="btnMy">Đăng nhập</a>
<a href="/myshop/index.html" module="Layout_statelogon" class="btnMy">My shopping</a>
</div>
</div>
<div class="titleArea">
<h1>Đơn Hàng Hoàn Tất</h1>
</div>
</header>
<div id="mCafe24Order" class="typeHeader" module="Order_result" unroll="1">
<div class="resultArea">
<p class="message"><strong>Đơn hàng của bạn đã được thanh toán thành công.</strong></p>
<div class="resultInfo">
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>Thông tin thanh toán</caption>
<colgroup>
<col style="width:94px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">Đơn Hàng Số</th>
<td class="right"><span class="txtEm">{$order_id}</span></td>
</tr>
<tr>
<th scope="row">Số tiền thanh toán</th>
<td class="right">
<span class="txtEm">
{$result_order_price_front_head}{$result_order_price_front}{$result_order_price_front_tail}
<span class="refer {$result_order_ref_display|display}">({$result_order_price_back_head}{$result_order_price_back}{$result_order_price_back_tail})</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="pannelArea">
<div class="title">
<h2>Phương Thức Thanh Toán</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table typeView">
<table border="1">
<caption>Phương Thức Thanh Toán</caption>
<colgroup>
<col style="width:110px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">Phương Thức Thanh Toán</th>
<td>
{$paymethod_name}
<div class="methodDetail">{$paymethod_detail}</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="pannelArea">
<div class="title">
<h2>Địa chỉ giao hàng</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table typeView">
<table border="1">
<caption>Địa chỉ giao hàng</caption>
<colgroup>
<col style="width:110px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">Tên khách hàng</th>
<td>
{$rname}<br>
{$english_name} {$pron_name}<br>
({$o_email})
</td>
</tr>
<tr>
<th scope="row">Địa chỉ</th>
<td>
{$rzipcode} {$raddr}
<div class="{$receive_info_display|display}">
Nhận tại cửa hàng {$store_name}
<span class="gBlank5">{$store_receive_addr}</span>
<p class="ec-base-help {$store_receive_period_display|display}"><span class="txtNormal">({$store_receive_period})</span></p>
<span class="gBlank5"><button type="button" onclick="{$action_open_store}" class="btnNormal mini">Thông tin nơi nhận</button></span>
</div>
</td>
</tr>
<tr class="{$country_name_display|display}">
<th scope="row">Quốc Gia</th>
<td>{$country_name}</td>
</tr>
<tr>
<th scope="row">Liên hệ</th>
<td>{$rphone_1} <span class="ec-shop-delimiter {$r_phone_delimiter_display|display}"> / </span> {$rphone_2}</td>
</tr>
<tr>
<th scope="row">Tin nhắn vận chuyển</th>
<td>
{$sc_name}
<span class="gBlank5">{$hope_date}</span>
<span class="gBlank5">{$hope_time}</span>
<span class="gBlank5">{$rmessage}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="pannelArea">
<div class="title">
<h2>Sản phẩm đặt hàng</h2>
</div>
<div class="contents">
<div class="orderArea {$oversea_display|display}" nspace="oversea">
<div module="Order_oversearesultlist">
<div class="ec-base-prdInfo">
<div class="prdBox">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$product_image}" alt="" width="90" height="90"></a></div>
<div class="description">
<strong class="prdName" title="Product Name">{$set_product_icon} {$product_name_link}</strong>
<ul class="info">
<li title="Expiration Date" class="{$expiration_date_display|display}">{$expiration_date} Sử dụng từ</li>
<li title="Option">
<p class="option {$product_option_str_display|display}">{$option_str}</p>
<ul class="option" module="Order_optionSet">
<li><strong>{$product_name}</strong>{$option_str} ({$qty} sản phẩm)</li>
<li><strong>{$product_name}</strong>{$option_str} ({$qty} sản phẩm)</li>
</ul>
</li>
<li class="price">
<span class="priceValue {$discount}" title="Price">
{$product_price_front_head}{$product_price_front}{$product_price_front_tail}
<span class="refer {$product_price_ref_display|display}">({$product_price_back_head}{$product_price_back}{$product_price_back_tail})</span>
</span>
<span class="{$product_sale_price_display|display}" title="Giá bán đã giảm">{$product_sale_price_front_head}{$product_sale_price_front}{$product_sale_price_front_tail} <span class="refer {$product_sale_price_ref_display|display}">({$product_sale_price_back_head}{$product_sale_price_back}{$product_sale_price_back_tail})</span></span>
<span title="Quantity" class="quantity">{$product_quantity} sản phẩm</span>
</li>
</ul>
</div>
</div>
<div class="prdFoot" title="Tổng">
<span class="gLeft">Tổng</span>
<span class="txtStrong gRight">
{$product_total_price_front_head}{$product_total_price_front}{$product_total_price_front_tail}
<span class="refer {$product_total_price_ref_display|display}">({$product_total_price_back_head}{$product_total_price_back}{$product_total_price_back_tail})</span>
</span>
</div>
</div>
<div class="ec-base-prdInfo">
<div class="prdBox">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$product_image}" alt="" width="90" height="90"></a></div>
<div class="description">
<strong class="prdName" title="Product Name">{$set_product_icon} {$product_name_link}</strong>
<ul class="info">
<li title="Expiration Date" class="{$expiration_date_display|display}">{$expiration_date} 以内に使用</li>
<li title="Option">
<p class="option {$product_option_str_display|display}">{$option_str}</p>
<ul class="option" module="Order_optionSet">
<li><strong>{$product_name}</strong>{$option_str} ({$qty} sản phẩm)</li>
<li><strong>{$product_name}</strong>{$option_str} ({$qty} sản phẩm)</li>
</ul>
</li>
<li class="price">
<span class="priceValue {$discount}" title="Price">
{$product_price_front_head}{$product_price_front}{$product_price_front_tail}
<span class="refer {$product_price_ref_display|display}">({$product_price_back_head}{$product_price_back}{$product_price_back_tail})</span>
</span>
<span class="{$product_sale_price_display|display}" title="Giá bán đã giảm">{$product_sale_price_front_head}{$product_sale_price_front}{$product_sale_price_front_tail} <span class="refer {$product_sale_price_ref_display|display}">({$product_sale_price_back_head}{$product_sale_price_back}{$product_sale_price_back_tail})</span></span>
<span title="Quantity" class="quantity">{$product_quantity} sản phẩm</span>
</li>
</ul>
</div>
</div>
<div class="prdFoot" title="Tổng">
<span class="gLeft">Tổng</span>
<span class="txtStrong gRight">
{$product_total_price_front_head}{$product_total_price_front}{$product_total_price_front_tail}
<span class="refer {$product_total_price_ref_display|display}">({$product_total_price_back_head}{$product_total_price_back}{$product_total_price_back_tail})</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pannelArea {$gift_display|display}" nspace="gift">
<div class="title">
<h2>Quà tặng</h2>
</div>
<div class="contents">
<div class="orderArea">
<div module="Order_giftresultlist">
<div class="ec-base-prdInfo">
<div class="prdBox">
<div class="thumbnail"><img src="{$product_image}" alt="" width="90" height="90"></div>
<div class="description">
<strong class="prdName" title="Product Name"><span class="{$gift_icon_display|display}"><img src="{$gift_icon}" /></span> {$product_name}</strong>
<ul class="info">
<li title="Option">
<p class="option {$option_display|display}">{$option_str}</p>
</li>
<li class="price">
<span title="Quantity" class="quantity">{$product_quantity}点</span>
</li>
</ul>
</div>
</div>
<div class="prdFoot" title="Tổng">
<span class="gLeft">Tổng</span>
<span class="txtStrong gRight">
{$price_unit_head}{$product_total_price}{$price_unit_tail}
</span>
</div>
</div>
<div class="ec-base-prdInfo">
<div class="prdBox">
<div class="thumbnail"><img src="{$product_image}" alt="" width="90" height="90"></div>
<div class="description">
<strong class="prdName" title="商品名"><span class="{$gift_icon_display|display}"><img src="{$gift_icon}" /></span> {$product_name}</strong>
<ul class="info">
<li title="オプション">
<p class="option {$option_display|display}">{$option_str}</p>
</li>
<li class="price">
<span title="数量" class="quantity">{$product_quantity} sản phẩm</span>
</li>
</ul>
</div>
</div>
<div class="prdFoot" title="Tổng">
<span class="gLeft">Tổng</span>
<span class="txtStrong gRight">
{$price_unit_head}{$product_total_price}{$price_unit_tail}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pannelArea">
<div class="title">
<h2>Thông tin thanh toán</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>Thông tin thanh toán</caption>
<colgroup>
<col style="width:160px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">Thông tin sản phẩm</th>
<td class="right">{$price_unit_head}{$total_product_base_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_vat_display|display}">
<th scope="row">VAT</th>
<td class="right">+{$price_unit_head}{$total_vat_price}{$price_unit_tail}</td>
</tr>
<tr class="ec-order-expandwrap {$total_sale_display|display}">
<th scope="row"><strong class="ec-order-expand">Giảm giá/Thanh toán phụ thêm</strong></th>
<td class="right">-{$price_unit_head}{$total_sale_price_front}{$price_unit_tail}</td>
</tr>
<tr class="discountArea">
<td colspan="2">
<div class="ec-base-box {$total_benefit_display|display}">
<strong class="heading">Tổng cộng</strong>
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>Nội dung giảm giá</caption>
<colgroup>
<col style="width:150px">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="{$total_periodsale_price_display|display}">
<th>Giảm giá có thời hạn</th>
<td class="right">-{$price_unit_head}{$total_periodsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_membersale_price_display|display}">
<th>Giảm giá thành viên</th>
<td class="right">-{$price_unit_head}{$total_membersale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_rebuysale_price_display|display}">
<th>{$rebuysale_head} Giảm giá tái đặt hàng</th>
<td class="right">-{$price_unit_head}{$total_rebuysale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_bulksale_price_display|display}">
<th>Giảm giá đặt hàng số lượng lớn</th>
<td class="right">-{$price_unit_head}{$total_bulksale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_newproductsale_price|display}">
<th>Giảm giá sản phẩm mới</th>
<td class="right">-{$price_unit_head}{$total_newproductsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_setproductsale_price|display}">
<th>Mức giảm cho Sản Phẩm Được Áp Dụng</th>
<td class="right">-{$price_unit_head}{$total_setproductsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_paymethodsale_price_display|display}">
<th>Giảm giá mua hàng bằng tiền mặt</th>
<td class="right">-{$price_unit_head}{$total_paymethodsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_membergroupsale_price_display|display}">
<th>Giảm giá theo cấp bậc thành viên</th>
<td class="right">-{$price_unit_head}{$total_membergroupsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_shipfeesale_price_display|display}">
<th>Giảm giá phí vận chuyển</th>
<td class="right">-{$price_unit_head}{$total_shipfeesale_price}{$price_unit_tail}</td>
</tr>
</tbody>
<tbody class="right {$total_appproductsale_price_display|display}">
{$total_appproductsale_price_detail}
</tbody>
<tbody class="right {$total_appordersale_price_display|display}">
{$total_appordersale_price_detail}
</tbody>
</table>
</div>
</div>
<div class="ec-base-box {$coupon_display|display}">
<strong class="heading">Số tiền giảm giá coupon</strong>
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>割引内訳</caption>
<colgroup>
<col style="width:150px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th>Số tiền giảm giá coupon</th>
<td class="right">-{$price_unit_head}{$coupon_discount}{$price_unit_tail}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ec-base-box {$total_addpay_summary_display|display}">
<strong class="heading">Phương Thức Thanh Toán Khác</strong>
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>Phương Thức Thanh Toán Khác</caption>
<colgroup>
<col style="width:150px">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="{$mileage_display|display}">
<th scope="row">{$mileage_name}</th>
<td class="right">-{$price_unit_head}{$mileage_used_amount}{$mileage_unit}</td>
</tr>
<tr class="{$deposit_display|display}">
<th scope="row">{$deposit_name}</th>
<td class="right">-{$price_unit_head}{$deposit_used_amount}{$deposit_unit}</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Vận Chuyển</th>
<td class="right">+{$price_unit_head}{$total_basic_ship_fee}{$price_unit_tail}</td>
</tr>
<tr class="{$total_local_ship_fee_display|display}">
<th scope="row">Phụ Phí Vận Chuyển</th>
<td class="right">+{$price_unit_head}{$total_local_ship_fee}{$price_unit_tail}</td>
</tr>
<tr class="{$defer_commission_display|display}">
<th scope="row">Phí thanh toán trả sau</th>
<td class="right">+{$price_unit_head}{$defer_commission}{$price_unit_tail}</td>
</tr>
</tbody>
</table>
</div>
<div class="totalPay gBlank10">
<h3 class="heading">Tổng cộng</h3>
<strong class="txtStrong">
{$result_order_price_front_head}{$result_order_price_front}{$result_order_price_front_tail}
<span class="refer {$result_order_ref_display|display}">({$result_order_price_back_head}{$result_order_price_back}{$result_order_price_back_tail})</span>
</strong>
</div>
</div>
</div>
</div>
<div class="pannelArea {$ordadd.display|display}">
<div class="title">
<h2>Thông tin bổ sung</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table typeView">
<table border="1">
<caption>Thông tin bổ sung</caption>
<colgroup>
<col style="width:94px">
<col style="width:auto">
</colgroup>
<tbody module="Order_ordadd">
<tr>
<th scope="row">{$title}</th>
<td>{$content}</td>
</tr>
<tr>
<th scope="row">{$title}</th>
<td>{$content}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="pannelArea {$total_mileage_summary_display|display}">
<div class="title">
<h2>Tích điểm {$mileage_name}</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>Tích điểm {$mileage_name}</caption>
<colgroup>
<col style="width:160px">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="{$total_product_mileage_display|display}">
<th scope="row">Sản phẩm {$mileage_name}</th>
<td class="right">{$mileage_unit_head}{$total_product_mileage_price}{$mileage_unit}</td>
</tr>
<tr class="{$total_member_mileage_display|display}">
<th scope="row">Thành Viên {$mileage_name}</th>
<td class="right">{$mileage_unit_head}{$total_member_mileage_price}{$mileage_unit}</td>
</tr>
<tr class="{$total_coupon_mileage_display|display}">
<th scope="row">Giảm Giá {$mileage_name}</th>
<td class="right">{$mileage_unit_head}{$total_coupon_mileage_price}{$mileage_unit}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="totalPay">
<h3 class="heading">Tích điểm (dự kiến) {$mileage_name}</h3>
<strong class="txtEm">{$mileage_unit_head}{$total_mileage_price}{$mileage_unit_tail}</strong>
</div>
</div>
</div>
<div class="ec-base-button gColumn">
<a href="/myshop/order/list.html" class="btnEm">Chi tiết đơn hàng</a>
<a href="/" class="btnSubmit">Tiếp Tục Mua Sắm</a>
</div>
</div>
</body>
</html>
Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。