Cafe24新着情報

[PCデザイン] PCレスポンシブ型シンプル注文書のデザイン適用ガイド - ダイレクト購入商品 HTML/CSS (日本語)

2020-01-09


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


PCレスポンシブ型シンプル注文書のデザイン適用方法についてご案内いたします。

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


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


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


■ 新規ファイルの作成 (全5件)


(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ファイル (2件)


- ① 位置 : 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ファイル (2件)


- ① 位置 : 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')
    });
});




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

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

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

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