죄송한데 고도몰 질문좀 드려도 될까요 ?

죄송한데 고도몰 질문좀 드려도 될까요 ?

QA

죄송한데 고도몰 질문좀 드려도 될까요 ?

본문


{*** 탭+상품이동형 | goods/list/list_07.html ***}
<div class="tab_goods_{mainData.sno} <!--{ ? tabConfig.direction =='W' }-->item_hl_tab_type<!--{ : }-->item_vl_tab_type<!--{ / }-->">
    <!--{ ? goodsList }-->
    <div class="goods_tab_tit">
        <ul>
            <!--{ @ tabConfig.title }-->
           <li class="<!--{ ? .index_ == '.' }-->on<!--{ / }-->" <!--{ ? tabConfig.direction =='W' }-->style="width:{=100/.size_}%;"<!--{ / }-->><a href="#">이미지 1<br>{.value_}</a></li>
            <!--{ / }-->
        </ul>
    </div>
    <!-- //goods_tab_tit -->
    <div class="goods_tab_cont">
        <!--{ @ goodsList }-->
        <div class="goods_tab_box <!--{ ? .index_ == '0' }-->on<!--{ / }-->">
            <!--{ ? .value_ }-->
            <ul>
                <!--{ @ .value_ }-->
                <!--{ @ ..value_ }-->
                <li <!--{ ? themeInfo.soldOutIconFl == 'y' && ...soldOut =='y' && soldoutDisplay.soldout_overlay != '0' }-->class="item_soldout"<!--{ / }--> style="width:{=(100/themeInfo.lineCnt)}%;">
                    <div class="item_cont">
                        <div class="item_photo_box" <!--{ ? ...goodsData }-->{=...goodsData}<!--{ / }-->>
                            <a href="{=gd_goods_url(...goodsUrl, ...goodsNo)}" alt="{...shortDescription}">
                                <!--{ ? in_array('img', themeInfo.displayField) && gd_isset(...goodsImage) }-->
                                {...goodsImage}
                                <!--{ / }-->
                                <!--{ ? ...timeSaleFl }-->
                                <span class="icon_time_sale"><img src="../../img/icon/goods_icon/icon_time_sale.png" alt="{=__('타임세일')}" /></span>
                                <!--{ / }-->
                                <!--{ ? themeInfo.soldOutIconFl == 'y' && ...soldOut =='y' && soldoutDisplay.soldout_overlay != '0' }-->
                                <strong class="item_soldout_bg" style="background-image:url({soldoutDisplay.soldout_overlay_img});">SOLD OUT</strong>
                                <!--{ / }-->
                            </a>
                        </div>
                        <!--{ ? in_array('goodsColor', themeInfo.displayField) }-->
                        {...goodsColor}
                        <!--{ / }-->
                        <!-- //item_photo_box -->
                        <div class="item_info_cont">
                            <div class="item_tit_box">
                                <!--{ ? in_array('brandCd', themeInfo.displayField) && gd_isset(...brandNm) || in_array('makerNm', themeInfo.displayField) && gd_isset(...makerNm) }-->
                                <span class="item_brand">
                                    <!--{ ? in_array('brandCd', themeInfo.displayField) && gd_isset(...brandNm) }-->
                                    <strong>[{...brandNm}]</strong>
                                    <!--{ / }-->
                                    <!--{ ? in_array('makerNm', themeInfo.displayField) && gd_isset(...makerNm) }-->
                                    {...makerNm}
                                    <!--{ / }-->
                                </span>
                                <!--{ / }-->
                                <a href="{=gd_goods_url(...goodsUrl, ...goodsNo)}">
                                    <!--{ ? in_array('goodsNm', themeInfo.displayField) && gd_isset(...goodsNm) }-->
                                    <strong class="item_name">{...goodsNm}</strong>
                                    <!--{ / }-->
                                    <!--{ ? in_array('shortDescription', themeInfo.displayField) && gd_isset(...shortDescription) }-->
                                    <span class="item_name_explain">{...shortDescription}</span>
                                    <!--{ / }-->
                                </a>
                            </div>
                            <!-- //item_tit_box -->
                            <div class="item_money_box">
                                <!--{ ? in_array('fixedPrice', themeInfo.displayField) && gd_isset(...fixedPrice) && ...fixedPrice > 0 && ...goodsPriceDisplayFl =='y' }-->
                                <span style="<!--{ ? in_array('fixedPrice', themeInfo.priceStrike)}-->color:#888; text-decoration:line-through<!--{ / }-->">{=gd_global_currency_symbol()}{=gd_global_money_format(...fixedPrice)}{=gd_global_currency_string()} {=gd_global_add_currency_display(...fixedPrice)}</span>
                                <!--{ / }-->
                                <!--{ ? in_array('goodsPrice', themeInfo.displayField) && gd_isset(...goodsPrice) }-->
                                <!--{ ? themeInfo.soldOutIconFl == 'y' && ...soldOut =='y' && soldoutDisplay.soldout_price == 'text' }-->
                                <strong class="item_price">{=soldoutDisplay.soldout_price_text}</strong>
                                <!--{ : themeInfo.soldOutIconFl == 'y' && ...soldOut =='y' && soldoutDisplay.soldout_price == 'custom' }-->
                                <strong class="item_price"><img src="{soldoutDisplay.soldout_price_img}" /></strong>
                                <!--{ : }-->
                                <strong class="item_price">
                                    <!--{ ? ...goodsPriceString != '' }-->
                                    {...goodsPriceString}
                                    <!--{ : }-->
                                    <!--{ ? ...timeSaleFl && ...timeSaleGoodsPriceViewFl == 'y' && ...goodsPriceDisplayFl =='y' }-->
                                    {=gd_global_currency_symbol()}{=gd_global_money_format(...oriGoodsPrice)}{=gd_global_currency_string()} {=gd_global_add_currency_display(...oriGoodsPrice)}<br />
                                    <!--{ / }-->
                                    <span <!--{ ? ...timeSaleFl }-->class='{...cssTimeSaleIcon}'<!--{ : }--> style="<!--{ ? in_array('goodsPrice', themeInfo.priceStrike) && ((in_array('coupon', themeInfo.displayField) && ...couponPrice != '' && ...goodsPriceDisplayFl =='y') || (in_array('goodsDiscount', themeInfo.displayField) && ...dcPrice > 0)) }-->text-decoration:line-through<!--{ / }-->"<!--{ / }-->>{=gd_global_currency_symbol()}{=gd_global_money_format(...goodsPrice)}{=gd_global_currency_string()} {=gd_global_add_currency_display(...goodsPrice)}</span>
                                    <!--{ / }-->
                                    <!--{ ? ...timeSaleFl && gd_isset(...timeSaleLeftTimeTxt) }--><span class='time_sale_text'>{...timeSaleLeftTimeTxt}</span><!--{ / }-->
                                </strong>
                                <!--{ / }-->
                                <!--{ / }-->
                                <!--{ ? in_array('goodsDiscount', themeInfo.displayField) && ...dcPrice > 0 && ...goodsPriceDisplayFl =='y' }-->
                                <strong class="item_price">
                                    {=gd_global_currency_symbol()}{=gd_global_money_format(...goodsPrice - ...dcPrice)}{=gd_global_currency_string()} {=gd_global_add_currency_display(...goodsPrice - ...dcPrice)}<!--{ ? in_array('dcRate', themeInfo.displayAddField) && gd_isset(...goodsDcRate) }--> <span class="item_number_box">({=...goodsDcRate}%)</span><!--{ / }-->
                                </strong>
                                <!--{ / }-->
                                <!--{ ? in_array('coupon', themeInfo.displayField) && ...couponPrice != '' && ...goodsPriceDisplayFl =='y' }-->
                                <strong class="item_sale">
                                    {=gd_global_currency_symbol()}{=gd_global_money_format(...couponPrice)} {=gd_global_currency_string()} {=gd_global_add_currency_display(...couponPrice)}
                                    <!--{ ? in_array('dcRate', themeInfo.displayAddField) && gd_isset(...couponDcRate) }--> <span class="item_number_box">({=...couponDcRate}%)</span><!--{ / }-->
                                    <a class="icon_item_coupon"><img src="../../img/icon/goods_icon/icon_coupon.png" alt="{=__('쿠폰')}" title="{=__('쿠폰')}" /></a>
                                </strong>
                                <!--{ / }-->
                                <!--{ ? in_array('goodsDcPrice',themeInfo.displayField) && gd_isset(...goodsDcPrice) && ...goodsPriceDisplayFl =='y' }-->
                                <span class="mileage"><img src="../../img/icon/goods_icon/icon_discount.png" alt="{=__('상품할인금액')}"> {=gd_global_money_format(...goodsDcPrice)} {=gd_global_currency_string()}</span><br/><!--{ / }-->
                                <!--{ ? in_array('mileage', themeInfo.displayField) && gd_isset(...mileageBasic) && ...goodsPriceDisplayFl =='y' }-->
                                <span class="item_mileage">
                                    <img src="../../img/icon/goods_icon/icon_mileage.png" alt="{=__('마일리지')}" title="{=__('마일리지')}" /> {...mileageBasic} {=mileageData['unit']}
                                </span>
                                <!--{ / }-->
                            </div>
                            <!-- //item_money_box -->
                            <!--{ ? (in_array('goodsModelNo', themeInfo.displayField) && gd_isset(...goodsModelNo)) || (in_array('goodsNo',themeInfo.displayField) && gd_isset(...goodsNo)) }-->
                            <div class="item_number_box">
                                <!--{ ? in_array('goodsModelNo',themeInfo.displayField) && gd_isset(...goodsModelNo) }-->
                                <span class="num_model">{=__('모델번호')} : {...goodsModelNo}</span>
                                <!--{ / }-->
                                <!--{ ? in_array('goodsNo', themeInfo.displayField) && gd_isset(...goodsNo) }-->
                                <span class="num_code">{=__('상품코드')} : {...goodsNo}</span>
                                <!--{ / }-->
                            </div>
                            <!--{ / }-->
                            <!-- //item_number_box -->
                            <div class="item_icon_box">
                                <!--{ ? themeInfo.iconFl == 'y' }-->
                                {...goodsIcon}
                                <!--{ / }-->
                                <!--{ ? themeInfo.soldOutIconFl == 'y' && ...soldOut =='y' && soldoutDisplay.soldout_icon != 'disable' }-->
                                <img src="{soldoutDisplay.soldout_icon_img}" />
                                <!--{ / }-->
                            </div>
                            <!-- //item_icon_box -->
                        </div>
                        <!-- //item_info_cont -->
                    </div>
                    <!-- //item_cont -->
                </li>
                <!--{ / }-->
                <!--{ / }-->
            </ul>
            <!--{ : }-->
            <ul class="goods_no_data"><strong>{=__('상품이 존재하지 않습니다.')}</strong></ul>
            <!--{ / }-->
        </div>
        <!--{ / }-->
    </div>
    <!-- //goods_tab_cont -->
    <!--{ / }-->
</div>
<!-- //item_vl_tab_type -->
<script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('.tab_goods_{mainData.sno} .goods_tab_tit li').click(function(e){
            e.preventDefault();
            $(this).addClass('on').siblings().removeClass('on');    //탭버튼에 on클래스 주기
//                if ($('.tab_goods_{mainData.sno} .goods_tab_cont > .goods_tab_box').eq($(this).index()).length == 0) {
//                    $('.tab_goods_{mainData.sno} .goods_tab_cont > .goods_tab_box').removeClass('on');
//                }
            $('.tab_goods_{mainData.sno} .goods_tab_cont > .goods_tab_box').eq($(this).index()).addClass('on').siblings().removeClass('on');    //해당 탭 내용 열고 나머지 닫기
            <!--{ ? imageLazyFl == 'y' }-->
            $('.tab_goods_{mainData.sno} .goods_tab_cont > .goods_tab_box img.gd_image_lazy').lazyload();
            <!--{ / }-->
        });
    });
    //-->
</script>

 

소스는 위와 같습니다..

위의 소스를 보시면 이미지 1 이라고 되어 있는 곳이 있는데요...

이 곳이 탭 형식으로 되는 곳 입니다.

 

1893687508_1604036299.9483.png

 

위의 소스를 넣으면 이미지 1만 계속 나오는데요..이걸 서로다른 이미지를 넣고 싶습니다.

예를 들어 강아지=1 고양이=2 호랑이=3번 탭 으런식으로 이미지를 넣고 싶은데...

너무 어려운 질문이 아니고 난해한게 아닌가 생각되지만..

고수님들께 어디 여쭤볼곳이 없어 여쭤봅니다..ㅠㅠ

이 질문에 댓글 쓰기 :

답변 2

tabConfig.title의 갯수만큼 반복문이 돌아가는거같은데

해당 반복문의 index를 추출해서 이미지 1이러 써있는부분을

뽑아낸 index가지고 제어해주시면 될거같네요

index추출하는방법만 알아내시면 쉽겠네요

저거 템플릿이 템플릿 언더바 였을 겁니다. 예전에 잠깐 만져봤었는데 소스 수정하기가 넘 힘들어서 고생했었던거 같네요.

 

아직 그대로 템플릿 언더바를 사용하고 있다면

https://tpl.xtac.net/

여기 매뉴얼에서 찾아보시면 될거에요.

답변을 작성하시기 전에 로그인 해주세요.
전체 37
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT