테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

카테고리 슬라이드 오류 질문입니다. 채택완료

jhj 4년 전 조회 2,908
답변 1
목록

 

안녕하세요. 항상 친절하게 도움 주시고 답변해주셔서 감사합니다!

덕분에 사이트 완성도도 높아지고 준비를 더 꼼꼼하게 할 수 있어 항상 감사한 마음을 가지고 있습니다 ㅠㅠ

다름이 아니라 제가 테마를 strawberry 를 쓰고 있고 모든 스킨을 테마스킨을 적용시킨 후 사용하고 있습니다.

그런데 카테고리 부분에서 1차 분류인 전체 브랜드가 있고 그에 하위분류인 야옹다옹이라는 카테고리가 있습니다.

제가 의문이 드는 것은 

전체 브랜드에서 이 화살표 방향을 클릭하면 밑에 하위 브랜드가 나오는 식의 메뉴 구현이 되어있는 것 같은데 아무리 클릭을 해봐도 슬라이드가 구현이 되지 않습니다...

분류에 잘못이 있는 것은 아닌 것 같은게 상단 메뉴바에서 브랜드 위에 커서를 올리면 야옹다옹이라는 메뉴가 정상적으로 잘 표시가 됩니다. 그래서 카테고리를 담당하는 파일을 찾아봤는데

홈페이지 내에서 찾아본 소스는 다음과 같았고

</p>

<p><!-- 쇼핑몰 카테고리 시작 { -->

<nav id="gnb">

    <h2>쇼핑몰 카테고리</h2>

    <ul id="gnb_1dul">

        <li class="gnb_1dli"><button type="button" id="menu_open"><i class="fa fa-bars" aria-hidden="true"></i> <span class="sound_only">카테고리</span></button></li>

                <li class="gnb_1dli" style="z-index:998">

            <a href="<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya"" target="_blank" rel="noopener noreferrer">http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya"</a> class="gnb_1da gnb_1dam">전체 브랜드</a>

            <ul class="gnb_2dul" style="z-index:998">                <li class="gnb_2dli"><a href="<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya01"" target="_blank" rel="noopener noreferrer">http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya01"</a> class="gnb_2da">야옹다옹</a></li>

            </ul>        </li>

            </ul></p>

<p></nav>

<!-- } 쇼핑몰 카테고리 끝 -->    <div id="category"></p>

<p>    <div class="ct_wr">

        <button type="button" class="close_btn"> 카테고리<span class="sound_only">닫기</span><i class="fa fa-times" aria-hidden="true"></i></button>

        <ul class="cate">

            <li class="cate_li_1">

                <a href="<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya"" target="_blank" rel="noopener noreferrer">http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya"</a> class="cate_li_1_a">전체 브랜드</a>

                <ul class="sub_cate sub_cate1">

                    <li class="cate_li_2">

                        <a href="<a href="http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya01">야옹다옹</a>" target="_blank" rel="noopener noreferrer">http://jhjb1445.dothome.co.kr/shop/list.php?ca_id=ya01">야옹다옹</a></a>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

</div></p>

<p><script>

$(function (){

    var $category = $("#category");</p>

<p>    $("#menu_open").on("click", function() {

        $category.css("display","block");

    });</p>

<p>    $("#category .close_btn").on("click", function(){

        $category.css("display","none");

    });

});

$(document).mouseup(function (e){

    var container = $("#category");

    if( container.has(e.target).length === 0)

    container.hide();

});

</script>

</div>

 

 

shop/category.php에서는 이렇게 표현되어 있습니다.

 

</p>

<p><?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>

<p>function get_mshop_category($ca_id, $len)

{

    global $g5;</p>

<p>    $sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']}

                where ca_use = '1' ";

    if($ca_id)

        $sql .= " and ca_id like '$ca_id%' ";

    $sql .= " and length(ca_id) = '$len' order by ca_order, ca_id ";</p>

<p>    return $sql;

}

?>

<div id="category">

    <button type="button" class="close_btn"><i class="fa fa-times" aria-hidden="true"></i> 카테고리<span class="sound_only">닫기</span></button></p>

<p>    <div class="ct_wr">

        <?php

        $mshop_ca_res1 = sql_query(get_mshop_category('', 2));

        for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {

            if($i == 0)

                echo '<ul class="cate">'.PHP_EOL;

        ?>

            <li class="cate_li_1">

                <a href="<?php echo shop_category_url($mshop_ca_row1['ca_id']); ?>" class="cate_li_1_a"><?php echo get_text($mshop_ca_row1['ca_name']); ?></a>

                <?php

                $mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));</p>

<p>                for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {

                    if($j == 0)

                        echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;

                ?>

                    <li class="cate_li_2">

                        <a href="<?php echo shop_category_url($mshop_ca_row2['ca_id']); ?>"><?php echo get_text($mshop_ca_row2['ca_name']); ?></a>

                    </li>

                <?php

                }</p>

<p>                if($j > 0)

                    echo '</ul>'.PHP_EOL;

                ?>

            </li>

        <?php

        }</p>

<p>        if($i > 0)

            echo '</ul>'.PHP_EOL;

        else

            echo '<p class="no-cate">등록된 분류가 없습니다.</p>'.PHP_EOL;

        ?>

    </div>

</div></p>

<p><script>

$(function (){

    var $category = $("#category");</p>

<p>    $("#menu_open").on("click", function() {

        $category.css("display","block");

    });</p>

<p>    $("#category .close_btn").on("click", function(){

        $category.css("display","none");

    });

});

$(document).mouseup(function (e){

    var container = $("#category");

    if( container.has(e.target).length === 0)

    container.hide();

});

</script>

 

 

/html/theme/strawberry/skin/shop/basic/listcategory.skin.php

에는

</p>

<p><?php

if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가</p>

<p>$str = '';

$exists = false;</p>

<p>$ca_id_len = strlen($ca_id);

$len2 = $ca_id_len + 2;

$len4 = $ca_id_len + 4;</p>

<p>// 최하위 분류의 경우 상단에 동일한 레벨의 분류를 출력해주는 코드

if (!$exists) {

    $str = '';</p>

<p>    $tmp_ca_id = substr($ca_id, 0, strlen($ca_id)-2);

    $tmp_ca_id_len = strlen($tmp_ca_id);

    $len2 = $tmp_ca_id_len + 2;

    $len4 = $tmp_ca_id_len + 4;</p>

<p>    // 차차기 분류의 건수를 얻음

    $sql = " select count(*) as cnt from {$g5['g5_shop_category_table']} where ca_id like '$tmp_ca_id%' and ca_use = '1' and length(ca_id) = $len4 ";

    $row = sql_fetch($sql);

    $cnt = $row['cnt'];</p>

<p>    $sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where ca_id like '$tmp_ca_id%' and ca_use = '1' and length(ca_id) = $len2 order by ca_order, ca_id ";

    $result = sql_query($sql);

    while ($row=sql_fetch_array($result)) {

        $sct_ct_here = '';

        if ($ca_id == $row['ca_id']) // 활성 분류 표시

            $sct_ct_here = 'sct_ct_here';</p>

<p>        $str .= '<li>';

        if ($cnt) {

            $str .= '<a href="./list.php?ca_id='.$row['ca_id'].'" class="sct_ct_parent '.$sct_ct_here.'">'.$row['ca_name'].'</a>';

            $sql2 = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where ca_id like '{$row['ca_id']}%' and ca_use = '1' and length(ca_id) = $len4 order by ca_order, ca_id ";

            $result2 = sql_query($sql2);

            $k=0;

            $add_str = '';

            while ($row2=sql_fetch_array($result2)) {

                $add_str .= '<div class="sct_ct_child"><a href="./list.php?ca_id='.$row2['ca_id'].'">'.$row2['ca_name'].'</a></div>';

                $k++;

            }

            if($add_str){       //해당 분류의 하위분류가 있으면

                $str .= '<button type="button" class="mn_op"><i class="fa fa-chevron-down" aria-hidden="true"></i><span class="sound_only">하위분류</span></button>'.$add_str;

            }

        } else {

            $str .= '<a href="./list.php?ca_id='.$row['ca_id'].'" class="sct_ct_parent '.$sct_ct_here.'">'.$row['ca_name'].'</a>';

        }

        $str .= '</li>';

        $exists = true;

    }

}</p>

<p>

$sct_sort_href = $_SERVER['SCRIPT_NAME'].'?';

if($ca_id)

    $sct_sort_href .= 'ca_id='.$ca_id;

else if($ev_id)

    $sct_sort_href .= 'ev_id='.$ev_id;

if($skin)

    $sct_sort_href .= '&amp;skin='.$skin;

$sct_sort_href .= '&amp;sort=';</p>

<p>if ($exists) {</p>

<p>    // add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

    add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_CSS_URL.'/style.css">', 0);

?>

<div class="con_left">

    <!-- 상품분류 2 시작 { -->

    <aside id="sct_ct_2" class="sct_ct">

        <h2>카테고리</h2>

        <ul>

            <?php echo $str; ?>

        </ul>

    </aside>

    <!-- } 상품분류 2 끝 --></p>

<p>    <!-- 상품 정렬 선택 시작 { -->

    <section id="sct_sort">

        <h2>상품 정렬</h2>

        <ul>

        <li><a href="<?php echo $sct_sort_href; ?>it_sum_qty&amp;sortodr=desc">판매많은순</a></li>

        <li><a href="<?php echo $sct_sort_href; ?>it_price&amp;sortodr=asc">낮은가격순</a></li>

        <li><a href="<?php echo $sct_sort_href; ?>it_price&amp;sortodr=desc">높은가격순</a></li>

        <li><a href="<?php echo $sct_sort_href; ?>it_use_avg&amp;sortodr=desc">평점높은순</a></li>

        <li><a href="<?php echo $sct_sort_href; ?>it_use_cnt&amp;sortodr=desc">후기많은순</a></li>

        <li><a href="<?php echo $sct_sort_href; ?>it_update_time&amp;sortodr=desc">최근등록순</a></li>

        </ul>

    </section></p>

<p>    <ul id="sct_lst">

        <li><button type="button" class="sct_lst_view sct_lst_list"><i class="fa fa-th-list" aria-hidden="true"></i><span class="sound_only">리스트뷰</span></button></li>

        <li><button type="button" class="sct_lst_view sct_lst_gallery"><i class="fa fa-th-large" aria-hidden="true"></i><span class="sound_only">갤러리뷰</span></button></li>

    </ul>

</div>

<!-- } 상품 정렬 선택 끝 --></p>

<p>

<?php } ?></p>

<p>
와 같이 소스가 되어 있습니다.

 

 

어디를 고쳐야 카테고리가 정상적으로 슬라이드 될까요? ㅠㅠㅠ 재설치를 해보고 계속 찾아봐도 제가 html과 css는 어느정도 이제 볼줄 아는데 자바는 아직 저에게 많이 어렵네요...ㅜㅜ 더 열심히 공부하도록 하겠습니다.

현재 사이트는 http://jhjb1445.dothome.co.kr/shop/ 입니다. 미숙한 실력 정말 죄송합니다...

 

 

#영카트5 #카테고리 #오류 #자바스크립트 #슬라이드
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
드
드비앙s
4년 전

하위분류는 정상적으로 있긴 한데

 

그 화살표를 눌렀을 때 그게 보이는 스크립트가 없는거 같아요

 

<script>
    $(".mn_op").click(function() {
        $(".sct_ct_child").css("display","block");
    });

</script>

 

을 넣으시면 보일거 같아요

 

원래 화살표 클릭하면 화살표가 반대로 바뀌면서 그거 다시 클릭하면 숨겨져야 하는데..

 

아니면 http://jhjb1445.dothome.co.kr/theme/strawberry/skin/shop/basic/style.css?ver=191202

 

css 432줄에서 #sct_ct_2 li .sct_ct_child을 display:block으로 바꿔보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

j
jhj
4년 전
아 이렇게 하는 방법들이 있었네요ㅠㅠㅠ 알려주신 방법 두개를 다 해보고 먼저 말씀해주신 해결 방법으로 잘 해결됐습니다!
다시 버튼을 클릭하면 메뉴가 올라가는 것도 열심히 공부하면서 해결해보겠습니다. 알려주셔서 정말 감사합니다 ㅠㅠㅠ
�
블랑숑
4년 전
위 소스를 응용하여

클릭 -> 화살표 반대 이미지 보임(원 화살표 숨김) & 카테고리 보임 -> 반대 이미지 클릭 시 반대 이미지 숨김(원 화살표 보임) & 카테고리 숨김

이렇게 해보세요
j
jhj
4년 전
지금 현 상태에서는 클릭했을 때 메뉴가 잘 내려오지만 버튼이 위쪽 버튼으로 바뀌지는 않는 상황입니다. 이때 버튼을 바꿔주려면 어떻게 해야 할까요? 그 방법만 알 수 있다면 다시 메뉴를 숨기는방법도 가능 할 수 있을 것 같습니다 ㅠㅠ
�
블랑숑
4년 전
버튼을 생성하시고 css에서 display none으로 해주세요 그리고 위 소스에서 하나 더 추가해서 display block으로 바꿔주는거죠
j
jhj
4년 전
아아 저 버튼을 가져다가 새롭게 제작을 하면 간단하게 해결되겠네요! 추가질문했는데도 친절히 알려주셔서 감사합니다. 알려주신 방법대로 응용해서 제 힘으로 한번 만들어보겠습니다! 멋진 사이트를 완성하는 그날까지... 답변해주셔서 감사합니다!!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인