Cafe24新着情報

[PCデザイン] 割引コードのデザイン適用ガイド[中国語(繁体字)ショップ] - HTML/CSS

2020-02-12



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


割引コード機能を使用するためのデザイン適用方法についてご案内します。


以下の内容をご確認の上、デザインを修正してください。




■ PCデザイン > スマートデザイン

1. 位置 : 注文(order) > 注文書作成(orderform.html)


以下のように青色のソースを追加します。

## 上略 ##


  <td>{$price_unit_head}<strong id="{$total_addsale_price_id}">{$total_addsale_price}</strong>{$price_unit_tail}</td>
</tr>
<tr class="{$discountcode_modify_class}">
    <th scope="row">適用折扣代碼</th>
    <td>
        <span id="ec_discountcode_price"></span>
        <a href="#none" class="btnSubmit" id="ec_discountcode_clear">重啟</a>
        <ul id="ec_discountcode_info" class="info">
        </ul>
    </td>
</tr>
<tr class="{$discountcode_display|display} {$discountcode_select_class}">
    <th scope="row">適用折扣代碼</th>
    <td>
        <input type="text" name="ec_discountcode" class="inputTypeText"/>
        <a href="#none" id="ec_discountcode" class="btnSubmit">適用</a>
    </td>
</tr>
<tr class="{$coupon_display|display} {$coupon_select_class}">


## 下略 ##


2. 位置 : 注文(order) > 注文情報確認(order_confirm_layer.html)


以下のように青色のソースを追加します。

## 上略 ##


    <td><span class="grid" id="{$confirm_total_coupon_price_id}"></span></td>
</tr>
<tr id="{$confirm_total_discountcode_price_area}">
    <th scope="row">適用折扣代碼</th>
    <td>
        <span id="{$confirm_total_discountcode_price_id}"></span>
        <ul id="{$confirm_total_discountcode_price_info}" class="info">
        </ul>
    </td>
</tr>
<tr id="{$confirm_total_benefit_price_area}">


## 下略 ##



3. 位置 : 注文(order) > 注文完了(order_result.html)


以下のように青色のソースを追加します。

## 上略 ##


{$price_unit_head}{$total_shipfeesale_price}{$price_unit_tail}</span></li>
    <li class="{$discountcode_display|display}"><strong class="term">適用折扣代碼</strong><span class="desc">{$price_unit_head}{$discountcode_price_view}{$price_unit_tail}</span></li>
</ul>


## 下略 ##



4. 位置 : マイページ(myshop) > 注文履歴(order) > 註文詳細内容(detail.html)


以下のように青色のソースを追加します。

## 上略 ##



    </td>
</tr>
<tr class="{$total.total_discountcode_price_display|display}">
    <th scope="row">適用折扣代碼</th>
    <td>
        <span class="gSpace20">{$total.price_unit_head}{$total.total_discountcode_price}{$total.price_unit_tail} /
        {$total.total_discountcode_price_detail}</span>
 
    </td>
</tr>
<tr class="{$total.total_benefit_price_display|display}">


## 下略 ##


■ Mobileデザイン > スマートデザイン

1. 位置 : 注文(order) > 注文書作成(orderform.html)


以下のように青色のソースを追加します。

## 上略 ##


<div class="ec-base-table typeWrite discount">
    <table border="1">
        <caption>付款資料</caption>
        <colgroup>
            <col style="width:100px;">
            <col style="width:auto;">
        </colgroup>
        <tbody>
        <tr class="{$discountcode_display|display} {$discountcode_select_class}">
            <th scope="row">適用折扣代碼</th>
            <td>
                <button type="button" class="btnBasic" id="ec_discountcode">適用</button>
                <input type="text" name="ec_discountcode">
            </td>
        </tr>
        <tr class="{$discountcode_modify_class}">
            <th scope="row">適用折扣代碼</th>
            <td>
                <button type="button" class="btnBasic" id="ec_discountcode_clear">重啟</button>
                \<span id="ec_discountcode_price" class="txtEm"></span>
                <ul class="ec-base-help typeDash" id="ec_discountcode_info" >
                </ul>
            </td>
        </tr>
        </tbody>
        <tbody>
            <tr class="{$coupon_display|display} {$coupon_select_class}">
                <th scope="row">適用優待券</th>
                <td>
                    可用優待券: <strong class="txtEm">{$coupon_cnt}</strong>張
                    <p>
                        <a href="#none" class="btnBasic" id="{$btn_coupon_select}">適用優待券</a>
                        <span class="price">{$price_unit_head}<span id="{$total_coupon_discount_id}">0</span>{$price_unit_tail}</span>
                    </p>
                </td>
            </tr>


## 下略 ##


2. 位置 : 注文(order) > 注文情報確認(order_confirm_layer.html)


以下のように青色のソースを追加します。

## 上略 ##



        <td id="{$confirm_total_membergroupsale_id}"></td>
    </tr>
     <tr id="{$confirm_total_discountcode_price_area}">
        <th>適用折扣代碼</th>
        <td id="{$confirm_total_discountcode_price_id}"></td>
    </tr>
</tbody>


## 下略 ##



3. 位置 : 注文(order) > 注文完了(order_result.html)


以下のように青色のソースを追加します。

## 上略 ##


<td>{$price_unit_head}{$total_shipfeesale_price}{$price_unit_tail}</td>
                                </tr>
                                <tr class="{$discountcode_display|display}">
                                    <th scope="row">適用折扣代碼</th>
                                    <td>{$price_unit_head}{$discountcode_price_view}{$price_unit_tail}</td>
                                </tr>
                            </tbody>


## 下略 ##


4. 位置 : マイページ(myshop) > 注文履歴(order) > 註文詳細内容(detail.html)


以下のように青色のソースを追加します。

## 上略 ##


<td>{$total.price_unit_head}{$total.total_shipfeesale_price}{$total.price_unit_tail}</td>
                             </tr>
                             <tr class="{$total.total_discountcode_price_display|display}">
                                 <th scope="row">適用折扣代碼</th>
                                 <td>{$total.price_unit_head}{$total.total_discountcode_price}{$total.price_unit_tail}</td>
                             </tr>
                         </tbody>


## 下略 ##





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

今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。