Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Бесконечный Скролинг Товаров

Автор borisovd, 11 окт. 2013 01:32

Вперед

Авторизуйтесь для ответа в теме

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

#1 borisovd

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

Пользователи
370 сообщений

Отправлено 11 Октябрь 2013 - 01:32

Как сделать бесконечный скролинг на странице товаров?

Наверх

#2 Сake

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

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

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

Данный вопрос рассматривался в следующей теме форума http://forum.storela...кой/#entry54723

Наверх

#3 borisovd

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

Пользователи
370 сообщений

Отправлено 11 Октябрь 2013 - 07:10

Сake (11 Октябрь 2013 - 03:06) писал:

Данный вопрос рассматривался в следующей теме форума http://forum.storela...кой/#entry54723

А для мокко не подскажешь код? а то с этим сайтом уже не думается...))

Наверх

#4 borisovd

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

Пользователи
370 сообщений

Отправлено 11 Октябрь 2013 - 09:07

Сake (11 Октябрь 2013 - 03:06) писал:

Данный вопрос рассматривался в следующей теме форума http://forum.storela...кой/#entry54723

сделал как написано тут на 3 странице, вылезают ошибки.

Наверх

#5 Сake

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

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

Отправлено 12 Октябрь 2013 - 04:50

На данный момент у вас отсутствуют изменения связанные с данной реализацией. Пожалуйста, выполните инструкцию и не убирайте изменения. Это необходимо для того чтобы понять причину некорректной работы или возникающей ошибки.

Наверх

#6 borisovd

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

Пользователи
370 сообщений

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

Сake (12 Октябрь 2013 - 04:50) писал:

На данный момент у вас отсутствуют изменения связанные с данной реализацией. Пожалуйста, выполните инструкцию и не убирайте изменения. Это необходимо для того чтобы понять причину некорректной работы или возникающей ошибки.

можете по порядку все пункты расписать? а то запутался)

Наверх

#7 borisovd

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

Пользователи
370 сообщений

Отправлено 14 Октябрь 2013 - 09:35

Подскажите как сделать

Наверх

#8 Сake

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

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

Отправлено 15 Октябрь 2013 - 04:40

Пожалуйста, сообщите адрес ссылки рабочей категории на вашем сайте. В данной категории должны присутствовать товары. Чем больше товаров будет тем лучше.

Наверх

#9 borisovd

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

Пользователи
370 сообщений

Отправлено 15 Октябрь 2013 - 11:33

Сake (15 Октябрь 2013 - 04:40) писал:

Пожалуйста, сообщите адрес ссылки рабочей категории на вашем сайте. В данной категории должны присутствовать товары. Чем больше товаров будет тем лучше.

http://alver.storela...u/catalog/Sumki

Наверх

#10 Сake

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

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

Отправлено 16 Октябрь 2013 - 03:42

Найдите в шаблоне "Товары" код

{% FOR goods %}
						<td class="goodsListItem">
								<div class="goodsListItemBlock withBorder cornerAll">
								<div class="goodsListItemImage"><a href="{goods.URL}"><img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" alt="{goods.NAME}" /></a></div>
								<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
								<div class="goodsListItemPriceNew">
								  <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
								</div>
								<div class="goodsListItemPriceOld">
								  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
										  <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
										{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
										  <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
										{% ENDIF %}
								</div>
								</div>
						  </td>
						{% IFNOT goods.last %}{goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
				   {% ENDFOR goods %}

и замените его на

<td>
<div class="u-lproducts">
{% FOR goods %}
		<div class="ulproducts" style="float:left; margin: 10px 5px;">
				   <div class="tabproduct">
								<div class="goodsListItemBlock withBorder cornerAll">
								<div class="goodsListItemImage"><a href="{goods.URL}"><img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" alt="{goods.NAME}" /></a></div>
								<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
								<div class="goodsListItemPriceNew">
								  <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
								</div>
								<div class="goodsListItemPriceOld">
								  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
										  <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
										{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
										  <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
										{% ENDIF %}
								</div>
								</div>
						  </div>
		</div>
<div style="clear: both;"></div>
		{% ENDFOR goods %}
</div>
</td>

далее в файл main.js добавьте

$(function() {
var nav = '.square_pages';
var last_prd = '.u-lproducts .ulproducts:last-child';
var wrap_prd = '.u-lproducts';
var cnavig = '.square_pages > b';
var prd = '.u-lproducts .ulproducts';
var current = 'current';
var scroll_prod = false;
var parent_url = '';
$(nav).hide();
$(window).scroll(function() {
				 if(!scroll_prod && $(wrap_prd).length && $(last_prd).length) {
				 var offset = $(last_prd).offset().top;
				 var height = $(last_prd).height();
				 if($(this).scrollTop() > (offset - (height * 10))) {
								 scroll_prod = true;
								 if($(cnavig).next().length) {
												 var url = $(cnavig).next().attr('href') + '&amp;only_body=1';
												 if(parent_url != url) {
																 $.get(url, function(html) {
																 var data = $(html).find(wrap_prd).map(function() {
																		if($(this).hasClass(wrap_prd.replace('.', ''))) {
																		   return($(this).children());
																		}
																 }).get(0);
																 $(wrap_prd).append(data);
																 $(cnavig).removeClass(current).next().addClass(current);
																 scroll_prod = false;
																 }, 'text');
												 }
								 }
				 }
				 }
});
});

Наверх

#11 borisovd

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

Пользователи
370 сообщений

Отправлено 16 Октябрь 2013 - 08:35

товары встали в колонку, и нужно что бы была первую страницу вниз листаешь была надпись показать еще и при нажатие внизу открывались товары второй страницы и так далее. как в новостях вконтаке проще говоря.

Наверх

#12 Сake

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

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

Отправлено 17 Октябрь 2013 - 04:58

Найдите в шаблоне "Товары"

<div style="clear: both;"></div>
				{% ENDFOR goods %}
</div>
</td>

и замените на

				{% ENDFOR goods %}
</div>
<div style="clear: both;"></div>
</td>

Наверх

#13 borisovd

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

Пользователи
370 сообщений

Отправлено 17 Октябрь 2013 - 08:19

Товары повторяются внизу. тоесть листая вниз они начинают циркулировать заного. и еще очень криво отображается. Вот посмотрите http://alver.storela...u/catalog/Sumki

Наверх

#14 borisovd

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

Пользователи
370 сообщений

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

И еще нужно что бы была кнопка показать еще. что бы не автоматически листалось ,а например прокрутить страницу вниз, и там будет кнопка показать еще нажимая на нее появляется еще одна страница внизу

Наверх

#15 borisovd

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

Пользователи
370 сообщений

Отправлено 17 Октябрь 2013 - 22:18

забыл, нужно что бы остались цифры перехода на нужную страницу

Наверх

#16 Сake

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

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

Отправлено 18 Октябрь 2013 - 01:48

Найдите в шаблоне "Товары"

<!-- Подвал таблицы со списком товаров -->
  <tr>
	<!-- Страницы -->
	<td colspan="2" class="alignRight">
	  <div>
		{% IF show_pages %}
		<div class="square_pages">
		  <span>Страницы: </span>
			{% FOR goods_pages %}
			  {% IF goods_pages.CURRENT %}
				<b>{goods_pages.PAGE}</b>
			  {% ELSE %}
				<a href="{GOODS_PAGINATE_URL}&amp;page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
			  {% ENDIF %}
			{% ENDFOR %}
		</div>
		{% ENDIF %}
	  </div>
	</td>
	<!-- END Страницы -->
  </tr>
  <!-- END Подвал таблицы со списком товаров -->

и замените на

<!-- Подвал таблицы со списком товаров -->
  <tr>
	<!-- Страницы -->
	<td colspan="2" class="alignRight">
	  <div>
		{% IF show_pages %}
		<div class="square_pages">
		  <span>Страницы: </span>
			{% FOR goods_pages %}
			  {% IF goods_pages.CURRENT %}
				<b class="current">{goods_pages.PAGE}</b>
			  {% ELSE %}
				<a href="{GOODS_PAGINATE_URL}&amp;page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
			  {% ENDIF %}
			{% ENDFOR %}
		</div>
		{% ENDIF %}
	  </div>
	</td>
	<!-- END Страницы -->
  </tr>
  <!-- END Подвал таблицы со списком товаров -->

после ваш код в файле main.js, а именно

$(function() {
var nav = '.square_pages';
var last_prd = '.u-lproducts .ulproducts:last-child';
var wrap_prd = '.u-lproducts';
var cnavig = '.square_pages > b';
var prd = '.u-lproducts .ulproducts';
var current = 'current';
var scroll_prod = false;
var parent_url = '';
$(nav).hide();
$(window).scroll(function() {
								 if(!scroll_prod && $(wrap_prd).length && $(last_prd).length) {
								 var offset = $(last_prd).offset().top;
								 var height = $(last_prd).height();
								 if($(this).scrollTop() > (offset - (height * 10))) {
																 scroll_prod = true;
																 if($(cnavig).next().length) {
																								 var url = $(cnavig).next().attr('href') + '&amp;only_body=1';
																								 if(parent_url != url) {
																																 $.get(url, function(html) {
																																 var data = $(html).find(wrap_prd).map(function() {
																																				if($(this).hasClass(wrap_prd.replace('.', ''))) {
																																				   return($(this).children());
																																				}
																																 }).get(0);
																																 $(wrap_prd).append(data);
																																 $(cnavig).removeClass(current).next().addClass(current);
																																 scroll_prod = false;
																																 }, 'text');
																								 }
																 }
								 }
								 }
});
});

замените на

$(function() {
   var nav = '.square_pages';
   var last_prd = '.u-lproducts .ulproducts:last-child';
   var wrap_prd = '.u-lproducts';
   var cnavig = '.square_pages > b';
   var prd = '.u-lproducts .ulproducts';
   var current = 'current';
   var scroll_prod = false;
   var parent_url = '';
$(window).scroll(function() {
	if(!scroll_prod && $(wrap_prd).length && $(last_prd).length) {
		var offset = $(last_prd).offset().top;
		var height = $(last_prd).height();
		if($(this).scrollTop() > (offset - (height * 10))) {
			scroll_prod = true;
			if($(cnavig).next().length) {
				var url = $(cnavig).next().attr('href') + '&amp;only_body=1';
				if(parent_url != url) {
					$.get(url, function(html) {
						var data = $(html).find(wrap_prd).map(function() {
							if($(this).hasClass(wrap_prd.replace('.', ''))) {
								return($(this).children());
							}
						}).get(0);
						$(wrap_prd).append(data);
						$(cnavig).removeClass(current).next().addClass(current);
						scroll_prod = false;
					}, 'text');
				}
			}
		}
	}
});
});

обращаю ваше внимание на то, что это еще не все изменения. Вам необходимо выполнить для начала эти изменения чтобы можно было продолжить.

Наверх

#17 borisovd

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

Пользователи
370 сообщений

Отправлено 18 Октябрь 2013 - 07:00

Сделал, что дальше?

Наверх

#18 Сake

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

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

Отправлено 19 Октябрь 2013 - 02:17

Найдите в шаблоне "Товары" дополнительный блок навигации

<!-- Страницы -->
	  <td class="alignRight">
		<div>
		  {% IF show_pages %}
		  <div class="square_pages">
			<span>Страницы: </span>
			  {% FOR goods_pages %}
				{% IF goods_pages.CURRENT %}
				  <b>{goods_pages.PAGE}</b>
				{% ELSE %}
				  <a href="{GOODS_PAGINATE_URL}&amp;page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
				{% ENDIF %}
			  {% ENDFOR %}
		  </div>
		  {% ENDIF %}
		</div>
	  </td>
	  <!-- END Страницы -->

и замените его аналогично на

<!-- Страницы -->
	  <td class="alignRight">
		<div>
		  {% IF show_pages %}
		  <div class="square_pages">
			<span>Страницы: </span>
			  {% FOR goods_pages %}
				{% IF goods_pages.CURRENT %}
				  <b class="current">{goods_pages.PAGE}</b>
				{% ELSE %}
				  <a href="{GOODS_PAGINATE_URL}&amp;page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
				{% ENDIF %}
			  {% ENDFOR %}
		  </div>
		  {% ENDIF %}
		</div>
	  </td>
	  <!-- END Страницы -->

далее в файле main.js найдите

var cnavig = '.square_pages > b';

и замените на

var cnavig = '.square_pages .current';

после в файле стилей main.css найдите

.goodsListItemBlock {
	height: 200px;
	margin: 5px;
	overflow: hidden;
}

и замените на

.goodsListItemBlock {
	height: 200px;
	margin: 5px;
	overflow: hidden;
	width: 170px;
	text-align: center;
}

Как выполните данные изменения - сообщите.

Наверх

#19 borisovd

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

Пользователи
370 сообщений

Отправлено 19 Октябрь 2013 - 13:10

Сake (19 Октябрь 2013 - 02:17) писал:

Найдите в шаблоне "Товары" дополнительный блок навигации

<!-- Страницы -->
	 <td class="alignRight">
	 <div>
		 {% IF show_pages %}
		 <div class="square_pages">
		 <span>Страницы: </span>
			 {% FOR goods_pages %}
			 {% IF goods_pages.CURRENT %}
				 <b>{goods_pages.PAGE}</b>
			 {% ELSE %}
				 <a href="{GOODS_PAGINATE_URL}&amp;page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
			 {% ENDIF %}
			 {% ENDFOR %}
		 </div>
		 {% ENDIF %}
	 </div>
	 </td>
	 <!-- END Страницы -->

и замените его аналогично на

<!-- Страницы -->
	 <td class="alignRight">
	 <div>
		 {% IF show_pages %}
		 <div class="square_pages">
		 <span>Страницы: </span>
			 {% FOR goods_pages %}
			 {% IF goods_pages.CURRENT %}
<b class="current">{goods_pages.PAGE}</b>
			 {% ELSE %}
				 <a href="{GOODS_PAGINATE_URL}&amp;page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
			 {% ENDIF %}
			 {% ENDFOR %}
		 </div>
		 {% ENDIF %}
	 </div>
	 </td>
	 <!-- END Страницы -->

далее в файле main.js найдите

var cnavig = '.square_pages > b';

и замените на

var cnavig = '.square_pages .current';

после в файле стилей main.css найдите

.goodsListItemBlock {
height: 200px;
margin: 5px;
overflow: hidden;
}

и замените на

.goodsListItemBlock {
height: 200px;
margin: 5px;
overflow: hidden;
width: 170px;
text-align: center;
}

Как выполните данные изменения - сообщите.

сделал, что дальше?

Наверх

#20 borisovd

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

Пользователи
370 сообщений

Отправлено 20 Октябрь 2013 - 23:22

и еще нужно что бы нумерация страниц тоже прокручивалась. вот например я листаю в самый низ, а у меня все равно показывает что я на 1 странице.

Наверх

Вперед

Обратно в Главная

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

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

Бесконечный Скролинг Товаров

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

Войти

Google поиск