카페24시 skin -> product -> detail 모듈에 커스텀 팝업 js 삽입 이슈

카페24시 skin -> product -> detail 모듈에 커스텀 팝업 js 삽입 이슈

QA

카페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

현재 이것저것 해보았는데, 심통지 않아서요,,,

 해당 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/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역시 찾기가 쉽지 않습니다.

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 299
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT