Ecshop PC 商品列表页面下拉加载商品

Ecshop商城PC模板商品分类列表页默认是分页显示的，现修改为下拉自动加载商品内容，具体修改过程如下：

1. 修改goods_list.lbi文件

修改说明：

1）把商品循环显示部分单独提取出来，命名为async_goods_list.lbi，在goods_list.lbi文件中引入该文件

2）添加id属性

3）增加下面的js内容

<script type="text/javascript">
var settings = {
        'category'    :   '{$category}',          
        'brand'       :   '{$brand_id}',
        'price_min'   :   '{$price_min}',
        'price_max'   :   '{$price_max}',
        'filter_attr' :   '{$filter_attr}',
        'page'        :   {$pager.page} + 1,
        'sort'        :   '{$pager.sort}',
        'order'	      :   '{$pager.order}',
	'has_next'    :   'true'
}
var lock = false;
window.onload = function()
{
	window.onscroll = function(){
		var height = (document.body.scrollHeight - document.documentElement.clientHeight)*0.8;
		if((document.documentElement.scrollTop >= height || document.body.scrollTop >= height) && lock == false)
		{
			lock = true;
			Ajax.call('category.php?act=asynclist&category='+settings.category+'&brand='+settings.brand+'&price_min='+settings.price_min+'&price_max='+settings.price_max+'&filter_attr='+settings.filter_attr+'&page='+settings.page+'&sort='+settings.sort+'&order='+settings.order+'', '', asyncListResponse, 'GET', 'JSON');
		}
	}
}
function asyncListResponse(res)
{
	settings = res.config;	
	if(settings.has_next == true)
	{
		lock = false;
	}
	else
	{
		return;
	}	
	var async_content =document.createTextNode(res.content);
	var obj = document.getElementById('async_goods_list');
	old_content = obj.innerHTML;
	obj.innerHTML = old_content + res.content;
}
</script>

2. 修改category.php文件

修改说明：

1）增加下面一段内容

    /*下拉加载 start*/
    if ($_GET['act'] == 'asynclist')
    {
        include('includes/cls_json.php');
        $json = new JSON;
        $result = array('content' => '', 'config' => '');
        $result['config'] = array(
            'category' => $cat_id,          
            'brand' => $brand,
            'price_min' => $price_min,
            'price_max' => $price_max,
            'filter_attr' => $filter_attr_str,
            'page' => $page + 1,
            'sort' => $sort,
            'order' => $order,
            'has_next' => true
        );
        if($_GET['page'] <= $max_page)
        {
            $result['config']['has_next'] = true;
	    $result['content'] = $smarty->fetch('library/async_goods_list.lbi');
        }
        else
        {
            $result['config']['has_next'] = false;
        }

        die($json->encode($result));
        exit;
    }
    /*下拉加载 end*/

3. 修改category.dwt文件

修改说明：

1）删除显示分页部分的代码即可

4. 修复js脚本Ajax加载无法执行

如果Ajax加载的内容中含有js代码，默认情况下是作为字符串处理的，不会被执行，为解决这个问题，需要做如下处理

修改说明：

1）增加下面部分js代码，该部分参考http://www.impng.com/web-dev/execscript-loaded-by-ajax.html

function exec_ajax_js(ajaxLoadedData)
{
	// 第一步：匹配加载的页面中是否含有js
	var regDetectJs = /<script(.|\n)*?>(.|\n|\r\n)*?<\/script>/ig;
	var jsContained = ajaxLoadedData.match(regDetectJs);
	//console.log(jsContained);
	// 第二步：如果包含js，则一段一段的取出js再加载执行
	if(jsContained) {
		// 分段取出js正则
		var regGetJS = /<script(.|\n)*?>((.|\n|\r\n)*)?<\/script>/im;
	
		// 按顺序分段执行js
		var jsNums = jsContained.length;
		for (var i=0; i<jsNums; i++) {
			var jsSection = jsContained[i].match(regGetJS);
			//console.log(jsSection);
			if(jsSection[2]) {
				if(window.execScript) {
					// 给IE的特殊待遇
					window.execScript(jsSection[2]);
				} else {
					// 给其他大部分浏览器用的
					window.eval(jsSection[2]);
				}
			}
		}
	}
}

同时，Ajax回调函数中需要增加一句，来执行该函数即可

至此，修改工作已全部结束，考虑到不同模板的内容都不一样，以上修改部分没有提供完整的修改源码，不当之处还望大家批评指正