Cafe24新着情報
[PCデザイン] [スマートデザイン] PCレスポンシブ型シンプル注文書のデザイン適用ガイド - 注文完了 HTML/CSS (中国語・簡体字)
2020-02-06
平素よりCafe24をご利用いただき、誠にありがとうございます。
PCレスポンシブ型シンプル注文書は、デザインを変更することでショップにすぐ適用することができます。
詳細は以下の内容をご確認ください。
---------------------------------------------------------------------------------
■ PCデザイン > 注文完了(order_result.html)
- 位置 : PCデザイン > スマートデザイン編集ウィンドウ(簡体字ショップ) > 注文(order) > 注文完了(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>
<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="{$country_name_display|display}">
<th scope="row">国家</th>
<td>{$country_name}</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>有关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>
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。