Aurora Modules

비회원 주문조회

로그인 페이지에서 노출되는 비회원 주문조회 폼 모듈입니다.

URL: /pages/sign-in/sign-in.html

모듈명: guest-order원본소스

비회원 주문조회 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
currentTab	string	CURRENT_ORDER	현재 탭
guestOrderNo	string	-	비회원 주문번호
guestOrderPassword	string	-	비회원 주문 비밀번호
orderSheetNo	string	-	주문서 번호
orderConfig	OrderConfig	-	주문 설정 값 조회 API 응답 결과와 동일 (주문 설정 정보) (아래 타입 참조)

OrderConfig 타입

속성명	타입	기본값	설명
exposeLogo	boolean	false	에스크로 로고 노출 여부
escrowInfoKey	boolean	false	에스크로 정보 확인 키
logo	boolean	false	이니시스 에스크로 표시 로고

NaverPay 타입

속성명	타입	기본값	설명
buttonKey	string	-	네이버페이 결제버튼 노출에 필요한 button key

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-page sign-in">
    <section class="sign-in-form">
        <guest-order>
            <div>
                <div slot="orderSheetNo">
                    {{#ifNe orderSheetNo ""}}
                    <a class="guest-order-form__link btn btn--line-dark btn--lg" href="/pages/order/order-sheet-form.html?ordersheetNo={{orderSheetNo}}">
                        비회원 주문하기
                    </a>
                    {{else}}
                    <div slot="orderConfig">
                        <p class="guest-order-form__title">비회원 주문조회 하기</p>

                        {{#if orderConfig.includesPreviousOrder}}
                        <ul class="tab tab--full" shopby-on:click="HANDLE_PREVIOUS_ORDER_TAB_TOGGLE" slot="currentTab">
                            <li class="tab__item" shopby-tab="CURRENT_ORDER">
                                <button type="button" class="tab__btn {{#ifEq currentTab 'CURRENT_ORDER'}}is-active{{/ifEq}}">
                                    {{formatUseByDate orderConfig.mallTransferYmdt}}
                                    <br />
                                    이후 주문
                                </button>
                            </li>
                            <li class="tab__item" shopby-tab="PREVIOUS_ORDER">
                                <button type="button" class="tab__btn {{#ifEq currentTab 'PREVIOUS_ORDER'}}is-active{{/ifEq}}">
                                    {{formatUseByDate orderConfig.mallTransferYmdt}}
                                    <br />
                                    이전 주문
                                </button>
                            </li>
                        </ul>
                        {{/if}}
                        <div class="guest-order-form__input-wrap">
                            <span class="input-field input-field--md">
                                <input
                                    autocomplete="new-password"
                                    placeholder="주문번호 입력"
                                    slot="guestOrderNo"
                                    value="{{guestOrderNo}}"
                                    shopby-focus-field="guestOrderNo"
                                    shopby-on:change="CHANGE_GUEST_ORDER_NO"
                                    shopby-on:input="INPUT_GUEST_ORDER_NO_ONLY_NUMBER"
                                />
                            </span>
                            <span class="input-field input-field--md">
                                <input
                                    autocomplete="new-password"
                                    type="password"
                                    placeholder="주문번호 비밀번호 입력"
                                    slot="guestOrderPassword"
                                    value="{{guestOrderPassword}}"
                                    shopby-focus-field="guestOrderPassword"
                                    shopby-on:change="CHANGE_GUEST_ORDER_PASSWORD"
                                    shopby-action="GUEST_ORDER_PASSWORD_KEYPRESS"
                                />
                            </span>
                        </div>
                        <div class="guest-order-form__btn-wrap">
                            <button
                                class="btn btn--fill-point btn--md"
                                shopby-action="SUBMIT_GUEST_ORDER"
                                type="button"
                                shopby-includes-previous-order="{{orderConfig.includesPreviousOrder}}"
                                shopby-current-tab="{{currentTab}}"
                            >
                                주문조회
                            </button>
                        </div>
                    </div>
                    {{/ifNe}}
                </div>
            </div>
        </guest-order>
    </section>
</main>

<section class="sign-in">
    <article class="guest-order-form">
        <guest-order>
            <div>
                <div slot="orderSheetNo">
                    {{#ifNe orderSheetNo ""}}
                    <a class="guest-order-form__link btn btn--line-dark btn--lg" href="/pages/order/order-sheet-form.html?ordersheetNo={{orderSheetNo}}">
                        비회원 주문하기
                    </a>
                    {{else}}
                    <div slot="orderConfig">
                        <p class="guest-order-form__title">비회원 주문조회 하기</p>

                        {{#if orderConfig.includesPreviousOrder}}
                        <ul class="tab tab--full" shopby-on:click="HANDLE_PREVIOUS_ORDER_TAB_TOGGLE" slot="currentTab">
                            <li class="tab__item" shopby-tab="CURRENT_ORDER">
                                <button type="button" class="tab__btn {{#ifEq currentTab 'CURRENT_ORDER'}}is-active{{/ifEq}}">
                                    {{formatUseByDate orderConfig.mallTransferYmdt}}
                                    <br />
                                    이후 주문
                                </button>
                            </li>
                            <li class="tab__item" shopby-tab="PREVIOUS_ORDER">
                                <button type="button" class="tab__btn {{#ifEq currentTab 'PREVIOUS_ORDER'}}is-active{{/ifEq}}">
                                    {{formatUseByDate orderConfig.mallTransferYmdt}}
                                    <br />
                                    이전 주문
                                </button>
                            </li>
                        </ul>
                        {{/if}}
                        <div class="guest-order-form__input-wrap">
                            <span class="input-field input-field--md">
                                <input
                                    autocomplete="new-password"
                                    placeholder="주문번호 입력"
                                    slot="guestOrderNo"
                                    value="{{guestOrderNo}}"
                                    shopby-focus-field="guestOrderNo"
                                    shopby-on:change="CHANGE_GUEST_ORDER_NO"
                                    shopby-on:input="INPUT_GUEST_ORDER_NO_ONLY_NUMBER"
                                />
                            </span>
                        </div>
                        <div class="guest-order-form__input-wrap">
                            <span class="input-field input-field--md">
                                <input
                                    autocomplete="new-password"
                                    type="password"
                                    placeholder="주문번호 비밀번호 입력"
                                    slot="guestOrderPassword"
                                    value="{{guestOrderPassword}}"
                                    shopby-focus-field="guestOrderPassword"
                                    shopby-on:change="CHANGE_GUEST_ORDER_PASSWORD"
                                    shopby-action="GUEST_ORDER_PASSWORD_KEYPRESS"
                                />
                            </span>
                        </div>
                        <div class="btn-group">
                            <button
                                class="btn btn--fill-point btn--lg"
                                shopby-action="SUBMIT_GUEST_ORDER"
                                type="button"
                                shopby-includes-previous-order="{{orderConfig.includesPreviousOrder}}"
                                shopby-current-tab="{{currentTab}}"
                            >
                                주문조회
                            </button>
                        </div>
                    </div>
                    {{/ifNe}}
                </div>
            </div>
        </guest-order>
    </article>
</section>

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