zencart商品列表无限下拉加载

用到这个可以无限下拉/滚动加载插件Infinite Scroll

以搜索结果页商品列表为例


includes/templates/你的模板/templates/tpl_advanced_search_result_default.php

<?php
/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=advanced_search_result.<br />
 * Displays results of advanced search
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_advanced_search_result_default.php 4182 2006-08-21 02:11:37Z ajeh $
 */
?>
<div class="centerColumn" id="advSearchResultsDefault">

<h1 id="advSearchResultsDefaultHeading"><?php echo HEADING_TITLE; ?></h1>

<?php
  if (false) {
//  $form = zen_draw_form('filter', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT), 'get') . '<label class="inputLabel">' .TEXT_SHOW . '</label>';
  $form = zen_draw_form('filter', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT), 'get');
?>
<?php echo $form; ?>
<?php
  echo zen_hide_session_id();

/* Re-Get all GET'ed variables */
      $hidden_get_variables = '';
      reset($_GET);
      while (list($key, $value) = each($_GET)) {
        if ( ($key != 'currency') && ($key != zen_session_name()) && ($key != 'x') && ($key != 'y') ) {
          $hidden_get_variables .= zen_draw_hidden_field($key, $value);
        }
      }
      echo $hidden_get_variables;

  require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_PRODUCT_LISTING_ALPHA_SORTER));
?>
</form>
<?php
  }
?>
<?php
/**
 * Used to collate and display products from advanced search results
 */
 require($template->get_template_dir('tpl_modules_product_listing.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_product_listing.php');
?>

<div class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH, zen_get_all_get_params(array('sort', 'page', 'x', 'y')), 'NONSSL', true, false) . '">' . zen_image_button(BUTTON_IMAGE_BACK, BUTTON_BACK_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
</div>




includes/templates/你的模板/templates/tpl_modules_product_listing.php

<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_product_listing.php 3241 2006-03-22 04:27:27Z ajeh $
 * UPDATED TO WORK WITH COLUMNAR PRODUCT LISTING 04/04/2006
 * Modified for admin control of customer option by Glenn Herbert (gjh42) 2012-09-21   2012-11-17 grid sorter
 */
 include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_PRODUCT_LISTING));
?>
<div class="product_list">
<ul>

<?php
/**
 * load the list_box_content template to display the products
 */
if ($product_listing_layout_style == 'columns') {
  if (!defined('PRODUCT_LISTING_GRID_SORT')) define('PRODUCT_LISTING_GRID_SORT', 0);
  if (PRODUCT_LISTING_GRID_SORT) { 
    echo "\n" . '<div id="gridSorter">' . PRODUCT_LISTING_GRID_SORT_TEXT . '<ul>';
    for ($col=0;$col<sizeof($grid_sort);$col++) {
      if ($grid_sort[$col]['text']) echo '<li class="item">' . $grid_sort[$col]['text'] . '</li>';
    }
    echo '</ul></div>' . "\n";
  }
  require($template->get_template_dir('tpl_columnar_list_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_list_display.php');
} else {// (PRODUCT_LISTING_LAYOUT_STYLE == 'rows')
  require($template->get_template_dir('tpl_tabular_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_tabular_display.php');
}
?>

<?php
// only show when there is something to submit and enabled
    if ($show_bottom_submit_button == true) {
?>
<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_ADD_PRODUCTS_TO_CART, BUTTON_ADD_PRODUCTS_TO_CART_ALT, 'id="submit2" name="submit1"'); ?></div>

<?php
    } // show_bottom_submit_button
?>
</ul>
</div>
<div class="scroller-status">
	<div id="infscr-loading" class="loader-ellips infinite-scroll-request">
	    <img alt="Loading..." src="<?php echo $template->get_template_dir('waterfall_loading.png',DIR_WS_TEMPLATE, $current_page_base,'images'). '/waterfall_loading.png';?>">
		<div><em>More Items Are Being Loaded. Please Wait.</em></div>
	</div>
    <p class="scroller-status__message infinite-scroll-last">End of content</p>
    <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<div class="navigation">
    <a class="pagination__next" href="index.php?main_page=advanced_search_result&search_in_description=<?php echo $_GET['search_in_description']; ?>&keyword=<?php echo $_GET['keyword']; ?>&inc_subcat=<?php echo $_GET['inc_subcat']; ?>&sort=<?php echo $_GET['sort']; ?>&page=2" rel="nofollow"></a>
</div>

<?php
// if ($show_top_submit_button == true or $show_bottom_submit_button == true or (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART != 0 and $show_submit == true and $listing_split->number_of_rows > 0)) {
  if ($show_top_submit_button == true or $show_bottom_submit_button == true) {
?>
</form>
<?php } ?>

<script type="text/javascript">
$(function () {
	$('.product_list ul').infiniteScroll({
		path: '.pagination__next',
		append: '.product_list li',
		hideNav: '.navigation',
		status: '.scroller-status',
	});
})
</script>

商品列表横排显示

includes/modules/你的模板/product_listing.php:

<?php
/**
 * product_listing module
 *
 * @package modules
 * @copyright Copyright 2003-2010 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: product_listing.php 17051 2010-07-29 07:25:09Z drbyte $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}

$listing_split = new splitPageResults($listing_sql, 10, 'p.products_id', 'page');
$zco_notifier->notify('NOTIFY_MODULE_PRODUCT_LISTING_RESULTCOUNT', $listing_split->number_of_rows);

$listing = $db->Execute($listing_split->sql_query);

$row = 0;
$col = 0;
$list_box_contents = array();
$title = '';
// 列数
$columns = 4;
// 横排样式
$product_listing_layout_style = 'columns';

$num_products_count = $listing->RecordCount();

// show only when 1 or more
if ($num_products_count > 0) {
    if ($num_products_count < $columns ) {
        $col_width = round(100/$num_products_count, 2);
    } else {
        $col_width = round(100/$columns, 2);
    }

    while (!$listing->EOF) {
        $products_price = zen_get_products_display_price($listing->fields['products_id']);
        $products_price = str_replace('</span> <span', '</span><span', $products_price);
        $products_price = str_replace('Save: ', '', $products_price);
        if (!isset($productsInCategory[$listing->fields['products_id']])) $productsInCategory[$listing->fields['products_id']] = zen_get_generated_category_path_rev($listing->fields['master_categories_id']);

        $list_box_contents[$row][$col] = array('params' => '',
            'text' => (($listing->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a class="product" href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . $productsInCategory[$listing->fields['products_id']] . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image2(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], '', '', 'class="item_thumb_img_big img-lazyload"') . '<i></i></a>') . '<div class="item">' . $products_price . '</div>');

        $col ++;
        if ($col > $columns - 1) {
            $col = 0;
            $row ++;
        }
        $listing->MoveNext();
    }

}
效果图:

参考:

https://infinite-scroll.com/demo/full-page

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值