Rhymix(XpressEngine) Tips

콘텐츠판모듈 > 카테고리

본 토픽은 현재 준비중입니다.홈페이지제작-CMS-XpressEngine에 참여하시면 완성 되었을 때 알려드립니다.

기본 출력 코드

<!--@foreach($category_list as $val)-->
<li class="sub_tab_item<!--@if($category==$val->category_srl)--> on<!--@end-->">
   <a href="{getUrl('category',$val->category_srl,'document_srl','')}">
      <span class="sp_tab_txt tab_use1">
                  {$val->title}
                  <!--@if(isset($val->document_count) && $module_info->display_category_post_count != 'N')-->
                  ({$val->document_count})
                  <!--@end-->
              </span>
   </a>
</li>
<!--@end-->

 

위 코드는 콘텐츠판 모듈스킨의 기본 카테고리 출력 코드입니다.

이 코드를 1차 카테고리, 2차 카테고리로 구분하는 방법에 대해서 알아보겠습니다.

 

이 부분은 기존에 작성된 마켓플레이스 모듈의 1차 카테고리, 2차 카테고리를 구하는 소스를 참고해보겠습니다.

<div class="cat_wrap">
 <ul>

  <!--@if(!$category)-->
  <li class="cat_parent">전체</li>
  <li loop="$cate_list=>$key,$val" class="cat_sub1">
   <a href="{getUrl(category,$val->category_srl,'document_srl','', 'page', '', 'act', '')}">
    <i class=" xe-angle-right" cond="$category_list[$category]->parent_srl"></i> {$val->title}
    <span class="fr cat_cnt">{$val->document_count}</span>
   </a>

  </li>
  <!--@elseif($category_list[$category]->parent_srl=='0')-->
  <li class="cat_parent">
   <a href="{getUrl(category,$category,'document_srl','', 'page', '', 'act', '')}">{$category_list[$category]->text}</a>
  </li>
  <block loop="$cate_list=>$key,$val">
<li loop="$val->children=>$idx,$item" class="cat_sub1asdfasdf" cond="$category==$item->parent_srl">
   <a href="{getUrl(category,$item->category_srl,'document_srl','', 'page', '', 'act', '')}"><i class=" xe-angle-right" cond="$category_list[$category]->parent_srl"></i> {$item->title}
      <span class="fr cat_cnt">{$item->document_count}</span>
   </a>
         </li>
  </block>
  <!--@else-->
  <li class="cat_parent">
   <a href="{getUrl(category,$category_list[$category]->parent_srl,'document_srl','', 'page', '', 'act', '')}">{$category_list[$category_list[$category]->parent_srl]->title}</a>
  </li>
  <li class="cat_sub2">
   <a href="{getUrl(category,$item->category_srl,'document_srl','', 'page', '', 'act', '')}"><i class=" xe-angle-right" cond="$category_list[$category]->parent_srl"></i> {$category_list[$category]->title}
    <span class="fr cat_cnt">{$category_list[$category]->document_count}</span>
      </a>
  </li>
  <!--@end-->
 </ul>
</div>

 

코노리님의 기본 콘텐츠판모듈스킨의 경우 foreach문을 사용했고,  

마켓플레이스 모듈스킨의 경우 XE문법인 loop문을 사용했습니다.

foreach문과 loop문의 사용방법에 대해서는 아래 게시물을 참조해주세요.

https://xetown.com/tips/1132274

 

본격적으로 이제 작업해봅시다.

기본적으로 카테고리의 구조를 알려면 다음 코드를 출력해보세요.

{var_dump($category_list)}

자세히 보시면 parent_srl 값이 0인 것과 그렇지 않은 코드가 있습니다.

0이 부모이고, 값이 있는 경우 자식 카테고리입니다.

자 이제 구분해서 출력해주면 되겠죠?

 

현재카테고리번호 : {$category}

 

<!--@if(!$category)-->
    <li class="sub_tab_item"><a href="{getUrl('category','')}">전체 ({$total_count})</a></li>
    <!--@foreach($category_list as $val)-->
    <li class="sub_tab_item<!--@if($category==$val->category_srl)--> on<!--@end-->" cond="$val->parent_srl=='0'">
        <a href="{getUrl('category',$val->category_srl,'document_srl','')}">
            <span class="sp_tab_txt tab_use1">{$val->title} <!--@if(isset($val->document_count) && $module_info->display_category_post_count != 'N')-->({$val->document_count})<!--@end--></span>
        </a>
    </li>
    <!--@end-->
<!--@elseif($category_list[$category]->parent_srl!==NULL)-->
    <li class="sub_tab_item">
        <a href="{getUrl('category','')}">← {$category_list[$category]->text} ({$category_list[$category]->document_count})</a>
    </li>
    <li loop="$category_list=>$key,$val" cond="$category==$val->parent_srl" class="sub_tab_item" class="on"|cond="$category==$val->category_srl">
      <a href="{getUrl('category',$val->category_srl)}">{$val->text} ({$val->document_count})</a>
    </li>
<!--@else-->
    <li class="sub_tab_item">
        <a href="{getUrl('category','')}">← {$category_list[$category_list[$category]->parent_srl]->title}</a>
    </li>
    <li loop="$category_list=>$key,$val" cond="$category==$val->parent_srl" class="on"|cond="$category==$val->category_srl" class="sub_tab_item">
        <a href="{getUrl('category',$val->category_srl)}">{$val->text} ({$val->document_count})</a>
    </li>
<!--@end-->

 

작업한 방식

<style>
    .cat-wrap .main-box{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      list-style: none;
    }
    .hide{
      display:none !important;
    }
    .cat-wrap a.on{
      /*flex: auto;*/
      font-weight: bold;
    }
    .test{}
    pre{
      position: fixed;
      right: 0;
      top: 0;
      background-color: #000;
      color: #fff;
      overflow-y: scroll;
      height: 100vh;
      font-size: 11px;
    }
    .sub-box{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-top: 1px solid #000;
    }
    .sub-box a.on{
      font-weight: bold;
    }
    xmp{
      margin: 0;
      position: fixed;
      left: 0;
      top: 0;
      background-color: #000;
      color: #fff;
      overflow-y: scroll;
      height: 100vh;
      font-size: 11px;
    }
</style>

 

    <div class="sub-box" cond="$category">
<!--        <block loop="$category_list=>$key,$val" cond="$val->depth!==0 && ($category==$val->parent_srl || $category==$val->category_srl || $val->category_srl==$val->parent_srl || in_array($val->category_srl,$val->childs))">-->
<!--            <a href="{getUrl('category',$val->category_srl)}">{$val->title} ({$val->document_count}) [{$val->category_srl}]</a>-->
<!--        </block>-->
        <!--<a href="{getUrl('category',$val->parent_srl)}">하위전체</a>-->
        <block loop="$category_list=>$key,$val" cond="$val->depth!==0">
            <!--@if(in_array($val->category_srl,$category_list[$category]->childs))-->
            ㄱ.<a href="{getUrl('category',$val->category_srl)}" class="on"|cond="$val->selected">{$val->title} ({$val->document_count}) [{$val->category_srl}]</a>
            <!--@elseif($val->parent_srl==$val->category_srl)-->
            ㄴ.<a href="{getUrl('category',$val->category_srl)}" class="on"|cond="$val->selected">{$val->title} ({$val->document_count}) [{$val->category_srl}]</a>
            <!--@elseif(in_array($val->parent_srl,$category_list[$category]->parent_srl))-->

            ㄷ.<a href="{getUrl('category',$val->category_srl)}" class="on"|cond="$val->selected">{$val->title} ({$val->document_count}) [{$val->category_srl}]</a>
            <!--@else-->
            ㄹ.<block cond="$val->selected">
                부모:{$val->parent_srl}
                ㅁ.<block loop="$category_list=>$key1,$val1" cond="$val1->depth!==0 && in_array($category,$category_list[$val1->parent_srl]->childs)">{$val1->title}</block>
            </block>
            <!--@end-->
<xmp>선택한카테고리:{$category}/
해당카테고리:{$val->category_srl}/
부모카테고리:{$val->parent_srl}/
자식카테고리:{var_dump($category_list[$category]->childs)}
-
</xmp>
        </block>

        <pre>{var_dump($category_list)}</pre>

 

  • 봤어요 0명

댓글

댓글 본문