Cafe24新着情報

[商品管理] [デザインガイド] 軽減税率への対応 - HTML / CSS(日本語)

2019-08-14


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


軽減税率への対応するためのデザイン適用方法をご案内いたします。


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



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

■ PCショップ - スマートデザイン


1) 軽減税率対象品目を含む注文に対して、一部キャンセル/交換/返品ができないという案内の追加


- 位置 : マイページ(myshop) > 注文履歴(order) > キャンセル申込(cancel.html)

- 経路検索 : myshop/order/cancel.html


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

##上部省略##

         </table>
        <ul class="ec-base-help controlInfo typeBtm">
            <li class="txtWarn txt11">注文商品をすべてキャンセルする場合、プレミアムは自動でキャンセル処理されます。</li>
            <li class="{$cancel_order_vat_guide_display|display} txtWarn txt11">税率が{$default_vat_rate}%ではない商品が含まれている注文の場合、商品の一部をキャンセルすることはできません。すべてキャンセル後に再注文してください。</li>
        </ul>
    </div>

##下部省略##



- 位置 : マイページ(myshop) > 注文履歴(order) > 交換申込(exchange.html)

- 経路検索 : myshop/order/exchange.html


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

##上部省略##

         </table>
        <ul class="ec-base-help controlInfo typeBtm">
            <li class="txtWarn txt11">注文商品をすべてキャンセルする場合、プレミアムは自動でキャンセル処理されます。</li>
            <li class="{$cancel_order_vat_guide_display|display} txtWarn txt11">税率が{$default_vat_rate}%ではない商品が含まれている注文の場合、商品の一部を交換することはできません。すべてキャンセル/返品後に再注文してください。</li>
        </ul>
    </div>

##下部省略##



- 位置 : マイページ(myshop) > 注文履歴(order) > 返品申込(return.html)

- 経路検索 : myshop/order/return.html


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

##上部省略##

       </table>
        <ul class="ec-base-help controlInfo typeBtm">
            <li class="txtWarn txt11">注文商品をすべてキャンセルする場合、プレミアムは自動でキャンセル処理されます。</li>
            <li class="{$cancel_order_vat_guide_display|display} txtWarn txt11">税率が{$default_vat_rate}%ではない商品が含まれている注文の場合、商品の一部を返品することはできません。すべて返品後に再注文してください。</li>
        </ul>
    </div>

##下部省略##



2) 取引明細書に品目別税率、税率別対象金額と消費税を表示


- 位置 : マイページ(myshop) > 注文履歴(order) > 明細書印刷(print) > 取引明細書(spec.html)

- 経路検索 : myshop/order/print/spec.html


▼ 以下のように빨赤色の部分を削除して、青色のソースコードを追加します。

##上部省略##

<table class="content" border="1" summary="">
        <caption>取引明細書の詳細内容</caption>
        <colgroup>
            <col width="4%" />
            <col width="4%" />
            <col width="auto" />
            <col width="6%" />
            <col width="6%" />
            <col width="10%" />
            <col width="15%" />
            <col class="{$product_vat_rate_display|display}" width="8%" />
            <col width="auto" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">月</th>
                <th scope="col">日</th>
                <th scope="col">品目</th>
                <th scope="col">サイズ</th>
                <th scope="col">数量</th>
                 <th scope="col">単価</th>
                 <th scope="col">単価<br/>(VATを含む)</th>
                <th class="{$product_vat_rate_display|display}" scope="col">税率</th>
                <th scope="col">備考</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="3">合計</th>
                <td colspan="4">{$total_price}</td>
                <td colspan="{$colspan_total_price}">{$total_price}</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>{$month}</td>
                <td>{$day}</td>
                <td class="product">{$product_name}</td>
                <td></td>
                <td>{$quantity}</td>
                <td class="price">{$product_price}</td>
                <td class="{$product_vat_rate_display|display}">{$product_vat_rate}</td>
                <td>{$etc}</td>
            </tr>
            <tr>
                <td>{$month}</td>
                <td>{$day}</td>
                <td class="product">{$product_name}</td>
                <td></td>
                <td>{$quantity}</td>
                <td class="price">{$product_price}</td>
                <td class="{$product_vat_rate_display|display}">{$product_vat_rate}</td>
                <td>{$etc}</td>
            </tr>
        </tbody>
    </table>


#中略#

<div module="MyShop_OrderPrintGuide">
    <span class="title">* 計算基準</span>
    <span class="title">* 参考事項</span>
    <ul>
        <li>- 税額 = (単価*数量) * {$fraction_vat_rate} (税率{$vat_rate}%, 小数点以下四捨五入)</li>
        <li>- 供給価格 = (単価*数量) - 税額</li>
        <li>- 合計 = 品目の供給価格合計 + 品目の税額合計</li>
    </ul>
    <ul class="{$default_vat_display|display}">
        <li>- 税額 = (単価*数量) * {$fraction_vat_rate} (税率{$vat_rate}%, 小数点以下四捨五入)</li>
        <li>- 供給価格 = (単価*数量) - 税額</li>
        <li>- 合計 = 品目の供給価格合計 + 品目の税額合計</li>
    </ul>
    <ul class="{$product_vat_display|display}">
        <li class="{$product_vat_display|display}">- {$vat_rate_n}%対象{$price_n} | 消費税{$vat_n}</li>
        <li class="{$product_vat_display|display}">- {$vat_rate_n}%対象{$price_n} | 消費税{$vat_n}</li>
        <li class="{$zero_vat_display|display}">- 税率別対象(すべて){$price_0} | 消費税{$vat_0}</li>
        <li>-お買い上げ合計金額(商品価格+送料+後払い決済手数料)から割引金額とポイントを除いて計算した金額となります。</li>
    </ul>
</div>

##下部省略##



■ Mbileショップ - スマートデザイン


1) 軽減税率対象品目を含む注文に対して、一部キャンセル/交換/返品ができないという案内の追加


- 位置 : マイページ(myshop) > 注文履歴(order) > キャンセル申込(cancel.html)

- 経路検索 : myshop/order/cancel.html


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

##上部省略##

        </div>
    </div>
    <p class="ec-base-help">注文商品をすべてキャンセルする場合、プレミアムは自動でキャンセル処理されます。</p>
    <p class="{$cancel_order_vat_guide_display|display} ec-base-help">税率が{$default_vat_rate}%ではない商品が含まれている注文の場合、商品の一部をキャンセルすることはできません。すべてキャンセル後に再注文してください。</p>
    <div>
        <div class="boardViewCS">

##下部省略##



- 位置 : マイページ(myshop) > 注文履歴(order) > 交換申込(exchange.html)

- 経路検索 : myshop/order/exchange.html


▼ 以下のように빨赤色の部分を削除して、青色のソースコードを追加します。

##上部省略##

        </div>
    </div>
    <p class="help">注文商品をすべて交換する場合、プレミアムは自動で交換処理されます。</p>
    <p class="ec-base-help">注文商品をすべて交換する場合、プレミアムは自動で交換処理されます。</p>
    <p class="{$cancel_order_vat_guide_display|display} ec-base-help">税率が{$default_vat_rate}%ではない商品が含まれている注文の場合、商品の一部を交換することはできません。すべてキャンセル/返品後に再注文してください。</p>
 
    <!-- This module is visible the first time the screen is loaded. After selecting a product, load the code for"exchange_product.html". -->
    <div id="{$exchange_product_list_id}">

##下部省略##



- 位置 : マイページ(myshop) > 注文履歴(order) > 返品申込(return.html)

- 経路検索 : myshop/order/return.html


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

##上部省略##

        </div>
        <p class="ec-base-help">注文商品をすべて返品する場合、プレミアムは自動で返品処理されます。</p>
       <p class="{$cancel_order_vat_guide_display|display} ec-base-help">税率が{$default_vat_rate}%ではない商品が含まれている注文の場合、商品の一部を返品することはできません。すべて返品後に再注文してください。</p>
    </div>
    <div class="boardViewCS">
        <div class="title">

##下部省略##


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


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

今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。

引き続き、ご愛顧のほどよろしくお願い申し上げます。

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