코스모스팜 스레드

컨텐츠 몰에서 드롭다운으로 계층형 카테고리를 보고 싶습니다.

1. 정확한 제품 또는 플러그인 이름

kboard 퍼스트 컨텐츠 몰 

 

2. 상세 내용

 

계층형 카테고리가 기본스킨에서는 추가로 아래에 하위 계층이 나오는 식입니다.

요즘 흔히 보는 형태로 계층형 클릭시 하위 계층이 토글 열리듯이 열리는 식으로 해보고 싶습니다.

2계층 까지만 해도 충분하다고 생각하여 커뮤니티의 글을 참조 하였지만 적용이 어렵네요

https://www.cosmosfarm.com/threads/document/20533

혹시 어떤 부분을 수정하면 좋을까요 ?

 

3. 확인 가능한 상세 페이지 주소

pgian.com/store/

 

4. 수정한 코드 내역 (있다면)

 

 

추천 0 비추천

내 홈페이지에 소셜 공유 버튼 추가하기

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기

  • 안녕하세요~^^

    어떤 부분을 수정해야 할지 위치를 모르시겠다는 걸까요? 

    어떤 게 어려우신 걸까요? 

    문의하신 내용으로만으로는 

    어떤 내용인지 파악하기 어렵습니다. 

    더 자세히 작성해 주시겠어요?

    고맙습니다.

     

    추천 0 비추천
    수정하기 삭제

  • 네 어떤 부분을 수정해야할지 잘 감이 잘 안잡힙니다.

    이리저리 테스트 해보고 있는데 어렵네요

    글들 읽어보면서 note++이용해서 코드 수정해보고 있는데 영 생각대로 안되네요 ㅠ 

    도움 주실 수 있다면 매우 감사드립니다. 

    추천 0 비추천
    수정하기 삭제

  • 성공했네요 혹시 검색으로 오셔서 참조하실분 있으시면 사용하세요

     

    
<!--기본 + 토글 도입-->
<!--<h5>토글</h5>-->
<div class="kboard-tree-category-search">
	<h4><?php echo strtoupper(__('Categories', 'kboard'))?></h4>
	<form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
	
		<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
		
		<input type="hidden" name="kboard_search_option[tree_category_1][key]" value="tree_category_1">
		<input type="hidden" name="kboard_search_option[tree_category_1][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(1)?>">
		<input type="hidden" name="kboard_search_option[tree_category_2][key]" value="tree_category_2">
		<input type="hidden" name="kboard_search_option[tree_category_2][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(2)?>">
		
		<div class="kboard-tree-category-wrap" id = "category-menu">
			<?php $tree_category_list = $board->tree_category->getCategoryItemList()?>
			<div class="kboard-search-option-wrap-1 kboard-search-option-wrap type-tab">
				<ul class="kboard-tree-category">
					<li<?php if(!$board->tree_category->getCategoryNameWithDepth(1)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_all()"><?php echo __('All', 'kboard')?></a></li>
					<?php foreach($tree_category_list as $item):?>
					<li<?php if($board->tree_category->getCategoryNameWithDepth(1) == $item['category_name']):?> class="kboard-category-selected category-item"<?php else:?> class="category-item"<?php endif?>>
						<a href="#" onclick="return kboard_tree_category_search_1dapth('<?php echo $item['category_name']?>')" class="category-link"><?php echo $item['category_name']?></a>
						
						<?php
						$sub_tree_category_list = array();
						foreach($board->tree_category->tree_category as $sub_item){
							if($item['id'] == $sub_item['parent_id']){
								$sub_tree_category_list[] = $sub_item;
							}
						}
						?>
						
						<?php if($sub_tree_category_list):?>
							<ul class="sub-tree-category sub-category">
							<?php foreach($sub_tree_category_list as $sub_item):?>
								<li<?php if($board->tree_category->getCategoryNameWithDepth(2) == $sub_item['category_name']):?> class="kboard-category-selected sub-category-item"<?php else:?> class="sub-category-item"<?php endif?>><a href="#"  onclick="return kboard_tree_category_search_2dapth('<?php echo $item['category_name']?>', '<?php echo $sub_item['category_name']?>')" class="sub-category-link">    <?php echo "ㄴ".$sub_item['category_name']?></a></li>
							<?php endforeach?>
							</ul>
						<?php endif?>
					</li>
					<?php endforeach?>
				</ul>
			</div>
		</div>
	</form>
</div>
<?php echo("
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
function kboard_tree_category_search_all(){
	jQuery('input[name=".'"'."kboard_search_option[tree_category_1][value]".'"'."]').val('');
	jQuery('input[name=".'"'."kboard_search_option[tree_category_2][value]".'"'."]').val('');
	return kboard_tree_category_search('1', '');
}
function kboard_tree_category_search_1dapth(category1){
	jQuery('input[name=".'"'."kboard_search_option[tree_category_2][value]".'"'."]').val('');
	return kboard_tree_category_search('1', category1);
}
function kboard_tree_category_search_2dapth(category1, category2){
	jQuery('input[name=".'"'."kboard_search_option[tree_category_1][value]".'"'."]').val(category1);
	return kboard_tree_category_search('2', category2);
}
</script>
<script>
$(document).ready(function() {
  $('.category-link').click(function(e) {
    e.preventDefault();
    $(this).next('.sub-category').slideToggle();
  });
});
</script>
<style>#kboard-category-list .kboard-tree-category { overflow: visible; }
#kboard-category-list .kboard-tree-category>li { position: relative;  }
#kboard-category-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: #f9f9f9; }
#kboard-category-list .sub-tree-category>li { display: block; margin: 0; padding: 0 5px; border: 0; list-style: none; }
#kboard-category-list .sub-tree-category>li::before,
#kboard-category-list .sub-tree-category>li::after { display: none; }
#kboard-category-list .sub-tree-category>li>a { font-weight: normal !important; border-bottom: 2px solid transparent !important; }
#kboard-category-list .sub-tree-category>li.kboard-category-selected a { font-weight: bold !important; }
#kboard-category-list .kboard-tree-category>li .sub-tree-category { display: none; }
#kboard-category-list .kboard-tree-category>li:hover .sub-tree-category { display: block; }
.sub-category {
  display: none;
}
</style>");?>



<?php
$board->tree_category->depth = 0;
$board->tree_category->parent_id = '';
?>

     

    추천 0 비추천
    수정하기 삭제

  • 하위가 있는 것 클릭하면 열리다 보니 해당 링크로 가져서 옆에 + 를 추가하는 식으로 한번 더 수정했습니다.

     

    
<!--기본 + 토글 도입-->
<!--<h5>토글</h5>-->
<div class="kboard-tree-category-search">
	<h4><?php echo strtoupper(__('Categories', 'kboard'))?></h4>
	<form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
	
		<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
		
		<input type="hidden" name="kboard_search_option[tree_category_1][key]" value="tree_category_1">
		<input type="hidden" name="kboard_search_option[tree_category_1][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(1)?>">
		<input type="hidden" name="kboard_search_option[tree_category_2][key]" value="tree_category_2">
		<input type="hidden" name="kboard_search_option[tree_category_2][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(2)?>">
		
		<div class="kboard-tree-category-wrap" id = "category-menu">
			<?php $tree_category_list = $board->tree_category->getCategoryItemList()?>
			<div class="kboard-search-option-wrap-1 kboard-search-option-wrap type-tab">
				<ul class="kboard-tree-category">
					<li<?php if(!$board->tree_category->getCategoryNameWithDepth(1)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_all()"><?php echo __('All', 'kboard')?></a></li>
					<?php foreach($tree_category_list as $item):?>
					<li<?php if($board->tree_category->getCategoryNameWithDepth(1) == $item['category_name']):?> class="kboard-category-selected category-item"<?php else:?> class="category-item"<?php endif?>>
						<a href="#" onclick="return kboard_tree_category_search_1dapth('<?php echo $item['category_name']?>')" ><?php echo $item['category_name']?></a>
						
						<?php
						$sub_tree_category_list = array();
						foreach($board->tree_category->tree_category as $sub_item){
							if($item['id'] == $sub_item['parent_id']){
								$sub_tree_category_list[] = $sub_item;
							}
						}
						?>
						
						<?php if($sub_tree_category_list):?>
						<a class="category-link">+</a>
							<ul class="sub-tree-category sub-category">
							<?php foreach($sub_tree_category_list as $sub_item):?>
								<li<?php if($board->tree_category->getCategoryNameWithDepth(2) == $sub_item['category_name']):?> class="kboard-category-selected sub-category-item"<?php else:?> class="sub-category-item"<?php endif?>><a href="#"  onclick="return kboard_tree_category_search_2dapth('<?php echo $item['category_name']?>', '<?php echo $sub_item['category_name']?>')" class="sub-category-link">    <?php echo "ㄴ".$sub_item['category_name']?></a></li>
							<?php endforeach?>
							</ul>
						<?php endif?>
					</li>
					<?php endforeach?>
				</ul>
			</div>
		</div>
	</form>
</div>
<?php echo("
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
function kboard_tree_category_search_all(){
	jQuery('input[name=".'"'."kboard_search_option[tree_category_1][value]".'"'."]').val('');
	jQuery('input[name=".'"'."kboard_search_option[tree_category_2][value]".'"'."]').val('');
	return kboard_tree_category_search('1', '');
}
function kboard_tree_category_search_1dapth(category1){
	jQuery('input[name=".'"'."kboard_search_option[tree_category_2][value]".'"'."]').val('');
	return kboard_tree_category_search('1', category1);
}
function kboard_tree_category_search_2dapth(category1, category2){
	jQuery('input[name=".'"'."kboard_search_option[tree_category_1][value]".'"'."]').val(category1);
	return kboard_tree_category_search('2', category2);
}
</script>
<script>
$(document).ready(function() {
  $('.category-link').click(function(e) {
    e.preventDefault();
	if($(this).text()=='+'){
	$(this).text('-');
	}else{
	$(this).text('+');
	}
    $(this).next('.sub-category').slideToggle();
  });
});
</script>
<style>#kboard-category-list .kboard-tree-category { overflow: visible; }
#kboard-category-list .kboard-tree-category>li { position: relative;  }
#kboard-category-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: #f9f9f9; }
#kboard-category-list .sub-tree-category>li { display: block; margin: 0; padding: 0 5px; border: 0; list-style: none; }
#kboard-category-list .sub-tree-category>li::before,
#kboard-category-list .sub-tree-category>li::after { display: none; }
#kboard-category-list .sub-tree-category>li>a { font-weight: normal !important; border-bottom: 2px solid transparent !important; }
#kboard-category-list .sub-tree-category>li.kboard-category-selected a { font-weight: bold !important; }
#kboard-category-list .kboard-tree-category>li .sub-tree-category { display: none; }
#kboard-category-list .kboard-tree-category>li:hover .sub-tree-category { display: block; }
.sub-category {
  display: none;
}
</style>");?>



<?php
$board->tree_category->depth = 0;
$board->tree_category->parent_id = '';
?>

     

    추천 0 비추천
    수정하기 삭제

스토어인기제품 더보기

커뮤니티새로운 글 더보기

블로그
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요