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>';
}
넵 감사합니다! 그런데 혹시 처음엔 6개 보이고 그 뒤로 7번째부터 조절하는 코드는 어디에 넣어야될까요?
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>
답변을 작성하시기 전에 로그인 해주세요.