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


Фотография
* * * * - 4 Голосов

Ajax загрузка страниц

рецепт ajax пагинация pagination jquery

Сообщений в теме: 50

#1 fiction13

fiction13

Отправлено 24 June 2013 - 13:49

*
Популярное сообщение!

Сразу дам линк на закрытую тему: линк
 
Решил создать тему, так как считаю, что это будет кому-нибудь полезно.
 
Сегодня решив сделать подгрузку товаров, увидел вышеупомянутую тему, сделав все по инструкции, конечно все получилось, но начались косяки, а именно: при включенном JS фиксе высоты колонок подгружаемые товары не были выровнены по высоте, никакая магия мне не помогла.
 
Именно поэтому в интернете нашелся другой скрипт, который выравнивает высоту колонок, и с которым не возникло проблем при подгрузке товаров.
 
Теперь обо всем по порядку.
 
1. Скрипт, который будет выравнивать высоту колонок:
<script type="text/javascript"> 
jQuery.fn.equalHeights = function(minHeight, maxHeight) {
		tallest = (minHeight) ? minHeight : 0;
		this.each(function() {
			if(jQuery(this).height() > tallest) {
				tallest = jQuery(this).height();
			}
		});
		if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
		return this.each(function() {
			jQuery(this).height(tallest).css("overflow","auto");
		});
	}
</script>
Его я подключил head (на случай, если буду пользоваться им не только в zoo).
 
2. Вызываем скрипт выравнивания высоты
<script type="text/javascript"> 
jQuery(document).ready(function() { 
 jQuery(".jbzoo .items .column").equalHeights(); 
 jQuery(".jbzoo .subcategories .column").equalHeights(); 
 jQuery(".jbzoo .related-items .column").equalHeights(); 
}); 
</script> 
3 строчки с классами означают, какие блоки будут выравниваться. Первый - это товары в категории, второе - сами блоки субкатегорий, третье - похожие товары.
 
3. Скрипт, ссылку на который дал Sliappy в предыдущей теме, - ТЫК. Скрипт подключается просто:
<script type="text/javascript" src="jquery-ias.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ias.css" />
4. Вызываем скрипт подгрузки
<script>
  jQuery.ias({
    container   : ".items",
    item    : ".width25",  
    pagination  : ".pagination",
    next    : "a.next",
    loader  : "<img src='images/loader.gif'/>",
    triggerPageThreshold : 1,
    trigger : "Показать больше товаров",
    onRenderComplete: function(items) {
	jQuery(".jbzoo .items .column").equalHeights(); 
    },
    history : false
  });
  </script> 
Здесь самое главное - это onRenderComplete, где мы вызываем скрипт выравнивания высоты.
 
- pagination - идентификатор пагинации, который исчезнет при подгрузке
- item - идентификатор подгружаемых товаров (у меня он .width25)
- history отвечает за сохранение истории подгрузки (при прокрутке к адресу будет прибавляться якорь #/page/)[/size]
- [/size]triggerPageThreshold отвечает за номер страницы, с которой товары будут подгружаться при нажатии на кнопку.
- trigger - надпись на кнопке, которая отвечает за дальнейшую подгрузку
 
5. Убираем галочку в настройках каталога "JS фикс высоты"
 
Вроде все, должно работать.
 
Надеюсь я сэкономил кому-нибудь время, которое потратил сам.
  • 16

#2 Sliapy

Sliapy

Отправлено 24 June 2013 - 15:07

Да, с фиксом высоты я тот скрипт не тестил - не было надобности :)

 

Спасибо за подробную инструкцию.

 

Надо бы еще для общего развития попробовать интегрировать в JBZoo Masonry - http://masonry.desandro.com/

 

 

PS Переименовал и прикрепил тему.


Сообщение отредактировал Sliapy: 24 June 2013 - 15:12

  • 0
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]

#3 SmetDenis

SmetDenis

Отправлено 24 June 2013 - 16:28

Очень круто, спасибо!
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#4 rewuxiin

rewuxiin

Отправлено 24 June 2013 - 17:52

ага, тоже заметил глюк с фиксом высоты колонок, спасибо за решение


  • 0

#5 fiction13

fiction13

Отправлено 24 June 2013 - 18:54

Надо бы еще для общего развития попробовать интегрировать в JBZoo Masonry

 

Да, я тоже заценил этот скрипт, стильно и красиво.


  • 0

#6 sc

sc

Отправлено 06 July 2013 - 14:00

Надо бы еще для общего развития попробовать интегрировать в JBZoo Masonry - http://masonry.desandro.com/

Если получится интегрировать, поделитесь пожалуйста инструкцией


  • 0

yootheme-logo.png
Лицензирование YOOtheme (шаблоны, Widgetkit, ZOO). А так же самые свежие обновления напрямую от ZOOlanders, SH404SEF, Akeeba Backup PRO, Admin Tools PRO, Accordion Menu и д.р. Пишите в ЛС


#7 tchudov

tchudov

Отправлено 16 August 2013 - 12:02

Очень круто, спасибо!

Когда мы увидим эту фичу имплементированной в jbzoo? Отлаженной и без костылей? )

 

Штука очень востребованная и нужная.


  • 0

#8 sc

sc

Отправлено 16 August 2013 - 12:34

Вчера себе сделал за часик с лишним www.fastflowers.dp.ua. Еще пытался интегрировать с Masonry но не хватило мозгов по видимому, потому что убил 2 часа впустую на эксперименты.

При ajax подгрузке никаких костылей делать не надо, всего навсего подключить скрипты, т.е. сами файлы компонента не меняются, что удобно при обновлении не придется переделывать


  • 0

yootheme-logo.png
Лицензирование YOOtheme (шаблоны, Widgetkit, ZOO). А так же самые свежие обновления напрямую от ZOOlanders, SH404SEF, Akeeba Backup PRO, Admin Tools PRO, Accordion Menu и д.р. Пишите в ЛС


#9 tchudov

tchudov

Отправлено 16 August 2013 - 12:45

никаких костылей делать не надо

Просто удобнее, если это будет интегрировано, без написания и подключения дополнительных скриптов. Меньше запросов с сайта - быстрее загрузка.

 

Ещё бы было управление из админки...


  • 0

#10 sc

sc

Отправлено 16 August 2013 - 12:52

Ну будем ждать тогда. Мне нужно было на вчера, поэтому и ковырялся


  • 0

yootheme-logo.png
Лицензирование YOOtheme (шаблоны, Widgetkit, ZOO). А так же самые свежие обновления напрямую от ZOOlanders, SH404SEF, Akeeba Backup PRO, Admin Tools PRO, Accordion Menu и д.р. Пишите в ЛС






Темы с аналогичным тегами рецепт, ajax, пагинация, pagination, jquery

Click to return to top of page in style!