Перейти к содержимому


AJAX подгрузка страниц

ajax jquery

  • Вы не можете ответить в тему
Сообщений в теме: 4

#1 mixer32768

    Пользователь

  • Пользователи
  • PipPip
  • 14 сообщений
Репутация: 1
Начинающий

Отправлено 25 January 2014 - 11:05 AM

Если интересно расскажу как сделать.
Все довольно таки просто. 3 файла правим, 2 добавляем. index.php должен быть без защиты.
Пример реализации http://www.silver-ma...tegory_210.html
  • 0

#2 idal

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 243 сообщений
Репутация: 7
Начинающий
  • ГородКиев

Отправлено 25 January 2014 - 11:21 AM

интересно, напишите.
  • 0

#3 mixer32768

    Пользователь

  • Пользователи
  • PipPip
  • 14 сообщений
Репутация: 1
Начинающий

Отправлено 25 January 2014 - 02:31 PM

Недавно нечаянно снес всю папку типа "My Downloads" по этой причине нет у меня сейчас чистого шопа на компе.
Так что буду показывать на своей версии. Кто захочет разберется с изменениями.

Делаю все на примере просмотра категории товара. (С русским не очень дружу. Сорри)
Код не очень оптимален. Сегодня только с утра в голову ударило сделать.
И сразу скажу. Повторять только "думающим". Кто в шопе не шарит лучше не экспериментировать.
Это не побуквенное руководство.

Мы хотим сделать подгрузку страниц при прокрутке мышью до "дна" футера страницы.

Первым делом вставляем код который будет это отслеживать и вызывать нашу подгрузку страницы.

{* динамическая подгрузка страницы *}
<a id="inifiniteLoader"><img src="data/{$smarty.const.TPL}/ajax-loader.gif" /></a>
<script type="text/javascript">
{literal}
	var count = {/literal}{$smarty.const.CONF_PRODUCTS_PER_PAGE}{literal};
	var total = {/literal}{$products_to_show_count}{literal};
	$(window).scroll(function(){
		if  ($(window).scrollTop() == $(document).height() - $(window).height()){
			if (count >= total){
				return false;
			}else{
				loadArticle(count);
			}
			count = count + {/literal}{$smarty.const.CONF_PRODUCTS_PER_PAGE}{literal};
		}
	});
	function loadArticle(pageNumber){
		$('a#inifiniteLoader').show('fast');
		$.ajax({
			url: "index.php?do=category_a&categoryID={/literal}{$categoryID}{literal}{/literal}{$added_nav}{literal}&offset="+ pageNumber,
			type:'POST',
			data: "",
			success: function(html){
				$('a#inifiniteLoader').hide('1000');
				$("#goodslist").append(html);
			}
		});
		return false;
	}
{/literal}
</script>

Код вставляем в \core\tpl\user\default\category.tpl.html в любое место мне думается...
Тут сразу затык. У меня этот код изменен и не один раз.
Суть в чем, Ajax командой $("#goodslist").append(html); вставляет текст в конец элемента. Это нужно понять
мой код:

<table cellspacing="0" cellpadding="0" width="100%" BORDER="0" ID="goodslist">
  {section name=u loop=$products_to_show}
  {if $smarty.section.u.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<tr>{assign var="helpcounter" value=0}{/if}{assign var="helpcounter" value=$helpcounter+1}
	<td width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d"}%" align="left" valign="top">
	{include file="product_brief.tpl.html" product_info=$products_to_show[u]}
	</td>
	{if ($smarty.section.u.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE || $products_to_show_counter eq $smarty.section.u.index+1}
	</tr>
	<tr class="newdelimprod"><td COLSPAN="{$smarty.const.CONF_COLUMNS_PER_PAGE+$smarty.const.CONF_COLUMNS_PER_PAGE-1}"></td></tr>
	<tr><td COLSPAN="{$smarty.const.CONF_COLUMNS_PER_PAGE+$smarty.const.CONF_COLUMNS_PER_PAGE-1}"> </td></tr>
	{/if}
  {/section}
</table>

Вот примерно после этого кода можно вставить JavaScript код.
Что он будет делать:
При достижении дна "сайта" вызывается loadArticle с параметром.
Результат вызванного командой $.ajax скрипта помещается в конец тега с ID goodslist. В нашем случае это конец таблицы.
Что туда поместится разберем дальше.

Из вышеназванного кода который у вас немного другой... делаем новый шаблон category_a.tpl.html в той же папке.
В него добавляем код. Для меня это:

  {section name=u loop=$products_to_show}
  {if $smarty.section.u.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<tr>{assign var="helpcounter" value=0}{/if}{assign var="helpcounter" value=$helpcounter+1}
	<td width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d"}%" align="left" valign="top">
	{include file="product_brief.tpl.html" product_info=$products_to_show[u]}
	</td>
	{if ($smarty.section.u.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE || $products_to_show_counter eq $smarty.section.u.index+1}
	</tr>
	<tr class="newdelimprod"><td COLSPAN="{$smarty.const.CONF_COLUMNS_PER_PAGE+$smarty.const.CONF_COLUMNS_PER_PAGE-1}"></td></tr>
	<tr><td COLSPAN="{$smarty.const.CONF_COLUMNS_PER_PAGE+$smarty.const.CONF_COLUMNS_PER_PAGE-1}"> </td></tr>
	{/if}
  {/section}

Вы у себя этот код думаю без проблем найдете. он может немного отличаться.

Тут пока все.

Сейчас нужно создать скрипт который будет вызываться в Ajax:

Что бы мы его могли вызвать ищем строку
if ( in_array($_GET["do"], array(
в файле index.php в корневом каталоге и добавляем туда наш обработчик. К примеру назовем его "category_a"
строка будет выглядеть как
if ( in_array($_GET["do"], array("category_a", "captcha", "cart", и т.д.

Далее создаем сам обработчик в каталоге shopcms\core\includes\processor
Создаем файл category_a.php с кодом ...
тут самое сложное наверное.
код состоит из кусков надерганных из index.php (для инициализации смарти и разной байды) + почти полностью код из shopcms\core\includes\category.php

к примеру... помещаем туда

  $JsHttpRequest = & new JsHttpRequest(DEFAULT_CHARSET);

  header ('Content-type: text/html; charset=windows-1251');

  require ("core/smarty/smarty.class.php");
  $smarty = new Smarty; //core smarty object
  if ((int)CONF_SMARTY_FORCE_COMPILE) //this forces Smarty to recompile design each time
  {
	  $smarty->force_compile = true;
  }
  $relaccess = checklogin();
  $smarty->template_dir = "core/tpl/user/".CONF_DEFAULT_TEMPLATE;
  define('TPL', CONF_DEFAULT_TEMPLATE);
  $error = "";

  //# of selected currency
  $current_currency = isset($_SESSION["current_currency"]) ? $_SESSION["current_currency"] : CONF_DEFAULT_CURRENCY;
  $smarty->assign("current_currency", $current_currency);
  $q = db_query("select code, currency_value, where2show, currency_iso_3, Name, roundval from ".CURRENCY_TYPES_TABLE." where CID=".(int)$current_currency);
  if ($row = db_fetch_row($q))
  {
	  $smarty->assign("currency_name", $row[0]);
	  $selected_currency_details = $row; //for show_price() function
  }
  else //no currency found. In this case check is there any currency type in the database

  {
	  $q = db_query("select code, currency_value, where2show, roundval from ".CURRENCY_TYPES_TABLE);
	  if ($row = db_fetch_row($q))
	  {
		  $smarty->assign("currency_name", $row[0]);
		  $selected_currency_details = $row; //for show_price() function
	  }
  }
  $smarty->assign("currency_roundval", $selected_currency_details["roundval"]);

  $q = db_query("select CID, Name, code, currency_value, where2show, roundval, currency_iso_3 from ".CURRENCY_TYPES_TABLE." order by sort_order");
  $currencies = array();
  while ($row = db_fetch_row($q)) $currencies[] = $row;

  $smarty->assign("currencies", $currencies);
  $smarty->assign("currencies_count", count($currencies));

  $smarty->assign("lang_list", $lang_list);

  if (isset($_SESSION["current_language"])) $smarty->assign("current_language", $_SESSION["current_language"]);

  //set $categoryID
  if (isset($_GET["categoryID"]) || isset($_POST["categoryID"]))
  {
	  $categoryID = isset($_GET["categoryID"]) ? $_GET["categoryID"] : $_POST["categoryID"];
	  $categoryID = (int)$categoryID;
  }
  // else $categoryID = 1;
  // set $productID
  if (isset($_GET["productID"]) || isset($_POST["productID"]))
  {
	  $productID = isset($_GET["productID"]) ? $_GET["productID"] : $_POST["productID"];
	  $productID = (int)$productID;
  }

а затем код из C:\OpenServer\domains\shopcms\core\includes\category.php

в коде из category.php комментируем в конце
$smarty->assign( "main_content_template", "category.tpl.html");
и подставляем вызов нашего шаблона вместо него
$smarty->display('category_a.tpl.html');


остались небольшие моменты.
при подгрузке нужно показывать картинку GIF в момент работы Ajax.

код мы ее вместе с JavaScript вставили
<a id="inifiniteLoader"><img src="data/{$smarty.const.TPL}/ajax-loader.gif" /></a>
картинку можно себе сделать по вкусу на сайте http://loadergenerator.com/
бросаем ее в shopcms\data\default\ с именем ajax-loader.gif

в ваш shopcms\data\default\style.css
добавляем в конец
a#inifiniteLoader{
position: relative;
left:350px;
z-index: 2;
display:none;
}

это почти все.

где нибудь в конце shopcms\core\includes\category.php в районе блока с кучей $smarty->assign
вставим блок кода
$smarty->assign( "products_to_show_count", $count); <!-- сколько всего товара в категории //-->
$added_nav = "";
if ( isset($_GET["sort"]) )
		$added_nav .= "&sort=".$_GET["sort"];
if ( isset($_GET["direction"]) )
		$added_nav .= "&direction=".$_GET["direction"];
$smarty->assign( "added_nav", $added_nav);
Он нужен для корректной работы сортировки товара по имени и цене.
+ комментируем строку
$smarty->assign( "catalog_navigator", $navigatorHtml );
что бы не показывался пагинатор на странице

Вроде все.

кусок кода Ajax от своей темы к Wordpress, в нее в свою очередь этот кусок кода нашел на просторах необъятного.

Если что то забыл - пишите.

Код абсолютно не оптимизирован, но по крайней мере работает... все остальное дело времени.

В аттаче мой код для примера... без index.php

Прикрепленные файлы

  • Прикрепленный файл  shop_scroll.zip   9.62К   4 Количество загрузок:

  • 1

#4 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 25 January 2014 - 07:26 PM

Пример реализации http://www.silver-ma...tegory_210.html

Виденные мной реализации такой подгрузки контента не имеют автоматизма и это удобнее. Например, картинки на Яндексе, которые грузятся по кнопке "Еще?". А то футер на Вашем сайте (и строку "Описание категории") можно увидеть только на доли секунды, пока не подгрузится аяксом очередная порция контента.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#5 mixer32768

    Пользователь

  • Пользователи
  • PipPip
  • 14 сообщений
Репутация: 1
Начинающий

Отправлено 26 January 2014 - 01:04 AM

Подгрузку можно реализовать как угодно. Можно внизу показать кнопку "Смотреть дальше" и по нажатию подгружать товар. Тут уже от фантазии зависит.
  • 0