Aurora Modules

최근 본 상품

최근 본 상품 모듈입니다.

모듈명: recent-product원본소스

최근 본 상품 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
recentProducts	RecentProducts[]	[]	최근 본 상품 조회하기 API 응답과 동일 (아래 타입 참조)

RecentProducts 타입

속성명	타입	기본값	설명
imageType	VIDEOURL or IMAGEURL	-	이미지 타입
src	string	-	이미지 URL
discountedPrice	number	-	할인 후 금액
originalPrice	number	-	금액
stickers	StickerInfos[]	-	스티커 정보 API 응답 중 stickerInfos와 동일
hasDiscount	boolean	-	할인 여부
…	-	-	최근 본 상품 조회하기

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<recent-product>
    <div class="recent-product-wrap">
        <div class="recent-product-box" slot="recentProducts">
            {{#each recentProducts}}
            <div class="recent-product-item-wrap">
                {{!--
                <a href="/pages/product/product-detail.html?productNo={{productNo}}">
                    --}}
                    <div class="recent-product-item">
                        <div class="recent-product-item__img">
                            {{#ifEq imageType 'VIDEO_URL'}}
                            <div class="video-wrapper">
                                <div class="video-cover"></div>
                                <iframe src="{{src}}" width="100%" height="100%" frameborder="0"></iframe>
                            </div>
                            {{else}}
                            <img src="{{src}}" alt="{{alt}}" loading="lazy" />
                            {{/ifEq}}
                        </div>
                        <div class="recent-product-item__info">
                            <div class="recent-product-item__info-name font-noto" title="{{productName}}">{{productName}}</div>
                            <div class="recent-product-item__info-price">
                                <div class="current-price">
                                    <em class="font-montserrat">{{convertToKoreanCurrency discountedPrice}}</em>
                                    <span class="font-noto">원</span>
                                </div>
                                {{#unless hasOnlyOriginalPrice}}
                                <span class="origin-price">
                                    <s class="font-montserrat">{{convertToKoreanCurrency originalPrice}}</s>
                                    <s class="font-noto">원</s>
                                </span>
                                {{/unless}}
                            </div>
                        </div>
                    </div>
                    {{!--
                </a>
                --}}

                <button class="fab fab--sm recent-product__fab" shopby-on:click="REMOVE_RECENT_PRODUCT" shopby-value="{{productNo}}">
                    <span class="ico ico--x-white-24" shopby-on:click="REMOVE_RECENT_PRODUCT"></span>
                </button>
            </div>
            {{/each}}
        </div>
    </div>
</recent-product>

<recent-product>
    <div>
        <div class="recent-product-wrap">
            <div class="recent-product-box" slot="recentProducts">
                {{#each recentProducts}}
                <div class="recent-product-item-wrap">
                    {{!--
                    <a href="/pages/product/product-detail.html?productNo={{productNo}}">
                        --}}
                        <div class="recent-product-item">
                            <div class="recent-product-item__img">
                                {{#ifEq imageType 'VIDEO_URL'}}
                                <div class="video-wrapper">
                                    <div class="video-cover"></div>
                                    <iframe src="{{src}}" width="100%" height="100%" frameborder="0"></iframe>
                                </div>
                                {{else}}
                                <img src="{{src}}" alt="{{alt}}" loading="lazy" />
                                {{/ifEq}}
                            </div>
                            <div class="recent-product-item__info">
                                <div class="recent-product-item__info-name font-noto" title="productName">{{productName}}</div>
                                <div class="recent-product-item__info-price">
                                    <div class="current-price">
                                        <em class="font-montserrat">{{convertToKoreanCurrency discountedPrice}}</em>
                                        <span class="font-noto">원</span>
                                    </div>
                                    {{#unless hasOnlyOriginalPrice}}
                                    <span class="origin-price">
                                        <s class="font-montserrat">{{convertToKoreanCurrency originalPrice}}</s>
                                        <s class="font-noto">원</s>
                                    </span>
                                    {{/unless}}
                                </div>
                            </div>
                        </div>
                        {{!--
                    </a>
                    --}}

                    <button class="fab fab--sm recent-product__fab" shopby-on:click="REMOVE_RECENT_PRODUCT" shopby-value="{{productNo}}">
                        <span class="ico ico--x-white-24" shopby-on:click="REMOVE_RECENT_PRODUCT"></span>
                    </button>
                </div>
                {{/each}} {{#unless recentProducts}}
                <div class="notice">
                    <span class="sprite-image notice--warning"></span>
                    <em>최근 본 상품이 없습니다.</em>
                </div>
                {{/unless}}
            </div>
        </div>
    </div>
</recent-product>

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