카페24시 skin -> product -> detail 모듈에 커스텀 팝업 js 삽입 이슈
본문
안녕하세요.
카페24시의 제품 상세페이지란 일부중의 아래 섹션에
<center>
<a href="http://www.cozystory.co.kr/article/event/3/23175/"><img src="/web/upload/_dj/card_top_01.jpg" style="margin-bottom:4px;"></a>
<a href="http://www.cozystory.co.kr/category/슈퍼범퍼하우스/182/"><img src="/web/upload/_dj/card_top_02.jpg" style="margin-bottom:4px;"></a>
<a href="#"><img src="/web/upload/_dj/card_top_03.jpg" style="margin-bottom:4px;"></a>
<a href="https://www.instagram.com/cozystory_insta/"><img src="/web/upload/_dj/card_top_04.jpg" style="margin-bottom:4px;"></a>
</center>
다음과 같은 html 구조의 갤러리 팝업 부분만 대체 삽입하려고 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Meta tags -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<!-- Javascripts -->
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/popup2.3.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".popup").popup({
transparentLayer : true,
gallery : true,
galleryTitle : "Gallery1 Title",
imgaeDesc : true,
galleryCounter : true,
imageDesc : true,
autoSize : false,
boxHeight : 600,
boxWidth : 500,
shadowLength : 0,
transition : 0,
galleryCircular: false,
onOpen : function() {
console.log("opened the box .popup");
},
onClose : function() {
console.log("closed the box .popup");
}
});
$(".popup1").popup({
transparentLayer : true,
gallery : true,
galleryTitle : "Gallery2 Title",
popupID : "fixedGallery",
imageDesc : true,
fixedTop : 50,
fixedLeft : false,
galleryCircular: false,
onOpen : function() {
console.log("opened the box .popup1");
},
onClose : function() {
console.log("closed the box .popup1");
}
});
$(".popup2").popup({
transparentLayer : true,
gallery : false,
popupID : "popupBox2",
ajax : true,
overflow: "hidden",
shadowLength : 10,
hasCloseButton : false,
onOpen : function() {
console.log("opened the box .popup2");
},
onClose : function() {
console.log("closed the box .popup2");
}
});
$(".popup3").popup({
transparentLayer : true,
gallery : false,
popupID : "popupBox3",
contentClass : "popupBox3",
onOpen : function() {
console.log("opened the box .popup3");
},
onClose : function() {
console.log("closed the box .popup3");
}
});
});
</script>
</head>
<div id="wrap" style="background:#eee;padding:20px;min-height:100%">
<div>
<img src="img/1thumb.jpg" width="180" height="240" alt="" name="img/1.jpg" class="popup1" title="gallery1" longdesc="<div style='padding:10px'><p>this is an image of a fluffy little bunny</p><p>for more info go to <a href=''>www.fuffybunnies.com</a></p></div>" />
<img src="img/2thumb.jpg" width="180" height="240" alt="" name="img/2.jpg" class="popup1" title="gallery1" longdesc="<p>this is an image</p>" />
<img src="img/3thumb.jpg" width="180" height="240" alt="" name="img/3.jpg" class="popup1" title="gallery1" longdesc="<p>this is an image</p>" />
</div>
<div>
<img src="img/1thumb.jpg" width="180" height="240" alt="" name="img/1.jpg" class="popup1" title="gallery1" longdesc="<div style='padding:10px'><p>this is an image of a fluffy little bunny</p><p>for more info go to <a href=''>www.fuffybunnies.com</a></p></div>" />
<img src="img/2thumb.jpg" width="180" height="240" alt="" name="img/2.jpg" class="popup1" title="gallery1" longdesc="<p>this is an image</p>" />
<img src="img/3thumb.jpg" width="180" height="240" alt="" name="img/3.jpg" class="popup1" title="gallery1" longdesc="<p>this is an image</p>" />
</div>
<div class="popupBtns">
<input type="button" value="ajaxy content" class="popup2" name="ajax.html" title="Ajax Content" />
<input type="button" value="DOM element content" class="popup3" name=".popup3Content" title="dom content" />
</div>
<div class="popupContentWrapper" style="display:none">
<div class="popup3Content">
<h2>Content for popup 3</h2>
<p>lorem ipsum....</p>
</div>
</div>
</div>
</div> <!-- end of wrap div -->
</html>
시도해 본결과 삽입하려고 하는 js와 css경로가 현재 카페24시 경로와 상이하여,
이미지 및 팝업 펑션이 올바르게 표시되고 있지 않습니다.
고수님들의 조언 부탁드립니다. 꼭 사례 드리겠습니다.
감사합니다.
답변 2
최상단 폴더에 css와 js 폴더를 만들고 해당 파일을 삽입하면 되지 않을까요?
또한 js들은 해당페이지 하단에 js들만 묶어서 관리하면 편리합니다.
현재 이것저것 해보았는데, 심통지 않아서요,,,
해당 html 모듈이 일반적이니 않으며 아래와 같이 시작합니다.
<!--@layout(/layout/basic/layout.html)-->
<!--
$category_page = /product/list.html
$project_page = /product/project.html
$jointbuy_page = /product/jointbuy.html
-->
<div class="path" module="product_headcategory">
<span>현재 위치</span>
<ol>
<li><a href="/">홈</a></li>
<li class="{$disp_cate_1|display}"><a href="{$link_product_list_1}">{$name_1}</a></li>
<li class="{$disp_cate_2|display}"><a href="{$link_product_list_2}">{$name_2}</a></li>
<li class="{$disp_cate_3|display}"><a href="{$link_product_list_3}">{$name_3}</a></li>
<li class="{$disp_cate_4|display}"><strong><a href="{$link_product_list_4}">{$name_4}</a></strong></li>
</ol>
</div>
<!-- 상단 제품 정보 -->
<div module="product_detail">
<!--@css(/css/module/product/detail.css)-->
<div class="headingArea">
<span class="delivery {$delvtype_display|display}">(해외배송 가능상품)</span>
<!-- 공급사 바로가기버튼 영역 -->
<div class="supply {$supply_link_display|display}">
<span>{$supply_top_logo}</span>
<a href="#none" onclick="{$supply_go_action}"><img src="{$supply_go_img}" alt="공급사 바로가기" /></a>
</div>
<!-- //공급사 바로가기버튼 영역 -->
</div>
<div class="detailArea">
<!-- 이미지 영역 -->
<div class="imgArea" module="product_image">
<!--@js(/js/module/product/product_image.js)-->
<div class="keyImg">
<div class="thumbnail">
<a href="/product/image_zoom2.html{$zoom_param}" alt="{$product_code}" onclick="window.open(this.href, 'image_zoom2', 'toolbar=no,scrollbars=auto,resizable=yes,width=450,height=693,left=0,top=0', this);return false;">
<img src="{$big_img}" alt="{$seo_alt_tag}" class="{$big_img_class} {$img_display|display}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span>
</a>
</div>
</div>
<!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
<div class="listImg" module="product_addimage">
<ul>
<li style="display:none">{$add_img}</li>
<li>{$add_img}</li>
</ul>
</div><!-- //참고 -->
<!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
<div class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color}"></span>
<span class="chips" style="background-color:{$color}"></span>
</div>
</div>
<!-- //참고 -->
</div><!-- //이미지 영역 -->
<!-- 상세정보 내역 -->
<div class="infoArea">
<div class="product_title"><h2>{$name} {$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</h2></div>
<div class="likeButton {$disp_likeprd_class}">
<img src="/_dj/img/like_btn_bg_left.png" /><button type="button">{$disp_likeprd_icon}<span class="count">{$disp_likeprd_count}</span></button><img src="/_dj/img/like_btn_bg_right.png" />
</div>
<div module="product_detaildesign">
<!--
출력 갯수 지정 변수, 없으면 설정된 전체가 나옵니다.
count = 10
-->
<table border="0" summary="">
<caption>{$name} 기본 정보</caption>
<tbody>
<tr style="display:none" class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
<tr class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
<tr class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
</tbody>
</table>
</div>
<!--<table border="1" summary="">
<caption>SNS 상품홍보</caption>
<tbody>
<tr class="{$sns_display|display}">
<th scope="row">SNS 상품홍보</th>
<td class="social">{$facebook_icon} {$twitter_icon} <ul module="product_customsns"><li>{$customsns_icon}</li></ul></td>
</tr>
</tbody>
</table>-->
<p class="{$naver_mileage_exception_display|display}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/txt_naver.gif" alt="개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다." /></p>
<!-- //상세정보 내역 -->
<dl module="product_quantity" class="ec-base-desc quantity">
<dt>수량</dt>
<dd>
<div class="ec-base-qty">
{$form.quantity}
<a href="javascript:;"><img src="//img.echosting.cafe24.com/skin/base/common/btn_quantity_up.gif" id="{$quantity_up_id}" alt="증가" class="up {$quantity_up_class}"></a>
<a href="javascript:;"><img src="//img.echosting.cafe24.com/skin/base/common/btn_quantity_down.gif" id="{$quantity_down_id}" alt="감소" class="down {$quantity_down_class}"></a>
</div>
</dd>
</dl>
<table border="1" summary="" module="product_option">
<caption>상품 옵션</caption>
<!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
<tbody>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
{$form.add_option}
<span class="txtByte" title="현재글자수/최대글자수">(<strong class="length">0</strong>/{$option_maxlength})</span>
</td>
</tr>
</tbody>
<tbody module="product_option">
<tr>
<th scope="row">{$option_name}</th>
<td>{$form.option}<p class="value">{$option_desc}</p></td>
</tr>
<tr module="product_quantity">
<th scope="row">수량</th>
<td>
<div class="ec-base-qty">
{$form.quantity}
<a href="javascript:;"><img src="//img.echosting.cafe24.com/skin/base/common/btn_quantity_up.gif" id="{$quantity_up_id}" alt="증가" class="up {$quantity_up_class}"></a>
<a href="javascript:;"><img src="//img.echosting.cafe24.com/skin/base/common/btn_quantity_down.gif" id="{$quantity_down_id}" alt="감소" class="down {$quantity_down_class}"></a>
</div>
</td>
</tr>
</tbody>
<tbody>
<tr class="{$option_push_button_display|display}" id="{$option_push_button_id}">
<td colspan="2" class="selectButton"><a href="#none" onclick="{$action_push_button}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_manual_select.gif" alt="옵션 선택" /></a></td>
</tr>
<tr module="product_fileoption">
<th scope="row">{$file_option_name}</th>
<td class="fileInfo">
{$form.file_option}
<ul class="infoDesc">
<li>- 파일은 최대 5개까지 {$file_option_limit}M 이하로 개별업로드 가능합니다.</li>
<li>- 동일상품이 장바구니에 있을 경우 현재 업로드 되는 파일로 교체됩니다.</li>
</ul>
</td>
</tr>
</tbody><!-- //참고 -->
</table>
<div class="guideArea">
<span class="sizeGuide {$size_guide_display|display}"><a href="#none" class="{$size_guide_class}" product_no="{$product_no}">사이즈 가이드</a></span>
</div>
<!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
<div class="productSet" module="product_setproduct">
삽입하려는 모듈의 js css를 기존의 경로에 맞추어야만 할것 같은데, 카페24역시 찾기가 쉽지 않습니다.
