상품리스트 페이지 jQuery load 로 불러오기

jQuery로 상품 목록을 불러 올 수 있도록 수정했습니다.

좌측의 상품카테고리 영역과 상품리스트의 페이징 링크에 반응 하도록 되어있습니다.


skin/shop/스킨명/boxcategory.skin.php 에 아래 스크립트를 추가합니다.
[code]
<script>
$(function() {
$('#gnb a, a.pg_page').live('click', function(e) {
if(this.href.match(/list\.php/g)) {
e.preventDefault();
var page_title = $(this).text() + ' 상품리스트';
var link = this.href;
if(!this.href.match(/page/))
document.title = page_title + ' | <?php echo $config['cf_title'];?>';
else $('html,body').animate({scrollTop:0},'fast');
var loading = '<div class="loading"> 상품목록을 불러오는 중입니다 </div>';
var i = 0;
var load = setInterval(function() {
$('.loading').append('.').prepend('.');
i++;
if(i == 20) {
i = 0;
$('.loading').html('상품목록을 불러오는 중 오류가 발생하여 다시 시도 중입니다. 잠시만 기다려 주십시오.<br /><br /><a href="'+link+'">바로 이동하기</a>');
location.href = link;
clearInterval(load);
}
}, 500);
$('#container').prepend(loading).load(link + '&load=true', function() {
$('#container').prepend('<div id="wrapper_title">'+ page_title +'</div>');
clearInterval(load);
});
return false;
}
});
});
</script>
[/code]
skin/shop/스킨명/style.css 에 아래 클래스를 추가합니다.
[code]
.loading {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; font-size:15px; font-weight:bold; background:url('/shop/img/loading.gif') 50% 120px rgba(255,255,255,0.5) no-repeat; z-index:1; padding:50px 0 0;}
[/code]
/shop/list.php 를 아래와 같이 수정합니다.
[code]
if ($ca['ca_include_head'])
@include_once($ca['ca_include_head']);
else
include_once('./_head.php');
-------------------->>>>>---------------------
if ($ca['ca_include_head'])
@include_once($ca['ca_include_head']);
else
if(!$_GET['load']) include_once('./_head.php');
//////////////////////////////////////////////
if ($ca['ca_include_tail'])
@include_once($ca['ca_include_tail']);
else
include_once('./_tail.php');
-------------------->>>>>----------------------
if ($ca['ca_include_tail'])
@include_once($ca['ca_include_tail']);
else
if(!$_GET['load']) include_once('./_tail.php');
[/code]