Aurora Modules

디자인팝업

모든 페이지에서 노출되는 디자인팝업 모듈입니다.

모듈명: design-popup원본소스

디자인팝업 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-popup-no	number	-	팝업번호
shopby-popup-content	string	-	팝업컨텐츠 영역 내부적으로 팝업의 크기를 조정하기 위해 사용
shopby-popup-multi-main	string	-	멀티팝업 이미지 영역 어드민 설정에서 큰이미지로 설정한 이미지
shopby-popup-multi-sub	string	-	멀티팝업 이미지 영역 어드민 설정에서 작은이미지로 설정한 이미지
shopby-slider	string	-	멀티팝업에 슬라이더를 적용하기위해 사용됨

사용 가능 변수

변수명	타입	기본값	설명
popupsNormal	array	[]	팝업리스트 어드민의 팝업등록 > 기본정보 > 팝업유형 : 일반팝업
popupsMulti	array	[]	팝업리스트 어드민의 팝업등록 > 기본정보 > 팝업유형 : 멀티팝업

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<design-popup>
    <div>
        <div slot="popupsNormal">
            <!-- 일반 팝업 -->
            {{#each popupsNormal}}
            <section
                shopby-popup
                shopby-popup-no="{{popupNo}}"
                shopby-draggable="{{#ifEq detailInfo.screenType 'LAYER'}}true{{/ifEq}}{{#ifNe detailInfo.screenType 'LAYER'}}false{{/ifNe}}"
                class="design-popup{{#ifEq detailInfo.screenType 'FIXED_TOP'}} design-popup--fixed-top{{/ifEq}}{{#if detailInfo.resizable}} design-popup--resizable{{/if}}{{#ifEq detailInfo.screenType 'LAYER'}} design-popup--draggable{{/ifEq}}"
            >
                <div class="editor">
                    <div shopby-popup-content class="design-popup__content">{{{content}}}</div>

                    <footer class="design-popup__btns">
                        {{#if usesVisibleTodayOption}}
                        <label for="no-visible-today-{{popupNo}}" class="form-check form-check--md design-popup__btn--no-visible-today">
                            <input type="checkbox" id="no-visible-today-{{popupNo}}" shopby-action="NO_VISIBLE_TODAY" />
                            오늘 하루 보이지 않음
                        </label>
                        {{/if}}
                        <button type="button" shopby-action="CLOSE_DESIGN_POPUP" class="btn btn--default design-popup__btn--close">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </footer>
                </div>
            </section>
            {{/each}}
        </div>

        <div slot="popupsMulti">
            <!-- 멀티팝업 -->
            {{#each popupsMulti}}
            <section
                shopby-popup
                shopby-popup-no="{{popupNo}}"
                shopby-draggable="{{#ifEq detailInfo.screenType 'LAYER'}}true{{/ifEq}}{{#ifNe detailInfo.screenType 'LAYER'}}false{{/ifNe}}"
                class="design-popup"
            >
                <div shopby-popup-content class="design-popup__content">
                    <div shopby-popup-multi-main>
                        <div shopby-slider class="swiper">
                            <div class="swiper-wrapper">
                                {{#each popupSlideInfo.slideImages}}
                                <div class="swiper-slide">
                                    <div class="design-popup__slide" style="height: {{../popupSlideInfo.slideMaxHeight}}px;">
                                        {{#if ../popupSlideInfo.resizable}} {{img mainImageUrl ../popupSlideInfo.slideMaxWidth ../popupSlideInfo.slideMaxHeight
                                        '팝업이미지_메인' '' (append 'height: ' ../popupSlideInfo.slideMaxHeight 'px;') }} {{else}} {{img mainImageUrl '' ''
                                        '팝업이미지_메인' '' '' }} {{/if}}
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                    </div>

                    <div shopby-popup-multi-sub class="design-popup__thumb-image">
                        {{#each popupSlideInfo.slideImages}}
                        <div shopby-slider class="swiper design-popup__slider--sub">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="design-popup__slide" style="height: {{../popupSlideInfo.slideMinHeight}}px;">
                                        {{#if landingUrl}}
                                        <a
                                            href="{{landingUrl}}"
                                            target="{{#ifEq openLocationTarget 'SELF'}}_self{{/ifEq}}{{#ifEq openLocationTarget 'BLANK'}}_blank{{/ifEq}}"
                                        >
                                            {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrl ../popupSlideInfo.slideMinWidth
                                            ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                            {{else}} {{img thumbImageUrl '' '' '팝업이미지_서브' '' '' }} {{/if}}
                                        </a>
                                        {{else}} {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrl ../popupSlideInfo.slideMinWidth
                                        ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                        {{else}} {{img thumbImageUrl '' '' '팝업이미지_서브' '' '' }} {{/if}} {{/if}}
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="design-popup__slide" style="height: {{../popupSlideInfo.slideMinHeight}}px;">
                                        {{#if landingUrl}}
                                        <a
                                            href="{{landingUrl}}"
                                            target="{{#ifEq openLocationTarget 'SELF'}}_self{{/ifEq}}{{#ifEq openLocationTarget 'BLANK'}}_blank{{/ifEq}}"
                                        >
                                            {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrlOnOver ../popupSlideInfo.slideMinWidth
                                            ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                            {{else}} {{img thumbImageUrlOnOver '' '' '팝업이미지_서브' '' '' }} {{/if}}
                                        </a>
                                        {{else}} {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrlOnOver ../popupSlideInfo.slideMinWidth
                                        ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                        {{else}} {{img thumbImageUrlOnOver '' '' '팝업이미지_서브' '' '' }} {{/if}} {{/if}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </div>

                    <footer class="design-popup__btns">
                        {{#if usesVisibleTodayOption}}
                        <label for="no-visible-today-{{popupNo}}" class="form-check form-check--md design-popup__btn--no-visible-today">
                            <input type="checkbox" id="no-visible-today-{{popupNo}}" shopby-action="NO_VISIBLE_TODAY" />
                            오늘 하루 보이지 않음
                        </label>
                        {{/if}}
                        <button type="button" shopby-action="CLOSE_DESIGN_POPUP" class="btn btn--default design-popup__btn--close">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </footer>
                </div>
            </section>
            {{/each}}
        </div>
    </div>
</design-popup>

<design-popup>
    <div>
        <div slot="popupsNormal">
            <!-- 일반 팝업 -->
            {{#each popupsNormal}}
            <section
                shopby-popup-no="{{popupNo}}"
                draggable="false"
                class="design-popup{{#ifEq detailInfo.screenType 'FIXED_TOP'}} design-popup--fixed-top{{/ifEq}}{{#if detailInfo.resizable}} design-popup--resizable{{/if}}"
            >
                <div class="editor">
                    <div
                        shopby-popup-content
                        class="design-popup__content{{#ifEq detailInfo.screenType 'FIXED_TOP'}} design-popup__content--overscroll{{/ifEq}}"
                    >
                        {{{content}}}
                    </div>

                    <footer class="design-popup__btns">
                        {{#if usesVisibleTodayOption}}
                        <label for="no-visible-today-{{popupNo}}" class="form-check form-check--sm design-popup__btn--no-visible-today">
                            <input type="checkbox" id="no-visible-today-{{popupNo}}" shopby-action="NO_VISIBLE_TODAY" />
                            오늘 하루 보이지 않음
                        </label>
                        {{/if}}
                        <button type="button" shopby-action="CLOSE_DESIGN_POPUP" class="btn btn--default design-popup__btn--close">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </footer>
                </div>
            </section>
            {{/each}}
        </div>

        <div slot="popupsMulti">
            <!-- 멀티팝업 -->
            {{#each popupsMulti}}
            <section shopby-popup-no="{{popupNo}}" draggable="false" class="design-popup">
                <div shopby-popup-content class="design-popup__content">
                    <div shopby-popup-multi-main>
                        <div shopby-slider class="swiper">
                            <div class="swiper-wrapper">
                                {{#each popupSlideInfo.slideImages}}
                                <div class="swiper-slide">
                                    <div class="design-popup__slide" style="height: {{../popupSlideInfo.slideMaxHeight}}px;">
                                        {{#if ../popupSlideInfo.resizable}} {{img mainImageUrl ../popupSlideInfo.slideMaxWidth ../popupSlideInfo.slideMaxHeight
                                        '팝업이미지_메인' '' (append 'height: ' ../popupSlideInfo.slideMaxHeight 'px;') }} {{else}} {{img mainImageUrl '' ''
                                        '팝업이미지_메인' '' '' }} {{/if}}
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                    </div>

                    <div shopby-popup-multi-sub class="design-popup__thumb-image">
                        {{#each popupSlideInfo.slideImages}}
                        <div shopby-slider class="swiper design-popup__slider--sub">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="design-popup__slide" style="height: {{../popupSlideInfo.slideMinHeight}}px;">
                                        {{#if landingUrl}}
                                        <a
                                            href="{{landingUrl}}"
                                            target="{{#ifEq openLocationTarget 'SELF'}}_self{{/ifEq}}{{#ifEq openLocationTarget 'BLANK'}}_blank{{/ifEq}}"
                                        >
                                            {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrl ../popupSlideInfo.slideMinWidth
                                            ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                            {{else}} {{img thumbImageUrl '' '' '팝업이미지_서브' '' '' }} {{/if}}
                                        </a>
                                        {{else}} {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrl ../popupSlideInfo.slideMinWidth
                                        ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                        {{else}} {{img thumbImageUrl '' '' '팝업이미지_서브' '' '' }} {{/if}} {{/if}}
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="design-popup__slide" style="height: {{../popupSlideInfo.slideMinHeight}}px;">
                                        {{#if landingUrl}}
                                        <a
                                            href="{{landingUrl}}"
                                            target="{{#ifEq openLocationTarget 'SELF'}}_self{{/ifEq}}{{#ifEq openLocationTarget 'BLANK'}}_blank{{/ifEq}}"
                                        >
                                            {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrlOnOver ../popupSlideInfo.slideMinWidth
                                            ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                            {{else}} {{img thumbImageUrlOnOver '' '' '팝업이미지_서브' '' '' }} {{/if}}
                                        </a>
                                        {{else}} {{#if ../popupSlideInfo.resizable}} {{img thumbImageUrlOnOver ../popupSlideInfo.slideMinWidth
                                        ../popupSlideInfo.slideMinHeight '팝업이미지_서브' '' (append 'height: ' ../popupSlideInfo.slideMinHeight 'px;') }}
                                        {{else}} {{img thumbImageUrlOnOver '' '' '팝업이미지_서브' '' '' }} {{/if}} {{/if}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </div>

                    <footer class="design-popup__btns">
                        {{#if usesVisibleTodayOption}}
                        <label for="no-visible-today-{{popupNo}}" class="form-check form-check--sm design-popup__btn--no-visible-today">
                            <input type="checkbox" id="no-visible-today-{{popupNo}}" shopby-action="NO_VISIBLE_TODAY" />
                            오늘 하루 보이지 않음
                        </label>
                        {{/if}}
                        <button type="button" shopby-action="CLOSE_DESIGN_POPUP" class="btn btn--default design-popup__btn--close">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </footer>
                </div>
            </section>
            {{/each}}
        </div>
    </div>
</design-popup>

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