Cafe24新着情報

お知らせ更新情報

[PCデザイン] PCレスポンシブ型シンプル注文書のデザイン適用ガイド - 日本語

2019-12-12

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

PCレスポンシブ型シンプル注文書は、デザイン変更を通して現在運営中のショップにすぐ適用することができます。別途の設定を行う必要はありません。


※ 2019年12月12日以降に基本デザインを作成する場合、シンプル注文書が適用された状態で作成されます。別途のデザイン適用を行う必要はありません。


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


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


■ PCデザイン > スマートデザイン編集ウィンドウ > 注文書作成/注文完了のHTMLを編集

(1) 注文書作成(orderform.html)


- 位置 : PCデザイン > スマートデザイン編集ウィンドウ(日本語ショップ) > 注文(order) > 注文書作成(orderform.html)


以下のソースをすべてコピーし、既存のソースをシンプル注文書のソース(青)に変更してから保存を行います。

<!doctype html>
<html lang="ja">
<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/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/order_form.js)-->
    <!--@js(/js/module/order/order.js)-->
</head>
<body id="userStyle">
    <!--@import(/order/ec_orderform/header.html)-->
    <div id="mCafe24Order" class="typeHeader" module="Order_form" unroll="1">
        <!-- Do not delete this code
            $move_order_after=/order/order_result.html
            $move_basket=/order/basket.html
            $paymethod_selector = textButton
        -->
        <!--@import(/order/ec_orderform/product_detail.html)-->
           
        <!--@import(/order/ec_orderform/billingNshipping.html)-->

        <!--@import(/order/ec_orderform/additionalInput.html)-->
           
        <!--@import(/order/ec_orderform/orderProduct.html)-->
        <div id="{$gift_orderform_id}">
            <!--@import(/order/ec_orderform/gift.html)-->
        </div>
        <!--@import(/order/ec_orderform/discount.html)-->
   
        <!--@import(/order/ec_orderform/payment.html)-->

        <!--@import(/order/ec_orderform/paymethod.html)-->

        <!--@import(/order/ec_orderform/benefit.html)-->

        <!--@import(/order/ec_orderform/agreement.html)-->
           
        <div class="ec-base-button gFull" id="orderFixItem">
            <button type="button" class="btnSubmit" id="{$btn_payment_id}">
                {$total_order_price_front_head}<span id="{$total_order_price_front_id}">{$total_order_price_front}</span>{$total_order_price_front_tail} 注文を確定する
            </button>
        </div>
        <!--@import(/order/ec_orderform/confirm.html)-->
           
        <iframe id="{$payment_proc_id}" name="h_payment" width="0" height="0" frameborder="0" src=""></iframe>
        <input type="hidden" id="sPrdName" name="sPrdName" value="{$sPrdName}">
    </div>
 
    <div id="progressPaybar" style="display:none;">
        <div id="progressPaybarBackground" class="layerProgress"></div>
        <div id="progressPaybarView">
            <p class="graph">決済中です。</p>
            <p class="txt">
                この画面は決済完了後、自動的に閉じられます。<br>
                決済中にこの画面を閉じると<br>
                注文が完了しない場合がありますので <br>
                決済が完了するまで画面を閉じないでください。
            </p>
        </div>
   </div>
</body>
</html>





(2) 注文完了(order_result.html)


- 位置 : PCデザイン > スマートデザイン編集ウィンドウ(日本語ショップ) > 注文(order) > 注文完了(order_result.html)


以下のソースをすべてコピーし、既存のソースをシンプル注文書のソース(青)に変更してから保存を行います。

<!doctype html>
<html lang="ja">
<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/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/order_form.js)-->
    <!--@js(/js/module/order/order.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="商品名">{$set_product_icon} {$product_name_link}</strong>
                                <ul class="info">
                                    <li title="有効期限" class="{$expiration_date_display|display}">{$expiration_date} 以内に使用</li>
                                    <li title="オプション">
                                        <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="販売価格">
                                                {$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="割引販売額">{$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="数量" class="quantity">{$product_quantity}点</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="prdFoot" title="小計">
                            <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="商品名">{$set_product_icon} {$product_name_link}</strong>
                                <ul class="info">
                                    <li title="有効期限" class="{$expiration_date_display|display}">{$expiration_date} 以内に使用</li>
                                    <li title="オプション">
                                        <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="販売価格">
                                                {$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="割引販売額">{$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="数量" class="quantity">{$product_quantity}点</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="prdFoot" title="小計">
                            <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="商品名"><span class="{$gift_icon_display|display}"><img src="{$gift_icon}" /></span> {$product_name}</strong>
                                <ul class="info">
                                    <li title="オプション">
                                        <p class="option {$option_display|display}">{$option_str}</p>
                                    </li>
                                    <li class="price">
                                        <span title="数量" class="quantity">{$product_quantity}点</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="prdFoot" title="小計">
                            <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="商品名"><span class="{$gift_icon_display|display}"><img src="{$gift_icon}" /></span> {$product_name}</strong>
                                <ul class="info">
                                    <li title="オプション">
                                        <p class="option {$option_display|display}">{$option_str}</p>
                                    </li>
                                    <li class="price">
                                        <span title="数量" class="quantity">{$product_quantity}点</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="prdFoot" title="小計">
                            <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_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_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>




■ 新規ファイルの作成


(1) ダイレクト購入商品の詳細情報(product_detail_info.html)


- 位置 : 商品(product) > product_detail_info.html (新規作成)


▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

<!--@layout(/layout/basic/popup.html)-->
<div class="ec-base-layer productDetailInfo">
    <!--@css(/css/module/product/productDetailInfo.css)-->
    <style>.productDetailInfo img { max-width:100%; }</style>
    <div module="product_detail">
        <div class="header">
            <h1>詳細情報</h1>
        </div>
        <div class="content">
            <div module="product_additional">
                <div id="prdDetail">
                    <h2 class="title">{$name}</h2>
                    <div id="prdDetailContent">{$product_detail}</div>
                </div>
            </div>
        </div>
        <a href="#none" class="close" onclick="window.close()"><img src="http://img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="閉じる" /></a>
    </div>
</div>



(2) CSSファイル


- 位置 : css > module > product > productDetailInfo.css (新規作成)


▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

.productDetailPopup { display:none; overflow-y:auto; position:fixed; top:0; left:0; height:100%; background:#fff; z-index:120; }
.productDetailPopup h2 { height:38px; line-height:38px; text-align:center; font-size:15px; color:#fff; background:#4b5165; }
.productDetailPopup .btnClose { position:absolute; top:0; right:0; text-indent:-9999em; }
.productDetailPopup .btnClose:before { content:''; display:inline-block; position:absolute; top:17px; right:15px; width:18px; height: 2px; border-radius:2px; background:#fff; transform:rotate(45deg); }
.productDetailPopup .btnClose:after { content:''; display:inline-block; position:absolute; top:17px; right:15px; width:18px; height: 2px; border-radius:2px; background:#fff; transform:rotate(-45deg); }
.productDetailInfo h2.title { padding: 0 20px; line-height: 43px; font-size: 15px; color: #2e2e2e; background:#fff; }
.productDetailInfo img { max-width:100%; }



- 位置 : css > module > product > mobileImage.css (新規作成)


▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

.xans-product-mobileimage { margin:0; }
.xans-product-mobileimage li { vertical-align:middle; }
.xans-product-mobileimage .thumbnail { display:inline-block; position:relative; }
.xans-product-mobileimage img { max-width:100%; max-height:100%; }
.xans-product-mobileimage .ec-base-paginate { margin:15px 0 0; }



(3) JSファイル


- 位置 : js > module > order > auto_resize.js (新規作成)


▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

$('.wrap').delegate( 'textarea', 'keyup', function () {
    var $parent =  $('.wrap');
    var popupHeight = window.innerHeight;
    var parentPadding = parseInt($parent.css('padding-top')) + parseInt($parent.css('padding-bottom'));
 var siblingsHeight = parseInt($parent.siblings('h1').innerHeight()) + parseInt($parent.siblings('.ec-base-button').innerHeight());
    var totalHeight = popupHeight - (siblingsHeight + parentPadding);
    $(this).height(totalHeight);
})
.find( 'textarea' ).keyup();




- 位置 : js > module > order > order.js (新規作成)


▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

$(document).ready(function(){
    if (EC_MOBILE_DEVICE == true) {
        $('#addr_paymethod').find("option[value='tcash']").remove();
        $('#addr_paymethod').find("option[value='esc_vcash']").remove();
        $('#payment_input_tcash').hide();
        $('#payment_input_esc_vcash').hide();
    }
});
order = {

    dLoadingHide:function()
    {
        $('input, a, select, button, textarea, .trigger').show();
        $('#progressPaybar').hide();
    },

    processPayModule:function()
    {
        $('#progressPaybarView').hide();
        document.getElementById('payReqForm').target = '';
        document.getElementById('payReqForm').CAFE24EncData.value = '';
        if ( $('#addr_paymethod').val() == 'cell' ) {
            processCellPay(document.getElementById('payForm'));
        }else{
            processPay(document.getElementById('payForm'));
        }
        window.scrollTo(0,0);
    },
    SSLencryptSubmit:function(frmName, callbackName)
    {
        var aData = new Array();
        var hObjList = document.getElementById(frmName);
        for (var i=0; i<hObjList.length; i++)
        {
            if (hObjList[i].name && hObjList[i].name != 'CAFE24EncData')
            {
                aData[aData.length] = 'frm_order_act::'+hObjList[i].name;
            }
        }
        AuthSSLManager.weave({
            'auth_mode': 'encrypt1.9'
            , 'aEleId': aData
            , 'auth_callbackName': callbackName
        });
    },
    payEncSubmit_Complete:function(output)
    {
        var payReqForm = document.getElementById('payReqForm');
        var payForm = document.getElementById('payForm');
        var sParam;
        if ( AuthSSLManager.isError(output) == true )
        {
            alert('[ERR-03] 決済中、エラー発生');
            order.dLoadingHide();
            return;
        }

        payReqForm.CAFE24EncData.value = encodeURIComponent(output);
        payReqForm.pgName.value = payForm.pgName.value;
        payReqForm.reqType.value = payForm.reqType.value;
        payReqForm.action = '/Pay/request.php';
        payReqForm.submit();
    },

    processPayResult:function(bType)
    {
        if (bType === true)
        {
            order.SSLencryptSubmit('payForm', 'order.payEncSubmit_Complete');
        }else{
            $('#paymentFormWrap').html('');
            try
            {
                var frmObj = document.createElement('<form name="payForm">');
            }
            catch (e)
            {
                var frmObj = document.createElement('form');
                frmObj.setAttribute('name', 'payForm');
            }
            frmObj.setAttribute('id', 'payForm');
            frmObj.setAttribute('method', 'post');
            frmObj.setAttribute('action', '/Pay/request.php');
            document.getElementById('paymentFormWrap').appendChild(frmObj);
        }
    }
};



- 位置 : js > module > order > order_form.js (新規作成)

▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

$(document).ready(function(){
    $('#mallAgree').click(function() {
        if ($(this).attr('checked') === true) {
            $('#mall_agreement_radio0').attr('checked', true);
        } else {
            $('#mall_agreement_radio1').attr('checked', true);
        }
    });

    $('#personAgree').click(function() {
        if ($(this).attr('checked') === true) {
            $('#nm_agreement0').attr('checked', true);
        } else {
            $('#nm_agreement1').attr('checked', true);
        }
    });

    $('#subscription').click(function() {
        if ($(this).attr('checked') === true) {
            $('#subscription_agreement0').attr('checked', true);
        } else {
            $('#subscription_agreement1').attr('checked', true);
        }
    });
    var fixLayerPriceRest = function() {
        $('#checked_order_count, #checked_order_price').html('').css('padding-bottom','0');
    };

    fixLayerPriceRest();

    var fixedLayerPriceSet = function() {
        var iSumPrice = 0;
        var iCheckPrdCnt = 0;
        $('[id^="chk_order_cancel_list"]').each(function(){
            if ($(this).attr('checked') == true) {
                var sCheckId = $(this).attr('id');
                var aTemp = sCheckId.split('_');
                var iCheckId = aTemp[3].replace(/[^0-9]/g, '');
                var iProductPrice = aBasketProductOrderData[iCheckId].product_sum_price;
                iSumPrice = iSumPrice + iProductPrice;
                iCheckPrdCnt = iCheckPrdCnt + 1;
             }
        });
        if (iCheckPrdCnt > 0) {
            var sTotalPrice = SHOP_PRICE_FORMAT.toShopPrice(iSumPrice);
            $('#checked_order_count').html('<strong>' + sprintf(__('%s'),iCheckPrdCnt) + '</strong>' +'点の商品選択').css('padding-bottom','5px');
            $('#checked_order_price').html('決済予定金額 <strong><em>'+sTotalPrice+'</em></strong>').css('padding-bottom','5px');
        } else {
            fixLayerPriceRest();
        }
        var sPriceRef = SHOP_PRICE_FORMAT.shopPriceToSubPrice(iSumPrice);
        if (sPriceRef != '') $('#checked_order_price').find('strong').append(sPriceRef);
    };

    $('[id^="chk_order_cancel_list"]').click(function(e) {
        fixedLayerPriceSet();
    });

    $('#btn_payment_fix').unbind().bind('click', function() {
        $('#btn_payment').trigger('click');
    });
    // All check
    $('#product_select_all').bind('click', function() {
        var _status = $(this).data('status');
        $('[id^="chk_order_cancel_list"]').each(function(){
            var bChecked = $(this).is(":checked");
            if (_status == 'off') {
                if (bChecked === false) $(this).attr('checked', true);
            } else {
                $(this).attr('checked', false);
            }
        });
        $(this).data('status', _status == 'off' ? 'on' : 'off');
        fixedLayerPriceSet();
    });

    $('#all_use_mileage, #all_use_deposit').unbind().bind('click', function() {
        var id = $(this).attr('id');
        var total_mileage = parseInt($('#ori_total_avail_mileage').val());
        var total_deposit = parseInt($('#ori_total_deposit').val());
        if (id == 'all_use_mileage') {
            $('#input_mile').attr('value', total_mileage);
            $('#input_mile').trigger('blur');
        } else {
            $('#input_deposit').attr('value', total_deposit);
            $('#input_deposit').trigger('blur');
        }
    });
});
function viewMallAgree() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/mallagree.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/mallagree.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewPersonAgree() {
    if (EC_MOBILE_DEVICE == true) {
     window.open('/order/agreement/personagree.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/personagree.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewSubscription() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/subscription.html?basket_type='+$('#basket_type').val());
    } else {
        window.open('/order/agreement/subscription.html?basket_type='+$('#basket_type').val(), '', 'width=450,height=350');
    }
}
function viewInsurance() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/insurance.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/insurance.html?basket_type='+$('#basket_type').val() +'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewDaum() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/daum.html?basket_type='+$('#basket_type').val());
    } else {
        window.open('/order/agreement/daum.html?basket_type='+$('#basket_type').val(), '', 'width=450,height=350');
    }
}
function viewDelivery() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/delivery.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/delivery.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewIdentification() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/identification.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/identification.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewMemberJoinAgree() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/privacy_agreement.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/privacy_agreement.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewInformationAgree() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/information_agreement.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/information_agreement.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function viewConsignmentAgree() {
    if (EC_MOBILE_DEVICE == true) {
        window.open('/order/agreement/consignment_agreement.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'));
    } else {
        window.open('/order/agreement/consignment_agreement.html?basket_type='+$('#basket_type').val()+'&delvtype='+getQueryString('delvtype'), '', 'width=450,height=350');
    }
}
function selBasketDel(id) {
    $('[id^="'+BASKET_CHK_ID_PREFIX+'"]').attr('checked', false);
    $('[id="'+id+'"]').attr('checked', true);
    Basket.deleteBasket();
}
// tooltip
$('body').delegate('.mTooltip .eTip', 'click', function(e){
    var findSection = $(this).parents('.section:first');
    var findTarget = $($(this).siblings('.tooltip'));
    var findTooltip = $('.tooltip');
    $('.mTooltip').removeClass('show');
    $(this).parents('.mTooltip:first').addClass('show');
    $('.section').css({'zIndex':0, 'position':'static'});
    findSection.css({'zIndex':100, 'position':'relative'});
    findTooltip.hide();
    findTarget.show();
    e.preventDefault();
});
$('body').delegate('.mTooltip .eClose', 'click', function(e){
    var findSection = $(this).parents('.section:first');
    var findTarget = $(this).parents('.tooltip:first');
    $('.mTooltip').removeClass('show');
    findTarget.hide();
    findSection.css({'zIndex':0, 'position':'static'});
    e.preventDefault();
});




- 位置 : js > module > product > detail.js (新規作成)

▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

// Tab event
$('#tabProduct a').click(function(e){
    var oTarget = $(this).attr('href');
    $(this).parent('li').addClass('selected').siblings().removeClass('selected');
    $('#tabProduct a').each(function(){
        var oSiblings = $(this).attr('href');
        if (oTarget != oSiblings) {
            $(oSiblings).hide();
        } else {
            $(oTarget).show();
        }
    });
    removePagingArea(oTarget);
});

function removePagingArea(oTarget)
{
    if ($(oTarget).length < 1 && (oTarget != '#prdReview' || oTarget != '#prdQna')) return;
    if ($(oTarget).css('display') == 'block') {
        if (oTarget == '#prdReview') {
            //var record = $('#prdReview .xans-record-:first', '.xans-product-review');
            var record = $('.xans-record-:first', '.xans-product-review');
            if (record.length < 1 || record.is(':not(:visible)')) {
                $('.xans-product-reviewpaging').remove();
             }
         } else if (oTarget == '#prdQnA') {
             //var record = $('#prdQnA .xans-record-:first', 'xans-product-qna');
             var record = $('.xans-record-:first', '.xans-product-qna');
             if (record.length < 1 || record.is(':not(:visible)')) {
                 $('.xans-product-qnapaging').remove();
             }
         }
     }
}
$(document).ready(function() {
    $('#actionCartClone, #actionWishClone, #actionBuyClone, #actionWishSoldoutClone').unbind().bind('click', function() {
        try {
            var id = $(this).attr('id').replace(/Clone/g, '');
            if (typeof(id) !== 'undefined') $('#' + id).trigger('click');
            else return false;
        } catch(e) {
            return false;
        }
    });
    function productDetailOrigin(){
        var imgChk = $('#prdDetailContent').find('img').length;
        if(imgChk <= 0){
            $('#prdDetailBtn').remove();
        }
    } productDetailOrigin();
    // Add Image
    var oTarget = $('.xans-product-mobileimage ul li');
    var oAppend = oTarget.first().children('p').clone();
    oTarget.not(':first').each(function() {
        $(this).children().wrap(function() {
            return '<p class="thumbnail">' + $(this).html() + oAppend.html() + '</p>';
        });
        $(this).children('p').children('img:first').remove();
    });
});




- 位置 : js > module > product > image.js (新規作成)

▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

/**
 *  zoom
 */
$(document).ready(function(){
    $.fn.prdZoom = function(param){     
        var ul     = param.target.find('.xans-product-addimage > ul'),
            detail = param.target.find('a#prdDetailImg'),
            swipe  = param.target.find('.xans-product-mobileimage > ul > li'),     
            add    = param.target.find('.xans-product-addimage > ul > li');
     
        var zoom = {
            init : function(){
                function structMobile(){
                    swipe.unbind().bind('click', function(){
                        var sZoomUrl = '/product/image_zoom.html' + $(this).data('param') + '&order=' + $(this).index();
                        zoom.showZoom(sZoomUrl);
                    });
                    add.mouseover(function(){
                        try {
                            $xans_product_mobileimage_slider_0.moveTab($(this).index());
                        } catch (e) { }
                        detail.data('order', $(this).index());
                    });
                    detail.unbind().bind('click', function(){    
                        var iOrder =  $(this).data('order') || 0,
                            sZoomUrl = '/product/image_zoom.html' + $(this).data('param') + '&order=' + iOrder;
                        zoom.showZoom(sZoomUrl);
                    });                  
                }
                structMobile();
            },
            showZoom : function(sZoomUrl){
                window.open(sZoomUrl, 'image_zoom', 'toolbar=no,scrollbars=auto,resizable=yes,width=560,height=710,left=0,top=0', this);
                return false;
            }
        }
        zoom.init();
    };
    $.fn.prdZoom({
        target : $('.xans-product-image')
    });
});




- 位置 : layout > basic > js > common.js (新規作成)

▼ 上記の位置に新規ファイルを追加作成し、以下のように青色のソースを追加します。

// thumbnail onerror
$(window).load(function() {
    $(".thumbnail img, img.thumbImage, img.bigImage").each(function($i,$item){
        var $img = new Image();
        $img.onerror = function () {
            $item.src="//img.echosting.cafe24.com/thumb/img_product_big.gif";
        }
        $img.src = this.src;
    });
});
$(document).ready(function(){
    $('div.eToggle .title').click(function(){
        var toggle = $(this).parent('.eToggle');
        if(toggle.hasClass('disable') == false){
            $(this).parent('.eToggle').toggleClass('selected')
        }
    });
    $('dl.eToggle dt').click(function(){
        $(this).toggleClass('selected');
        $(this).next('dd').toggleClass('selected');
    });

    $('[id^="quantity"]').each(function() {
        $(this).get(0).type = 'tel';
    });

    $('.xans-mall-supplyinfo, .supplyInfo').find('table > colgroup').find('col').eq(0).width(98);
    $('.xans-mall-supplyinfo, .supplyInfo').find('th, td').css({padding:'13px 10px 12px'});
    /**
     * toggle
     */
    $('.xans-product-listmain h2').toggle(function(){
        $(this).css('background-image', 'url("//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/bg_title_open.gif")');
        $(this).siblings().hide();
        $(this).parent().find('div.paginate').hide();
        $(this).parent().next('div.xans-product-listmore').hide();
    }, function() {
        $(this).css('background-image', 'url("//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/bg_title_close.gif")');
        $(this).siblings().show();
        $(this).parent().find('div.paginate').show();
        $(this).parent().next('div.xans-product-listmore').show();
    });
    /**
     *  Top button
     */
    var globalTopBtnScrollFunc = function() {
        var $btnTop = $('#btnTop');
        $(window).scroll(function() {
            try {
                var iCurScrollPos = $(this).scrollTop();
                if (iCurScrollPos > ($(this).height() / 2)) {
                    $btnTop.fadeIn('fast');
                } else {
                    $btnTop.fadeOut('fast');
                }
            } catch(e) { }
        });
    };
    /**
     *  Order button
     */
    var globalBuyBtnScrollFunc = function() {
        var sFixId = $('#orderFixItem').size() > 0  ? 'orderFixItem' : 'fixedActionButton',
            $area = $('#orderFixArea'),
            $item = $('#' + sFixId + '').not($area);
        $(window).scroll(function(){
            try {
                var iCurrentHeightPos = $(this).scrollTop() + $(this).height(),
                    iButtonHeightPos = $item.offset().top;
                if (iCurrentHeightPos > iButtonHeightPos || iButtonHeightPos < $(this).scrollTop() + $item.height()) {
                    if (iButtonHeightPos < $(this).scrollTop() - $item.height()) {
                        $area.fadeIn('fast');
                    } else {
                        $area.hide();
                    }
                } else {
                    $area.fadeIn('fast');
                }
            } catch(e) { }
        });
    };
    globalTopBtnScrollFunc();
    globalBuyBtnScrollFunc();
});

var globalLayerOpenFunc = function(_this) {
    this.id = $(_this).data('id');
    this.param = $(_this).data('param');
    this.basketType = $('#basket_type').val();
    this.url = $(_this).data('url');
    this.layerId = 'ec_temp_mobile_layer';
    this.layerIframeId = 'ec_temp_mobile_iframe_layer';
    var _this = this;
    function paramSetUrl() {
        if (this.param) {
            // if isset param
        } else {
            this.url = this.basketType ?  this.url + '?basket_type=' + this.basketType : this.url;
        }
    };
    if (this.url) {
        window.ecScrollTop = $(window).scrollTop();
        $.ajax({
            url : this.url,
            success : function (data) {
                if (data.indexOf('404エラー  ページが見つかりません。') == -1) {
                    try { $(_this).remove(); } catch ( e ) { }
                    var $layer = $('<div>', {
                        html: $("<iframe>", { src: _this.url, id: _this.layerIframeId, scrolling: 'auto', css: { width: '100%', height: '100%', overflowY: 'auto', border: 0 } } ),
                        id: _this.layerId,
                        css : { position: 'absolute', top: 0, left:0, width: '100%', height: $(window).height(), 'z-index': 9999 }
                    });
                    $('body').append($layer);
                    $('html, body').css({'overflowY': 'hidden', height: '100%', width: '100%'});
                    $('#' + this.layerId).show();
                }
            }
        });
    }
};
// Popup close
var globalLayerCloseFunc = function() {
    this.layerId = 'ec_temp_mobile_layer';
    if (window.parent === window)
        self.clse();
    else {
        parent.$('html, body').css({'overflowY': 'auto', height: 'auto', width: '100%'});
        parent.$('html, body').scrollTop(parent.window.ecScrollTop);
        parent.$('#' + this.layerId).remove();
    }
};
/**
 * document.location.href split
 * return array Param
 */
var getQueryString = function(sKey)
{
    var sQueryString = document.location.search.substring(1);
    var aParam = {};
    if (sQueryString) {
        var aFields = sQueryString.split("&");
        var aField  = [];
        for (var i=0; i<aFields.length; i++) {
            aField = aFields[i].split('=');
            aParam[aField[0]] = aField[1];
        }
    }
    aParam.page = aParam.page ? aParam.page : 1;
    return sKey ? aParam[sKey] : aParam;
};
// PC ver
var isPCver = function() {
    var sUrl = window.location.hostname;
    var aTemp = sUrl.split(".");
    var pattern = /^(mobile[\-]{2}shop[0-9]+)$/;
    if (aTemp[0] == 'm' || aTemp[0] == 'skin-mobile' || aTemp[0] == 'mobile') {
        sUrl = sUrl.replace(aTemp[0]+'.', '');
    } else if (pattern.test(aTemp[0]) === true) {
        var aExplode = aTemp[0].split('--');
        aTemp[0] = aExplode[1];
        sUrl = aTemp.join('.');
    }
    window.location.href = '//'+sUrl+'/?is_pcver=T';
};
// tooltip
$('body').delegate('.eTooltip .eTip', 'click', function(e){
    var findTarget = $($(this).siblings('.tooltip'));
    var findTooltip = $('.tooltip');
    $('.eTooltip').removeClass('show');
    $(this).parents('.eTooltip:first').addClass('show');
    findTooltip.hide();
    findTarget.show();
    e.preventDefault();
});
$('.eTooltip').find('input').focusout(function() {
    var findTarget = $(this).parents('.eTooltip').find('.tooltip');
    $('.eTooltip').removeClass('show');
    findTarget.hide();
});
/* tooltip */
$('body').delegate('.ec-base-tooltip-area .eTip', 'click', function(e){
    var findArea = $($(this).parents('.ec-base-tooltip-area'));
    var findTarget = $($(this).siblings('.ec-base-tooltip'));
    var findTooltip = $('.ec-base-tooltip');
    $('.ec-base-tooltip-area').removeClass('show');
    $(this).parents('.ec-base-tooltip-area:first').addClass('show');
    findTooltip.hide();
    findTarget.show();
    e.preventDefault();
});
$('body').delegate('.ec-base-tooltip-area .eClose', 'click', function(e){
    var findTarget = $(this).parents('.ec-base-tooltip:first');
    $('.ec-base-tooltip-area').removeClass('show');
    findTarget.hide();
    e.preventDefault();
});
$('.ec-base-tooltip-area').find('input').focusout(function() {
    var findTarget = $(this).parents('.ec-base-tooltip-area').find('.ec-base-tooltip');
    $('.ec-base-tooltip-area').removeClass('show');
    findTarget.hide();
});
/**
 * popup resize
 */
function setResizePopup() {
    var checkPopup = $('#popup').length,
        iWrapWidth = $('#popup').width(),
     iWrapHeight = $('#popup').height();
   
    var iWindowWidth = $(window).width(),
     iWindowHeight = $(window).height();
   
    if(checkPopup > 0) {
         window.resizeBy(iWrapWidth - iWindowWidth, iWrapHeight - iWindowHeight);
    }
   
}
setResizePopup();
$( window ).load(function() {
    setResizePopup();
});




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

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

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


前の記事

[PCデザイン] PCレスポンシブ型シンプル注文書のリリースおよびダイレクト購入注文書の機能追加について

2020-01-09

次の記事

[注文管理] 決済方法の表記および設定方法などの改善について

2019-12-18