Aurora Modules

슬라이드 메뉴

모바일 공통 상단 메뉴 버튼을 클릭시 노출되는 슬라이드 메뉴 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-category-no	number	-	(필수)카테고리 번호 하위 카테고리가 있는 경우 하위 카테고리 리스트 열기/닫기 이벤트를 위해 사용한다.

사용 가능 변수

변수명	타입	기본값	설명
isSignedIn	boolean	false	로그인 여부
multiLevelCategories	Category[]	[]	몰정보 조회 API 응답 중 `categories.multiLevelCategories`와 동일 (카테고리 정보) (아래 타입 참조)
boardsCategories	BoardsCategories[]	[]	몰정보 조회 API 응답 중의 `boardsCategories`와 동일한 데이터 (게시판 정보) (아래 타입 참조)
hasEvents	boolean	false	기획전 존재 여부

Category 타입

속성명	타입	기본값	설명
categoryNo	number	-	카테고리 번호
depth	number	-	카테고리 depth
label	string	-	카테고리명
count	number	0	카테고리 상품 수
children	array	[]	하위 카테고리 목록 CategoryChildren 타입과 동일한 데이터

BoardsCategories 타입

속성명	타입	기본값	설명
used	boolean	false	게시판 사용 여부
boardNo	number	-	게시판 번호
boardName	string	-	게시판 이름

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div>모바일 전용 모듈입니다</div>

<slide-menu>
    <section class="slide-menu category-nav is-active">
        <!-- 슬라이드메뉴 헤더 -->
        <div class="slide-menu__login-header">
            <p slot="offcanvas-header">
                {{#if isSignedIn}}
                <a class="slide-menu__login-header-link">MY PAGE</a>
                <span class="slide-menu__divide-bar--vertical"></span>
                <button class="slide-menu__login-header-link" shopby-action="SIGN_OUT">LOG OUT</button>
                {{else}}
                <a class="slide-menu__login-header-link">LOGIN</a>
                <span class="slide-menu__divide-bar--vertical"></span>
                <a class="slide-menu__login-header-link">JOIN</a>
                {{/if}}
            </p>

            <button class="category-nav-sign-in__close" shopby-action="CLOSE_SLIDE_MENU">
                <span class="ico ico--x-white-24"></span>
            </button>
        </div>

        <div class="category-nav-content">
            <!-- 카테고리 -->
            <div>
                <div class="slide-menu__nav-header">
                    <em class="slide-menu__nav-heading">CATEGORY</em>
                </div>

                <nav class="slide-menu__nav-content" slot="offcanvas-product-categories">
                    <ul>
                        {{#each multiLevelCategories}}
                        <!-- 1차 카테고리 -->
                        <li class="slide-menu__nav-category-item-wrap">
                            <div
                                shopby-category-no="{{categoryNo}}"
                                class="slide-menu__nav-category-label-wrap"
                                shopby-action="TOGGLE_SLIDE_MENU_CHILD_CATEGORY"
                            >
                                <a class="slide-menu__nav-category-label slide-menu__nav-category-label--one-depth">{{label}}</a>

                                {{#if children}}
                                <button class="slide-menu__nav-category-open-btn">
                                    <span class="ico ico--angle-down-black-24"></span>
                                </button>
                                {{/if}}
                            </div>

                            {{#if children}}
                            <!-- 2차 카테고리 -->
                            <ul class="slide-menu__nav-category-wrap" shopby-category-wrap="{{categoryNo}}">
                                {{#each children}}
                                <li class="slide-menu__nav-category-item-wrap">
                                    <div
                                        shopby-category-no="{{categoryNo}}"
                                        class="slide-menu__nav-category-label-wrap"
                                        shopby-action="TOGGLE_SLIDE_MENU_CHILD_CATEGORY"
                                    >
                                        <a class="slide-menu__nav-category-label slide-menu__nav-category-label--two-depth">{{label}}</a>

                                        {{#if children}}
                                        <button class="slide-menu__nav-category-open-btn">
                                            <span class="ico ico--angle-down-black-24"></span>
                                        </button>
                                        {{/if}}
                                    </div>

                                    <!-- 3차 카테고리 -->
                                    <ul class="slide-menu__nav-category-wrap" shopby-category-wrap="{{categoryNo}}">
                                        {{#each children}}
                                        <li class="slide-menu__nav-category-item-wrap">
                                            <a class="slide-menu__nav-category-label slide-menu__nav-category-label--three-depth">
                                                <span>{{label}}</span>
                                            </a>
                                        </li>
                                        {{/each}}
                                    </ul>
                                </li>
                                {{/each}}
                            </ul>
                            {{/if}}
                        </li>
                        {{/each}}
                    </ul>
                </nav>
            </div>
            <!-- 기획전 -->
            <div>
                <div class="slide-menu__nav-header">
                    <a class="slide-menu__nav-category-label" style="padding: unset">
                        <em class="slide-menu__nav-heading">기획전</em>
                    </a>
                </div>
            </div>
            <!-- 커뮤니티 -->
            <div>
                <div class="slide-menu__nav-header">
                    <em class="slide-menu__nav-heading">COMMUNITY</em>
                </div>

                <nav slot="offcanvas-cs">
                    <ul>
                        <li class="slide-menu__nav-category-item-wrap">
                            <a shopby-action="GO_MY_MENU" class="slide-menu__nav-category-label slide-menu__nav-category-label--one-depth">
                                (고정게시판) 1:1 문의
                            </a>
                        </li>
                        <li class="slide-menu__nav-category-item-wrap">
                            <a shopby-action="GO_MY_MENU" class="slide-menu__nav-category-label slide-menu__nav-category-label--one-depth">
                                (고정게시판) 상품문의
                            </a>
                        </li>
                        <li class="slide-menu__nav-category-item-wrap">
                            <a shopby-action="GO_MY_MENU" class="slide-menu__nav-category-label slide-menu__nav-category-label--one-depth">
                                (고정게시판) 상품후기
                            </a>
                        </li>

                        {{#each boardsCategories}}
                        <li class="slide-menu__nav-category-item-wrap">
                            <a class="slide-menu__nav-category-label slide-menu__nav-category-label--one-depth">(일반게시판) {{boardName}}</a>
                        </li>
                        {{/each}}
                    </ul>
                </nav>
            </div>
        </div>
    </section>
</slide-menu>

/* 여기에 스타일 코드를 작성해주세요. */