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


Разделить Каталог На Страницы


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 Quinke

Quinke

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

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 05 Ноябрь 2013 - 17:37

Необходимо разделить каталог на страницы (1, 2, 3, 4, 5) или с помощью кнопок "назад" и "далее". В данный момент, при отображении каталога списком, количество товаров на странице большое, его необходимо сократить хотя бы до 7-10 штук на страницу.

#2 shnafix

shnafix

    Активный участник

  • Модератоpы
  • 506 сообщений

Отправлено 05 Ноябрь 2013 - 22:56

Просмотр сообщенияQuinke (05 Ноябрь 2013 - 17:37) писал:

Необходимо разделить каталог на страницы (1, 2, 3, 4, 5) или с помощью кнопок "назад" и "далее". В данный момент, при отображении каталога списком, количество товаров на странице большое, его необходимо сократить хотя бы до 7-10 штук на страницу.
В Настройках -> Основные найдите шаг для выдачи лимита товаров.

Прикрепленные изображения

  • Безымянный2.png


#3 Quinke

Quinke

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

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 06 Ноябрь 2013 - 09:16

Первым делом попробовал этот способ, прежде чем тему создать и ранее не заметил, что при уменьшении значения в поле, товаров на странице действительно становиться меньше, но они подгружаются по мере пролистывания пользователем в конец каталога. При пролистывании я заметил, что на долю секунды появились кнопки страниц (1,2,3,4) и тут же исчезли. Как отключить функцию автоматической подгрузки товаров и сделать постраничный переход.

#4 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 06 Ноябрь 2013 - 11:19

Просмотр сообщенияQuinke (06 Ноябрь 2013 - 09:16) писал:

Первым делом попробовал этот способ, прежде чем тему создать и ранее не заметил, что при уменьшении значения в поле, товаров на странице действительно становиться меньше, но они подгружаются по мере пролистывания пользователем в конец каталога. При пролистывании я заметил, что на долю секунды появились кнопки страниц (1,2,3,4) и тут же исчезли. Как отключить функцию автоматической подгрузки товаров и сделать постраничный переход.

Удалите код  -
//Подгрузка товаров в каталоге
$(function(){
  var $container = $('.containers');
  // Минимальное расстояние между товарами в каталоге
  $container.imagesLoaded(function(){
	  $container.masonry({
	  itemSelector: '.items',
	  // указываем класс элемента являющегося блоком в нашей сетке
	  singleMode: false,
	  // true - если у вас все блоки одинаковой ширины
	  isResizable: true,
	  // перестраивает блоки при изменении размеров окна
	  isAnimated: false,
	  // Ужиматься до минимальной ширины, чтобы можно было центрировать блок
	  isFitWidth: true,
	  // анимируем перестроение блоков
	  animationOptions: {
		queue: false,
		duration: 300
	  }
	  // опции анимации - очередь и продолжительность анимации
	});
  });
 
  var lastPage = 1;
  var pagesNum = $("div.pagination").find("a:last").text();   // Количество страниц
 
  $container.infinitescroll({
	navSelector  : '.pagination',	// класс элемента постраничной навигации
	nextSelector : '.pagination a',  // класс элемента постраничной навигации, ссылка на следующую страницу
	itemSelector : '.items',	 // класс элементов, которые будем извлекать
	loading: {
		msgText: 'Пожалуйста подождите...',
		finishedMsg: 'Больше нет товаров.',
		img: infiniteScrollLoaderPath ? infiniteScrollLoaderPath : '/loader.gif'
	  }
	},
	function( newElements ) {
	  // скрываем новые элементы, пока они не загрузятся
	  var $newElems = $( newElements ).css({ opacity: 0 });
	  // обеспечиваем загрузку изображением перед добавление из на страницу
	  $newElems.imagesLoaded(function(){
		// показываем готовые элементы
		$newElems.animate({ opacity: 1 });
		$container.masonry( 'appended', $newElems, true );
	  });
	  lastPage++;
	  // если это последняя страница
	  if(lastPage >= pagesNum){
		$container.infinitescroll('pause');
	  }
	}
  );
});
$(function(){
  var $container2 = $('.containers2');
  // Минимальное расстояние между товарами в каталоге
  $container2.imagesLoaded(function(){
	$container2.masonry({
	  itemSelector: '.items',
	  // указываем класс элемента являющегося блоком в нашей сетке
	  singleMode: false,
	  // true - если у вас все блоки одинаковой ширины
	  isResizable: true,
	  // перестраивает блоки при изменении размеров окна
	  isAnimated: true,
	  // Ужиматься до минимальной ширины, чтобы можно было центрировать блок
	  isFitWidth: true,
	  // анимируем перестроение блоков
	  animationOptions: {
		queue: false,
		duration: 500
	  }
	  // опции анимации - очередь и продолжительность анимации
	});
  });
});
$(function(){
  var
	$container3 = $('.containers3')
	,lastPage3 = 1
	// Количество страниц
	,pagesNum3 = $("div.pagination").find("a:last").text();
 
  $container3.infinitescroll({
	navSelector  : '.pagination',	// класс элемента постраничной навигации
	nextSelector : '.pagination a',  // класс элемента постраничной навигации, ссылка на следующую страницу
	itemSelector : '.items',	 // класс элементов, которые будем извлекать
	loading: {
		msgText: 'Пожалуйста подождите...',
		finishedMsg: 'Больше нет товаров.',
		img: infiniteScrollLoaderPath ? infiniteScrollLoaderPath : '/loader.gif'
	  }
	},
	function( newElements3 ) {
	  // скрываем новые элементы, пока они не загрузятся
	  var $newElems3 = $( newElements3 ).css({ opacity: 0 });
	  // обеспечиваем загрузку изображением перед добавление из на страницу
	  $newElems3.imagesLoaded(function(){
		// показываем готовые элементы
		$newElems3.animate({ opacity: 1 });
		$container3.masonry( 'appended', $newElems3, true );
	  });
	  lastPage3++;
	  // если это последняя страница
	  if(lastPage3 >= pagesNum3){
		  $container3.infinitescroll('pause');
	  }
	}
  ); 
});
из main.js

#5 Quinke

Quinke

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

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 06 Ноябрь 2013 - 12:22

Удалил, при первом сохранении выдало ошибку (не запомнил), при повторном сохранилось нормально, но осталось все по-прежнему.

#6 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 06 Ноябрь 2013 - 13:45

В конец файла "main.css".
Добавить код:
.pagination {
	margin-top: 6em;
	display: block;
	width: 100%;
}

В файле "main.css".
Найти код:
section[role="main"] {margin-bottom: 6em;z-index: 10;padding: 20px;}
Заменить:
section[role="main"] {z-index: 10;padding: 20px;}


В файле "main.css".
Найти код:
.pp-page {background:  url('{ASSETS_IMAGES_PATH}next.png');padding: 8px 13px 9px 12px; color: #fff;}
Заменить:
.pp-page {background:  url('{ASSETS_IMAGES_PATH}next.png');padding: 8px 13px 10px 13px; color: #fff;}


#7 Quinke

Quinke

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

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 06 Ноябрь 2013 - 14:05

Имеется ввиду style.css? При пролистывании появились кнопки и тут же исчезли, потом автоматически загрузились следующие товары. Кэш чистил, браузер Chrome

#8 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 06 Ноябрь 2013 - 15:37

Просмотр сообщенияQuinke (06 Ноябрь 2013 - 14:05) писал:

Имеется ввиду style.css? При пролистывании появились кнопки и тут же исчезли, потом автоматически загрузились следующие товары. Кэш чистил, браузер Chrome
Да. файл style.css.
Проверил ваш сайт. Кнопки нормально отображаются и не исчезают. Но к сожалению я не смог найти на вашем сайте объемного каталога. Возможно в нем удастся обнаружить подобное поведение.

#9 ggrin31

ggrin31

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

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 14 Ноябрь 2014 - 08:24

Просмотр сообщенияmiyako (06 Ноябрь 2013 - 11:19) писал:

Удалите код  -
//Подгрузка товаров в каталоге
$(function(){
var $container = $('.containers');
// Минимальное расстояние между товарами в каталоге
$container.imagesLoaded(function(){
	 $container.masonry({
	 itemSelector: '.items',
	 // указываем класс элемента являющегося блоком в нашей сетке
	 singleMode: false,
	 // true - если у вас все блоки одинаковой ширины
	 isResizable: true,
	 // перестраивает блоки при изменении размеров окна
	 isAnimated: false,
	 // Ужиматься до минимальной ширины, чтобы можно было центрировать блок
	 isFitWidth: true,
	 // анимируем перестроение блоков
	 animationOptions: {
	 queue: false,
	 duration: 300
	 }
	 // опции анимации - очередь и продолжительность анимации
});
});

var lastPage = 1;
var pagesNum = $("div.pagination").find("a:last").text(); // Количество страниц

$container.infinitescroll({
navSelector : '.pagination', // класс элемента постраничной навигации
nextSelector : '.pagination a', // класс элемента постраничной навигации, ссылка на следующую страницу
itemSelector : '.items',	 // класс элементов, которые будем извлекать
loading: {
	 msgText: 'Пожалуйста подождите...',
	 finishedMsg: 'Больше нет товаров.',
	 img: infiniteScrollLoaderPath ? infiniteScrollLoaderPath : '/loader.gif'
	 }
},
function( newElements ) {
	 // скрываем новые элементы, пока они не загрузятся
	 var $newElems = $( newElements ).css({ opacity: 0 });
	 // обеспечиваем загрузку изображением перед добавление из на страницу
	 $newElems.imagesLoaded(function(){
	 // показываем готовые элементы
	 $newElems.animate({ opacity: 1 });
	 $container.masonry( 'appended', $newElems, true );
	 });
	 lastPage++;
	 // если это последняя страница
	 if(lastPage >= pagesNum){
	 $container.infinitescroll('pause');
	 }
}
);
});
$(function(){
var $container2 = $('.containers2');
// Минимальное расстояние между товарами в каталоге
$container2.imagesLoaded(function(){
$container2.masonry({
	 itemSelector: '.items',
	 // указываем класс элемента являющегося блоком в нашей сетке
	 singleMode: false,
	 // true - если у вас все блоки одинаковой ширины
	 isResizable: true,
	 // перестраивает блоки при изменении размеров окна
	 isAnimated: true,
	 // Ужиматься до минимальной ширины, чтобы можно было центрировать блок
	 isFitWidth: true,
	 // анимируем перестроение блоков
	 animationOptions: {
	 queue: false,
	 duration: 500
	 }
	 // опции анимации - очередь и продолжительность анимации
});
});
});
$(function(){
var
$container3 = $('.containers3')
,lastPage3 = 1
// Количество страниц
,pagesNum3 = $("div.pagination").find("a:last").text();

$container3.infinitescroll({
navSelector : '.pagination', // класс элемента постраничной навигации
nextSelector : '.pagination a', // класс элемента постраничной навигации, ссылка на следующую страницу
itemSelector : '.items',	 // класс элементов, которые будем извлекать
loading: {
	 msgText: 'Пожалуйста подождите...',
	 finishedMsg: 'Больше нет товаров.',
	 img: infiniteScrollLoaderPath ? infiniteScrollLoaderPath : '/loader.gif'
	 }
},
function( newElements3 ) {
	 // скрываем новые элементы, пока они не загрузятся
	 var $newElems3 = $( newElements3 ).css({ opacity: 0 });
	 // обеспечиваем загрузку изображением перед добавление из на страницу
	 $newElems3.imagesLoaded(function(){
	 // показываем готовые элементы
	 $newElems3.animate({ opacity: 1 });
	 $container3.masonry( 'appended', $newElems3, true );
	 });
	 lastPage3++;
	 // если это последняя страница
	 if(lastPage3 >= pagesNum3){
		 $container3.infinitescroll('pause');
	 }
}
);
});
из main.js

Добрый день. Что то я не могу найти эти строчки в main.js. Помогите пожалуйста

#10 ggrin31

ggrin31

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

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 14 Ноябрь 2014 - 12:22

Только сейчас заметил что эта тема для шаблона Вечность... Подскажите пожалуйста, а что необходимо сделать чтобы было то же самое но в шаблоне Весна?

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 15 Ноябрь 2014 - 05:34

Не дублируйте пожалуйста своим вопросы, вам ответили в другой теме форума:
http://forum.storela..._60#entry172544




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных