Cafe24新着情報

[Mobileデザイン] モバイルシンプル注文書のデザイン適用ガイド - ダイレクト購入商品 HTML/CSS (中国語・簡体字)

2020-02-06



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


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


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


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

■ Mobileデザイン - スマートデザイン(モバイルシンプル注文書)


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


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

 ## 上略 ##
 
    <div id="mCafe24Order" module="Order_FormGlobal" 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)-->

## 下略 ##


2) 位置 : 商品(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">
        <h1>详情</h1>
        <div class="content">
            <div module="product_additional">
                <div id="prdDetail">
                    <h2 class="title">{$name}</h2>
                    <div id="prdDetailContent">{$product_detail}</div>
                </div>
            </div>
        </div>
        <button type="button" class="btnClose" onclick="window.close()">关闭</button>
    </div>


3) 位置 : js > モジュール(module) > 商品(product) > image.js


▼ 以下の画面のように「image.js」ファイルの有無を確認します。

※「image.js」ファイルは基本デザインに含まれていますが、作成・購入から長期間が経過したデザインには含まれていない可能性があります。




デザインにimage.js」ファイルがない場合、

▼ 新規ファイルを作成して青色のソースを追加します。(/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')
    });
});


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

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

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