Cafe24新着情報
[PCデザイン] [スマートデザイン] PCレスポンシブ型シンプル注文書のデザイン適用ガイド - ダイレクト購入商品 HTML/CSS (中国語・繁体字)
2020-02-06
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件)
// 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') }); }); |
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。