Cafe24新着情報

[Mobileデザイン] モバイルシンプル注文書のデザイン適用ガイド - クーポン適用ポップアップ HTML/CSS (中国語・簡体字)

2020-02-06



平素よりCafe24をご利用いただき、誠にありがとうございます。


モバイルシンプル注文書は、デザインを変更することでショップにすぐ適用することができます。


詳細は以下の内容をご確認ください。


---------------------------------------------------------------------------------


■ Mobileデザイン > クーポン選択(coupon_select.html)


- 位置 : Mobileデザイン > スマートデザイン編集ウィンドウ(簡体字ショップ) > クーポン(coupon) > クーポン選択(coupon_select.html)


▼ 以下のソースをすべてコピーし、既存のソースをシンプル注文書のソース(青)に変更してください。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <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)-->
</head>
<body id="popup" class="layer">
<div id="userStyle">
    <div id="mCafe24Order">
        <div module="Coupon_SelectNew" class="ec-base-layer typeWide gClearFlex">
            <!--
                $prd_non_coupon_display = F
            -->
            <h1>查看及适用优惠券</h1>
            <div class="wrap">
                <div class="pannelArea {$bPrdCoupon|display}">
                    <div class="title">
                        <h2>适用商品优惠券</h2>
                    </div>
                    <div class="contents">
                        <div module="Coupon_aPrd" class="segment">
                            <div class="ec-base-box">
                                <strong class="prdName">{$product_name}<span>{$sOptStr}</span><span id="{$coupon_prd_hidden}">{$sHidden}</span></strong>
                                <div class="ec-base-table gCellNarrow">
                                    <table border="1">
                                        <caption>适用商品优惠券</caption>
                                        <colgroup>
                                            <col style="width:102px" />
                                            <col style="width:auto" />
                                        </colgroup>
                                        <tbody>
                                        <tr>
                                            <th scope="row">售价</th>
                                            <td class="right">{$sOrdPrice}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">折扣</th>
                                            <td id="{$coupon_prd_total_sale_price}" class="right">{$sTotalMemberSalePrice}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <span id="{$coupon_prd_select}" class="gBlank14">{$sCoupon}</span>
                            <div class="totalPay gBlank14">
                                <h3 class="heading">优惠券折扣</h3>
                                <strong class="txtStrong">{$sCouponSaleSpan}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pannelArea {$bOrdCoupon|display}">
                    <div class="title">
                        <h2>适用订单优惠券</h2>
                    </div>
                    <div class="contents">
                        <div class="segment">
                            <ul id="{$selected_order_coupon_id}" class="ordCouponList">
                                <li>{$sOrdCoupon}</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="pannelArea ec-shipCoupon">
                    <div class="title">
                        <h2>适用运费优惠券</h2>
                    </div>
                    <div class="contents">
                        <div class="segment">
                            <div class="ec-base-box">
                                <ul id="{$selected_ship_coupon_id}" class="shipCouponList"></ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pannelArea">
                    <div class="title">
                        <h2>优惠券折扣总金额</h2>
                        <span class="txtStrong gRight">{$price_unit_head}<span id="{$total_coupon_discount_id}">0</span>{$price_unit_tail}</span>
                    </div>
                    <div class="contents">
                        <div class="ec-base-table gCellNarrow">
                            <table border="1">
                                <caption>优惠券折扣总金额</caption>
                                <colgroup>
                                    <col style="width:138px" />
                                    <col style="width:auto" />
                                </colgroup>
                                <tbody>
                                <tr>
                                    <th scope="row">商品优惠券折扣总金额(积分)</th>
                                    <td class="right">{$price_unit_head}<span id="{$product_coupon_discount_id}">0</span>{$price_unit_tail}/<span id="{$product_coupon_mileage_id}">0</span></td>
                                </tr>
                                <tr>
                                    <th scope="row">订单优惠券折扣总金额(积分)</th>
                                    <td class="right">{$price_unit_head}<span id="{$order_coupon_discount_id}">0</span>{$price_unit_tail}/<span id="{$order_coupon_mileage_id}">0</span></td>
                                </tr>
                                <tr>
                                    <th scope="row">运费优惠券折扣总金额</th>
                                    <td class="right">{$price_unit_head}<span id="{$ship_coupon_discount_id}">0</span>{$price_unit_tail}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="helpArea">
                            <ul class="ec-base-help">
                                <li>优惠券折扣会在会员等级优惠之后适用,所以最终折扣金额会与当前页的折扣金额不同。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ec-base-button gFull">
                <button type="button" class="btnSubmit" onclick="{$action_result}">适用优惠券</button>
            </div>
            <button type="button" class="btnClose" onclick="javascript:self.close();">关闭</button>
        </div>
    </div>
</div>
</body>
</html>




Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。

今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。引き続き、ご愛顧のほどよろしくお願い申し上げます。

ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。