list.php에 더보기 버튼

list.php에 더보기 버튼

QA

list.php에 더보기 버튼

본문

메인에 있던 더보기 버튼을 가져왔더니 그냥 list.php로 던지게 되있드라구요.

현재는 상품이 전부 보이게 되어있는데 리스트에서 상품 최대 6개만 보이고 더보기 누르면 나머지 상품 다 보이게 하고 싶습니다! 

고수님들 부탁드려요!!

 


 

$skin_file = is_include_path_check($skin_dir.'/'.$ca['ca_mobile_skin']) ? $skin_dir.'/'.$ca['ca_mobile_skin'] : $skin_dir.'/list.10.skin.php';
//echo $skin_file;
if (file_exists($skin_file)) {

    // 총몇개
    $items = $ca['ca_mobile_list_mod'] * $ca['ca_mobile_list_row'];
    // 페이지가 없으면 첫 페이지 (1 페이지)
    if ($page < 1) $page = 1;
    // 시작 레코드 구함
    $from_record = ($page - 1) * $items;
    //echo G5_SHOP_URL.'/item.php';
    $list = new item_list($skin_file, $ca['ca_mobile_list_mod'], $ca['ca_mobile_list_row'], $ca['ca_mobile_img_width'], $ca['ca_mobile_img_height']);
    $list->set_category($ca['ca_id'], 1);
    $list->set_category($ca['ca_id'], 2);
    $list->set_category($ca['ca_id'], 3);
    $list->set_is_page(true);
    $list->set_mobile(true);
    $list->set_order_by($order_by);
    $list->set_from_record($from_record);
    $list->set_view('it_img', true);
    $list->set_view('it_id', false);
    $list->set_view('it_name', true);
    $list->set_view('it_price', true);
    $list->set_view('sns', true);
    $list->set_view('it_icon', true);
    echo $list->run();

    // where 된 전체 상품수
    $total_count = $list->total_count;
}
else
{
    echo '<div class="sct_nofile">'.str_replace(G5_PATH.'/', '', $skin_file).' 파일을 찾을 수 없습니다.<br>관리자에게 알려주시면 감사하겠습니다.</div>';
}
?>


<?php if ($i > 0) { ?>
    <div class="sct_item_more"><a href="<?php echo G5_URL;?>/shop/list.php?ca_id=<?=$ca_id?>">더보기</a></div>
<?php } ?>

이 질문에 댓글 쓰기 :

답변 1

다음과 같은 방법으로 해 볼 수 있을것 같습니다.

참고하셔서 원하시는 형태로 구현하시면 되지 않을까 합니다.

HTML 및 초기로딩


<!-- HTML에서 더보기 버튼 부분 -->
<div class="sct_item_more" id="loadMore"><a href="#">더보기</a></div>
<!-- 실제 리스트가 표시되는 부분 -->
<div id="itemList">
    <!-- 여기에 초기에 보여줄 상품 리스트가 들어갑니다. -->
    <?php echo $list->run(); ?>
</div>

 

AJAX 스크립트 추가


<!-- jQuery CDN 추가 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- AJAX 스크립트 -->
<script>
$(document).ready(function() {
    var page = 2; // 다음 페이지 번호
    $("#loadMore").on("click", function(e) {
        e.preventDefault();
        $.ajax({
            url: "<?php echo G5_URL; ?>/ajax/load_more.php", // 실제로는 이 부분에 적절한 경로를 지정해야 합니다.
            type: "POST",
            data: { page: page, ca_id: "<?php echo $ca_id; ?>" },
            success: function(data) {
                // 성공 시 반환된 데이터를 리스트에 추가
                $("#itemList").append(data);
                page++; // 다음 페이지로 증가
            }
        });
    });
});
</script>

 

서버측 코드추가


// ajax/load_more.php
// 이 부분에 필요한 초기화 및 설정 코드를 추가해주세요.
$skin_file = is_include_path_check($skin_dir.'/'.$ca['ca_mobile_skin']) ? $skin_dir.'/'.$ca['ca_mobile_skin'] : $skin_dir.'/list.10.skin.php';
if (file_exists($skin_file)) {
    // 나머지 코드는 유사하게 유지됩니다.
    $list = new item_list($skin_file, $ca['ca_mobile_list_mod'], $ca['ca_mobile_list_row'], $ca['ca_mobile_img_width'], $ca['ca_mobile_img_height']);
    $list->set_category($ca['ca_id'], 1);
    $list->set_category($ca['ca_id'], 2);
    $list->set_category($ca['ca_id'], 3);
    $list->set_is_page(true);
    $list->set_mobile(true);
    $list->set_order_by($order_by);
    $list->set_from_record($from_record);
    $list->set_view('it_img', true);
    $list->set_view('it_id', false);
    $list->set_view('it_name', true);
    $list->set_view('it_price', true);
    $list->set_view('sns', true);
    $list->set_view('it_icon', true);
    echo $list->run();
} else {
    echo '<div class="sct_nofile">'.str_replace(G5_PATH.'/', '', $skin_file).' 파일을 찾을 수 없습니다.<br>관리자에게 알려주시면 감사하겠습니다.</div>';
}

 

AJAX 스크립트 부분을 다음과 같이 수정 하시면 될 것 같습니다.


<!-- jQuery CDN 추가 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- AJAX 및 JavaScript 스크립트 -->
<script>
$(document).ready(function() {
    var page = 2; // 다음 페이지 번호
    var itemsPerPage = 6; // 페이지당 보여질 상품 수

    // 초기에는 더보기 버튼 숨기기
    $("#loadMore").hide();

    // 더보기 버튼 클릭 시
    $("#loadMore").on("click", function(e) {
        e.preventDefault();

        $.ajax({
            url: "<?php echo G5_URL; ?>/ajax/load_more.php", // 실제로는 이 부분에 적절한 경로를 지정해야 합니다.
            type: "POST",
            data: { page: page, ca_id: "<?php echo $ca_id; ?>" },
            success: function(data) {
                // 성공 시 반환된 데이터를 리스트에 추가
                $("#itemList").append(data);

                // 페이지 증가
                page++;

                // 더 이상 불러올 상품이 없으면 더보기 버튼 숨기기
                if (data.trim() === "") {
                    $("#loadMore").hide();
                }
            }
        });
    });

    // 초기에는 더보기 버튼 숨기기
    if ($("#itemList").children().length > itemsPerPage) {
        $("#loadMore").show();
    }
});
</script>

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

회원로그인

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