매직앨범형으로 된 페이지의 소스를 참고하셔서 상품목록을 수정하셔야 합니다.

 

 

// 플러그인 로드

{@
$program_set[cate_code] = $farm_set[cate_code]; // 상품분류1
$program_set[main_code] = $farm_set[main_code]; // 메인출력코드
$program_set[img_thumb_w] = $farm_set[img_thumb_w]; // 썸네일 이미지 가로크기
$program_set[img_thumb_h] = $farm_set[img_thumb_h]; // 썸네일 이미지 세로크기
$program_set[img_thumb_type] = $farm_set[img_thumb_type]; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2:위 사이즈보다 큰경우 잘라내기)
$program_set[limit] = $farm_set[limit]; // 출력수
$program_set[order_type] = $farm_set[order_type]; // 정렬방식 (DEFAULT:기본, REG_TIME:등록날짜순, VIEW:조회수, RAND:랜덤)
$shop_goods = program_load(SHOP_GOODS);

$item_width_m = 100/$farm_set[items_mobile];
$item_width_t = 100/$farm_set[items_tablet];
$item_width_pc = 100/$farm_set[items_pc];
@}

<load target="/img_up/_addon/_plugin/masonry/masonry.pkgd.min.js">
<load target="/img_up/_addon/_plugin/masonry/imagesloaded.pkgd.min.js">

 

// 디자인 css

<style>
.magic-shop-_91090_ {padding:4px;}
.magic-shop-_91090_ .magic-list {margin:0; padding:0; list-style:none;}
.magic-shop-_91090_ .magic-item {
    display:inline-block; width:{$item_width_m}%; padding:4px; vertical-align:top;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.magic-shop-_91090_ .magic-item > a {display:block; position:relative; border:1px solid #eaeaea; background:#fff;border-radius:20px;}
.magic-shop-_91090_ .magic-item > a figure {border-bottom:1px solid #eaeaea;border-radius:20px 20px 0px 0px;}
.magic-shop-_91090_ .magic-item > a figure img {width:100%; vertical-align:top;border-radius:20px 20px 0px 0px;}
.magic-shop-_91090_ .magic-item > a div {padding:4px;}
.magic-shop-_91090_ .magic-item > a div span {display:block; padding:2px; line-height:1.2em;}
.magic-shop-_91090_ .magic-item > a div .subject {font-size:8px; color:#1a1717; font-weight:normal;}
.magic-shop-_91090_ .empty {width:100%; font-size:8px; line-height:100px; text-align:center;}
.magic-shop-_91090_ .magic-item > a div .sijung_price {font-size:11px; color:#888; text-decoration:line-through;}
.magic-shop-_91090_ .magic-item > a div .price {display:block; font-size:11px;color:#e8262c;}
.magic-shop-_91090_ .magic-item > a div. soldout {font-size:11px; color:#B1B1B1;}

@media (min-width:768px){
    .magic-shop-_91090_ {padding:12px;}
    .magic-shop-_91090_ .magic-item {width:{$item_width_t}%; padding:8px;}
    .magic-shop-_91090_ .magic-item > a div {padding:20px;}
    .magic-shop-_91090_ .magic-item > a div .subject {font-size:15px;}
}

@media (min-width:102*px){
    .magic-shop-_91090_ .magic-item {width:{$item_width_pc}%; padding:6px;}
    .magic-shop-_91090_ .magic-item > a div {padding:10px;}
    .magic-shop-_91090_ .magic-item > a div .subject {font-size:12px; text-align:center;}
      .magic-shop-_91090_ .magic-item > a div .sijung_price {font-size:12px; text-align:center;}
      .magic-shop-_91090_ .magic-item > a div .price {font-size:12px; text-align:center;}
}
</style>

 

// 내용출력 HTML - 상품출력 페이지를 이와 같은 형식으로 변경해주셔야 합니다. (배열 및 변수 수정)

<div class="magic-shop-_91090_">
    <ul class="magic-list">
        <li class="magic-item" loop="$shop_goods as $k => $v">
            <a href="{$v[read_url]}">
                <figure><img src="{$v[img1_url]}" alt="{$v[goods_name]}" cond="$v[img1_url]"></figure>
                <div>
                    <span class="subject">{$v[goods_name]}</span>
                        <!--@if($v[goods_stock])-->
                          <span class="sijung_price" cond="$v[sijung_price_str]">{$v[sijung_price_str]|money}</span>
                          <span class="price">{$v[price_str]}</span>
                          <span>{icon_str}</span>
                            <!--@else-->
                                <span class="soldout">품절</span>
                            <!--@end-->
                        <span class="icon" cond="$v[icon_str] || $v[icon_str2]">{$v[icon_str]} {$v[icon_str2]}</span>
                    
                </div>
            </a>
        </li>

        <li class="empty" cond="!count($shop_goods)" data-lan="kr">등록된 데이터가 없습니다.</li>
    </ul>
</div>

 

// 매직앨범형 동작 스크립트

<script>
jQuery(function($){
    // init Masonry
    var $magic = $('.magic-shop-_91090_ .magic-list').masonry({
        itemSelector: '.magic-item',
        stamp: '.empty'
    });

    // layout Masonry after each image loads
    $magic.imagesLoaded().progress( function() {
        $magic.masonry('layout');
    });
});
</script>

다음 소스는 상품목록 구성시 필요없는 부분 입니다.

 

{ @

$program_set[cate_code] = $farm_set[cate_code]; // 상품분류1
$program_set[main_code] = $farm_set[main_code]; // 메인출력코드
$program_set[img_thumb_w] = $farm_set[img_thumb_w]; // 썸네일 이미지 가로크기
$program_set[img_thumb_h] = $farm_set[img_thumb_h]; // 썸네일 이미지 세로크기
$program_set[img_thumb_type] = $farm_set[img_thumb_type]; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2:위 사이즈보다 큰경우 잘라내기)
$program_set[limit] = $farm_set[limit]; // 출력수
$program_set[order_type] = $farm_set[order_type]; // 정렬방식 (DEFAULT:기본, REG_TIME:등록날짜순, VIEW:조회수, RAND:랜덤)
$shop_goods = program_load(SHOP_GOODS);

$item_width_m = 100/$farm_set[items_mobile];
$item_width_t = 100/$farm_set[items_tablet];
$item_width_pc = 100/$farm_set[items_pc];

@ }

말씀해주신대로 수정해보았는데요.

</div>갯수가 맞지 않아 자꾸 오류가 나네요..;;

확인부탁드립니다..

 

직접 수정해주시면 더욱 감사하겠습니다..ㅠㅠ

상품 출력페이지를 수정하였습니다.

메인페이지의 상품출력은 예쁘게 잘 나왔는데요..

상품 분류 리스트 페이지의 매직앨범에서

위아래 여백이 줄어들지 않은것같아요...

첨부한 이미지와 같이 위아래 여백이 좁게 되어야 하거든요..

죄송한데, 한번 더 수정부탁드릴께요..;;

 

여백을 수정하였습니다.