Cafe24新着情報
[PCデザイン] [スマートデザイン] PCレスポンシブ型シンプル注文書のデザイン適用ガイド - 注文完了 HTML/CSS (中国語・繁体字)
2020-02-06
PCレスポンシブ型シンプル注文書は、デザインを変更することでショップにすぐ適用することができます。
詳細は以下の内容をご確認ください。
---------------------------------------------------------------------------------
■ PCデザイン > 注文完了(order_result.html)
- 位置 : PCデザイン > スマートデザイン編集ウィンドウ(繁体字ショップ) > 注文(order) > 注文完了(order_result.html)
▼ 以下のソースをすべてコピーし、注文完了(order_result.html)の既存のソースをシンプル注文書のソース(青)に変更してください。
<!doctype html>
<html lang="zh">
<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>完成購買</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">{$mall_name}</a></h1><!-- PC는 {$mall_name} / 모바일에서는 {$mobile_title} 변수 사용-->
<div class="headerMenu gLeft">
<span class="btnBack" module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}">返回</a>
</span>
</div>
<div class="headerMenu gRight">
<span module="Layout_orderBasketcount" class="btnBasket">
<a href="/order/basket.html">購物車<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">登入</a>
<a href="/myshop/index.html" module="Layout_statelogon" class="btnMy">會員中心</a>
</div>
</div>
<div class="titleArea">
<h1>完成購買</h1>
</div>
</header>
<div id="mCafe24Order" class="typeHeader" module="Order_result" unroll="1">
<div class="resultArea">
<p class="message"><strong>您的訂單已經成功送出!</strong></p>
<div class="resultInfo">
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>付款資料</caption>
<colgroup>
<col style="width:94px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">訂單號</th>
<td class="right"><span class="txtEm">{$order_id}</span></td>
</tr>
<tr>
<th scope="row">最終付款金額</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>付款方式</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table typeView">
<table border="1">
<caption>付款方式</caption>
<colgroup>
<col style="width:110px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">付款方式</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>收件地址</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table typeView">
<table border="1">
<caption>收件地址</caption>
<colgroup>
<col style="width:110px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">姓名</th>
<td>
{$rname}<br>
{$english_name} {$pron_name}<br>
({$o_email})
</td>
</tr>
<tr class="{$country_name_display|display}">
<th scope="row">國家</th>
<td>{$country_name}</td>
</tr>
<tr>
<th scope="row">地址</th>
<td>
{$rzipcode} {$raddr}
<div class="{$receive_info_display|display}">
實體店鋪取件 {$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">門市說明</button></span>
</div>
</td>
</tr>
<tr class="{$si_gun_do_display|display}">
<th scope="row">區/市</th>
<td>{$si_gun_do}</td>
</tr>
<tr class="{$ju_do_display|display}">
<th scope="row">市/縣</th>
<td>{$ju_do}</td>
</tr>
<tr>
<th scope="row">聯絡方式</th>
<td>{$rphone_1} <span class="ec-shop-delimiter {$r_phone_delimiter_display|display}"> / </span> {$rphone_2}</td>
</tr>
<tr>
<th scope="row">配送簡訊</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>所購商品資料</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} 內使用</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} 件)</li>
<li><strong>{$product_name}</strong>{$option_str} ({$qty} 件)</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="Discounted price">{$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} 件</span>
</li>
</ul>
</div>
</div>
<div class="prdFoot" title="Total">
<span class="gLeft">小計</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} 件)</li>
<li><strong>{$product_name}</strong>{$option_str} ({$qty} 件)</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="Discounted price">{$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} 件</span>
</li>
</ul>
</div>
</div>
<div class="prdFoot" title="Total">
<span class="gLeft">小計</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>贈品</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="Total">
<span class="gLeft">小計</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="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="Total">
<span class="gLeft">小計</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>結帳資料</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>結帳資料</caption>
<colgroup>
<col style="width:160px">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th scope="row">商品金額</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">附加稅</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">優惠折扣/額外付款金額</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">總計</strong>
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>優惠明細</caption>
<colgroup>
<col style="width:150px">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="{$total_mobilesale_price_display|display}">
<th>手機版優惠</th>
<td class="right">-{$price_unit_head}{$total_mobilesale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_periodsale_price_display|display}">
<th>限期折扣</th>
<td class="right">-{$price_unit_head}{$total_periodsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_membersale_price_display|display}">
<th>會員折扣</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}再購買折扣</th>
<td class="right">-{$price_unit_head}{$total_rebuysale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_bulksale_price_display|display}">
<th>大量購買折扣</th>
<td class="right">-{$price_unit_head}{$total_bulksale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_pbpsale_price_display|display}">
<th>About pbp折扣</th>
<td class="right">-{$price_unit_head}{$total_pbpsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_newproductsale_price|display}">
<th>新上品折扣</th>
<td class="right">-{$price_unit_head}{$total_newproductsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_setproductsale_price|display}">
<th>套組折扣</th>
<td class="right">-{$price_unit_head}{$total_setproductsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_paymethodsale_price_display|display}">
<th>付款方式折扣</th>
<td class="right">-{$price_unit_head}{$total_paymethodsale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_shipfeesale_price_display|display}">
<th>運費折扣優惠</th>
<td class="right">-{$price_unit_head}{$total_shipfeesale_price}{$price_unit_tail}</td>
</tr>
<tr class="{$total_membergroupsale_price_display|display}">
<th>會員等級折扣</th>
<td class="right">-{$price_unit_head}{$total_membergroupsale_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">優惠券折扣</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>優惠券折扣</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">額外付款明細</strong>
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>額外付款明細</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">運費</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">地區運費</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">後支付手續費</th>
<td class="right">+{$price_unit_head}{$defer_commission}{$price_unit_tail}</td>
</tr>
<tr class="{$admin_amount_display|display}">
<th scope="row">管理者設定金額</th>
<td class="right">+{$price_unit_head}{$admin_amount}{$price_unit_tail}</td>
</tr>
</tbody>
</table>
</div>
<div class="totalPay gBlank10">
<h3 class="heading">總計</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>更多資料</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table typeView">
<table border="1">
<caption>更多資料</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>購物金明細 {$mileage_name}</h2>
</div>
<div class="contents">
<div class="segment">
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>購物金明細 {$mileage_name}</caption>
<colgroup>
<col style="width:160px">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="{$total_product_mileage_display|display}">
<th scope="row">商品 {$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">會員 {$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">優惠券 {$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">預計生效購物金 {$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">確認訂單</a>
<a href="/" class="btnSubmit">繼續購物</a>
</div>
</div>
</body>
</html>
Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。