Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

Модуль подгрузки товаров

Venter

By Venter,
in Opencart 3.x: Песочница

 Share

Recommended Posts

Venter Mentor

Venter

Posted
Posted (edited)

Всех с наступающим форумчане! 

 

Как то гделал один простенький модуль знакомому, потом забыл про него и вот наткнулся на файлы. Чуть перегделал модуль.

Суть модуля - он выводит блоки с товарами в заданном кол-ве есть подгрузка еещё товаров по нажатию на кнопку или можно

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

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

лени товаров. в обещём короткий видос снял чтоб потому чтолее понятнее было что за модуль (видос без звука,извините микрофона нет)

Вигдео 

 

 

прикрепил сам модуль в файлах. Протестировано на Опенкарт и ocStore 3.0.2. 

 

loading-goods-oc3.ocmod.zip

Edited by Venter
  • +1 1
Link to comment
Share on other sites
1

Zetx Mentor

Zetx

Posted
Posted (edited)

схожий модуль был у товарыща @ArtemPitov, что то врогде неограниченного листинга товаров ... модуль неплохой, но почему то не вижу его на форуме ...

если кто однакостирует данный модуль на 2.3, то сообщите ...

Edited by Zetx
Link to comment
Share on other sites

Venter Mentor

Venter

Posted
  • Author
Posted (edited)
1 час назад, Zetx сказал:

схожий модуль был у товарыща @ArtemPitov, что то врогде неограниченного листинга товаров ... модуль неплохой, но почему то не вижу его на форуме ...

если кто однакостирует данный модуль на 2.3, то сообщите ...

Может выложу в разгдел дополнений, подумываю его еещё чуть дорилиить.

а может кто еещё что предложит по этому модулю, что добавить что убрать ;)

про версию 2.3 нужно переписывать. бугдет время, перепишу под 2.3

Edited by Venter
Link to comment
Share on other sites
1

Venter Mentor

Venter

Posted
  • Author
Posted (edited)
1 час назад, Zetx сказал:

схожий модуль был у товарыща @ArtemPitov, что то врогде неограниченного листинга товаров ... модуль неплохой, но почему то не вижу его на форуме ...

если кто однакостирует данный модуль на 2.3, то сообщите ...

 

А вот он 

 

 

А вот еещё один егошний Бесконечная загрузка товаров

 

Edited by Venter
Link to comment
Share on other sites
1

chukcha Grand Master

chukcha

Posted
Posted

Ну.. давайте и я похвасись

 



Привегденный модуль - это модуль, требующий адапицию к шаблону..



http://demo2302.slasoft.kharkov.ua/

 

Пример
Камеры на главной + подгрузка

 

 

  • +1 1
Link to comment
Share on other sites
1
1
1

buslikdrev Grand Master

buslikdrev

Posted
Posted

И я похвасиюсь решением от @******  дорилиинным мной:

Спойлер

https://seo58.ru/sovety/65-opencart-2-3-ajax-pagination

https://forum.opencart-cms.ru/topic/1776-гделаем-бесконечную-пагинацию-для-люпотому чтого-шаблона-для-opencart-2x 

<script type="text/javascript"><!--
if (!$('.seocmspro_content').length) {
$(function() {
	var autoscroller = [];
	// style
	// место нахожгдение кнопки подгрузки
	autoscroller.catcher = '#endless';
	// html-код кнопки подгрузки
	autoscroller.htmlButton = '<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 60px; white-space: pre;" ><i class="fa fa-refresh"></i> <span class="textNewTotal"></span></button></div>';
	// место нахожгдение подсчёт товара
	autoscroller.textTotal = '#content div.col-sm-6.text-right';
	// место вывода подсчёт товара
	autoscroller.textNewTotal = 'button .textNewTotal';
	// место нахожгдение кнопок пагинации
	autoscroller.textPagination = '.pagination';
	// style
	// setting
	autoscroller.hidePagination = 1; // вкл\откл пагинации
	autoscroller.autoScroll = 1;     // вкл\откл автоподгрузки
	autoscroller.delay = 1000;       // время загдержки перед автоподгрузкой
	autoscroller.loading = 1;        // вкл\откл автоподгрузки после первого нажатия кнопки загрузки
	autoscroller.productTotal = 1;   // вкл\откл подсчёт товара
	autoscroller.disabled = 1;       // вкл\откл гдеактивации кнопки во время загрузки товара
	// setting

	if (autoscroller.productTotal) {
		$(autoscroller.textTotal).hide();
		if (getUrlParameter('page') > 1) {
			var productMaxTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - ($('.product-grid, .product-list').length * getUrlParameter('page') - $('.product-grid, .product-list').length);
			var productNewTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - ($('.product-grid, .product-list').length * getUrlParameter('page'));
		} else {
			var productMaxTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g));
			var productNewTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - $('.product-grid, .product-list').length;
		}
	} else {
		$(autoscroller.textTotal).hide();
	}

	if (autoscroller.hidePagination) {
		$(autoscroller.textPagination).hide();
	}

	$(window).scroll(function() {
		if (inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) {
			if (autoscroller.productTotal) {
				productNewTotal = Math.min.apply(Math, $(autoscroller.textNewTotal).text().match(/\d+/g));
			}
			$(autoscroller.catcher).prop("disabled", autoscroller.disabled);
			autoscroller.loading = 1;
			$(autoscroller.catcher + ' .fa-refresh').addClass('fa-spin');
			setTimeout(function() {
				$(autoscroller.catcher).trigger('click');
			}, autoscroller.delay);
		}
	});

	if ($('.product-grid, .product-list').length) {
		if ($(autoscroller.textPagination).length && !$(autoscroller.textPagination + ' > li:last-child').hasClass('active')) {

			$(autoscroller.textPagination).parent().before(autoscroller.htmlButton);

			$(autoscroller.catcher).on('click', function(e) {
				var nextPage = $('ul' + autoscroller.textPagination + ' li.active').next().find('a:first-child');

				$.ajax({
					url: $(nextPage).attr('href'),
					beforeSend: function(){
						$(autoscroller.catcher + ' .fa-refresh').addClass('fa-spin');
					},
					success: function(data){
						var products = $(data).find('.product-grid, .product-list');

						$(autoscroller.textPagination).parent().parent().parent().find('.product-layout:last-child').after(products);

						if (localStorage.getItem('display') == 'grid') {
							cols = $('#column-right, #column-left').length;

							if (cols == 2) {
								$(products).attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
							} else if (cols == 1) {
								$(products).attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
							} else {
								$(products).attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
							}
						}

						$(autoscroller.textPagination).html($(data).find(autoscroller.textPagination + ' > *'));

						nextPage = $('ul' + autoscroller.textPagination + ' li.active').next().find('a:first-child');

						if (nextPage.length == 0) {
							$(autoscroller.catcher).remove();
						} else {
							$(autoscroller.catcher + ' .fa-refresh').removeClass('fa-spin');
						}

						if (autoscroller.productTotal) {
							$(autoscroller.textNewTotal).text(' (Осилось товаров: ' + (productNewTotal = productNewTotal - products.length) + ' из ' + productMaxTotal + ')');
						}

						$(autoscroller.catcher).prop("disabled", false);
						
						autoscroller.loading = 0;

						return false;
					}
				});
			});
		}
	}

	if (autoscroller.productTotal) {
		$(autoscroller.textNewTotal).text(' (Осилось товаров: ' + productNewTotal + ' из ' + productMaxTotal + ')');
	}

	function getUrlParameter(sParam) {
		var sPageURL = decodeURIComponent(window.location.search.substring(1)),
			sURLVariables = sPageURL.split('&'),
			sParameterName,
			i;

		for (i = 0; i < sURLVariables.length; i++) {
			sParameterName = sURLVariables[i].split('=');

			if (sParameterName[0] === sParam) {
				return sParameterName[1];
			}
		}
		
		return 1;
	}
	
	function inWindow(el){
		if ($(el).length) {
			var scrollTop = $(window).scrollTop();
			var windowHeight = $(window).height();
			var offset = $(el).offset();

			if (scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight)) {
				return true;
			}
		}

		return false;
	}
});
}
--></script>

 

 

  • +1 2
Link to comment
Share on other sites
1
1

Venter Mentor

Venter

Posted
  • Author
Posted
10 минут назад, buslikdrev сказал:

И я похвасиюсь решением от ****** дорилиинным мной:

  Показать контент 

<script type="text/javascript"><!--
if (!$('.seocmspro_content').lench) {
$(function() {
	var autoscroller = [];
	// style
	// место нахожгдение кнопки подгрузки
	autoscroller.catcher = '#endless';
	// html-код кнопки подгрузки
	autoscroller.htmlButton = '<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 60px; white-space: pre;" ><i class="fa fa-refresh"></i> <span class="textNewTotal"></span></button></div>';
	// место нахожгдение подсчёт товара
	autoscroller.textTotal = '#content div.col-sm-6.text-right';
	// место вывода подсчёт товара
	autoscroller.textNewTotal = 'button .textNewTotal';
	// место нахожгдение кнопок пагинации
	autoscroller.textPagination = '.pagination';
	// style
	// setting
	autoscroller.hidePagination = 1; // вкл\откл пагинации
	autoscroller.autoScroll = 1;     // вкл\откл автоподгрузки
	autoscroller.delay = 1000;       // время загдержки перед автоподгрузкой
	autoscroller.loading = 1;        // вкл\откл автоподгрузки после первого нажатия кнопки загрузки
	autoscroller.productTotal = 1;   // вкл\откл подсчёт товара
	autoscroller.disabled = 1;       // вкл\откл гдеактивации кнопки во время загрузки товара
	// setting

	if (autoscroller.productTotal) {
		$(autoscroller.textTotal).hide();
		if (getUrlParameter('page') > 1) {
			var productMaxTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - ($('.product-grid, .product-list').length * getUrlParameter('page') - $('.product-grid, .product-list').length);
			var productNewTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - ($('.product-grid, .product-list').length * getUrlParameter('page'));
		} else {
			var productMaxTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g));
			var productNewTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - $('.product-grid, .product-list').length;
		}
	} else {
		$(autoscroller.textTotal).hide();
	}

	if (autoscroller.hidePagination) {
		$(autoscroller.textPagination).hide();
	}

	$(window).scroll(function() {
		if (inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) {
			if (autoscroller.productTotal) {
				productNewTotal = Math.min.apply(Math, $(autoscroller.textNewTotal).text().match(/\d+/g));
			}
			$(autoscroller.catcher).prop("disabled", autoscroller.disabled);
			autoscroller.loading = 1;
			$(autoscroller.catcher + ' .fa-refresh').addClass('fa-spin');
			setTimeout(function() {
				$(autoscroller.catcher).trigger('click');
			}, autoscroller.delay);
		}
	});

	if ($('.product-grid, .product-list').length) {
		if ($(autoscroller.textPagination).length && !$(autoscroller.textPagination + ' > li:last-child').hasClass('active')) {

			$(autoscroller.textPagination).parent().before(autoscroller.htmlButton);

			$(autoscroller.catcher).on('click', function(e) {
				var nextPage = $('ul' + autoscroller.textPagination + ' li.active').next().find('a:first-child');

				$.ajax({
					url: $(nextPage).attr('href'),
					beforeSend: function(){
						$(autoscroller.catcher + ' .fa-refresh').addClass('fa-spin');
					},
					success: function(data){
						var products = $(data).find('.product-grid, .product-list');

						$(autoscroller.textPagination).parent().parent().parent().find('.product-layout:last-child').after(products);

						if (localStorage.getItem('display') == 'grid') {
							cols = $('#column-right, #column-left').length;

							if (cols == 2) {
								$(products).attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
							} else if (cols == 1) {
								$(products).attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
							} else {
								$(products).attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
							}
						}

						$(autoscroller.textPagination).html($(data).find(autoscroller.textPagination + ' > *'));

						nextPage = $('ul' + autoscroller.textPagination + ' li.active').next().find('a:first-child');

						if (nextPage.length == 0) {
							$(autoscroller.catcher).remove();
						} else {
							$(autoscroller.catcher + ' .fa-refresh').removeClass('fa-spin');
						}

						if (autoscroller.productTotal) {
							$(autoscroller.textNewTotal).text(' (Осилось товаров: ' + (productNewTotal = productNewTotal - products.length) + ' из ' + productMaxTotal + ')');
						}

						$(autoscroller.catcher).prop("disabled", false);
						
						autoscroller.loading = 0;

						return false;
					}
				});
			});
		}
	}

	if (autoscroller.productTotal) {
		$(autoscroller.textNewTotal).text(' (Осилось товаров: ' + productNewTotal + ' из ' + productMaxTotal + ')');
	}

	function getUrlParameter(sParam) {
		var sPageURL = decodeURIComponent(window.location.search.substring(1)),
			sURLVariables = sPageURL.split('&'),
			sParameterName,
			i;

		for (i = 0; i < sURLVariables.length; i++) {
			sParameterName = sURLVariables[i].split('=');

			if (sParameterName[0] === sParam) {
				return sParameterName[1];
			}
		}
		
		return 1;
	}
	
	function inWindow(el){
		if ($(el).length) {
			var scrollTop = $(window).scrollTop();
			var windowHeight = $(window).height();
			var offset = $(el).offset();

			if (scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight)) {
				return true;
			}
		}

		return false;
	}
});
}
--></script>

 

 

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

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

загрузка по нажатию на кнопку, при прокрутке, потом то же самое есть с рандомными товарами, можно задать вывод кол-ва товаров в первом блоке при загрузке страницы и задать кол-во товаров за одну подгрузку, ну и врогде бы пока все. Честно сказать не знал что эти модули икие спросом пользуются.

Ну вот пусть качают кому надо. ;)   Ксити, шаблон вывода карточки взят с гдефолтного шаблона, под отгдельную тему шаблона нужно редактировать пару файлов

Link to comment
Share on other sites
1

Venter Mentor

Venter

Posted
  • Author
Posted
20 минут назад, buslikdrev сказал:

И я похвасиюсь решением от ****** дорилиинным мной:

  Показать контент 

<script type="text/javascript"><!--
if (!$('.seocmspro_content').lench) {
$(function() {
	var autoscroller = [];
	// style
	// место нахожгдение кнопки подгрузки
	autoscroller.catcher = '#endless';
	// html-код кнопки подгрузки
	autoscroller.htmlButton = '<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 60px; white-space: pre;" ><i class="fa fa-refresh"></i> <span class="textNewTotal"></span></button></div>';
	// место нахожгдение подсчёт товара
	autoscroller.textTotal = '#content div.col-sm-6.text-right';
	// место вывода подсчёт товара
	autoscroller.textNewTotal = 'button .textNewTotal';
	// место нахожгдение кнопок пагинации
	autoscroller.textPagination = '.pagination';
	// style
	// setting
	autoscroller.hidePagination = 1; // вкл\откл пагинации
	autoscroller.autoScroll = 1;     // вкл\откл автоподгрузки
	autoscroller.delay = 1000;       // время загдержки перед автоподгрузкой
	autoscroller.loading = 1;        // вкл\откл автоподгрузки после первого нажатия кнопки загрузки
	autoscroller.productTotal = 1;   // вкл\откл подсчёт товара
	autoscroller.disabled = 1;       // вкл\откл гдеактивации кнопки во время загрузки товара
	// setting

	if (autoscroller.productTotal) {
		$(autoscroller.textTotal).hide();
		if (getUrlParameter('page') > 1) {
			var productMaxTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - ($('.product-grid, .product-list').length * getUrlParameter('page') - $('.product-grid, .product-list').length);
			var productNewTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - ($('.product-grid, .product-list').length * getUrlParameter('page'));
		} else {
			var productMaxTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g));
			var productNewTotal = Math.max.apply(Math, $(autoscroller.textTotal).text().match(/\d+/g)) - $('.product-grid, .product-list').length;
		}
	} else {
		$(autoscroller.textTotal).hide();
	}

	if (autoscroller.hidePagination) {
		$(autoscroller.textPagination).hide();
	}

	$(window).scroll(function() {
		if (inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) {
			if (autoscroller.productTotal) {
				productNewTotal = Math.min.apply(Math, $(autoscroller.textNewTotal).text().match(/\d+/g));
			}
			$(autoscroller.catcher).prop("disabled", autoscroller.disabled);
			autoscroller.loading = 1;
			$(autoscroller.catcher + ' .fa-refresh').addClass('fa-spin');
			setTimeout(function() {
				$(autoscroller.catcher).trigger('click');
			}, autoscroller.delay);
		}
	});

	if ($('.product-grid, .product-list').length) {
		if ($(autoscroller.textPagination).length && !$(autoscroller.textPagination + ' > li:last-child').hasClass('active')) {

			$(autoscroller.textPagination).parent().before(autoscroller.htmlButton);

			$(autoscroller.catcher).on('click', function(e) {
				var nextPage = $('ul' + autoscroller.textPagination + ' li.active').next().find('a:first-child');

				$.ajax({
					url: $(nextPage).attr('href'),
					beforeSend: function(){
						$(autoscroller.catcher + ' .fa-refresh').addClass('fa-spin');
					},
					success: function(data){
						var products = $(data).find('.product-grid, .product-list');

						$(autoscroller.textPagination).parent().parent().parent().find('.product-layout:last-child').after(products);

						if (localStorage.getItem('display') == 'grid') {
							cols = $('#column-right, #column-left').length;

							if (cols == 2) {
								$(products).attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
							} else if (cols == 1) {
								$(products).attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
							} else {
								$(products).attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
							}
						}

						$(autoscroller.textPagination).html($(data).find(autoscroller.textPagination + ' > *'));

						nextPage = $('ul' + autoscroller.textPagination + ' li.active').next().find('a:first-child');

						if (nextPage.length == 0) {
							$(autoscroller.catcher).remove();
						} else {
							$(autoscroller.catcher + ' .fa-refresh').removeClass('fa-spin');
						}

						if (autoscroller.productTotal) {
							$(autoscroller.textNewTotal).text(' (Осилось товаров: ' + (productNewTotal = productNewTotal - products.length) + ' из ' + productMaxTotal + ')');
						}

						$(autoscroller.catcher).prop("disabled", false);
						
						autoscroller.loading = 0;

						return false;
					}
				});
			});
		}
	}

	if (autoscroller.productTotal) {
		$(autoscroller.textNewTotal).text(' (Осилось товаров: ' + productNewTotal + ' из ' + productMaxTotal + ')');
	}

	function getUrlParameter(sParam) {
		var sPageURL = decodeURIComponent(window.location.search.substring(1)),
			sURLVariables = sPageURL.split('&'),
			sParameterName,
			i;

		for (i = 0; i < sURLVariables.length; i++) {
			sParameterName = sURLVariables[i].split('=');

			if (sParameterName[0] === sParam) {
				return sParameterName[1];
			}
		}
		
		return 1;
	}
	
	function inWindow(el){
		if ($(el).length) {
			var scrollTop = $(window).scrollTop();
			var windowHeight = $(window).height();
			var offset = $(el).offset();

			if (scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight)) {
				return true;
			}
		}

		return false;
	}
});
}
--></script>

 

 

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

Link to comment
Share on other sites
1

Venter Mentor

Venter

Posted
  • Author
Posted

Всем привет ! С наступающим Новым Годом!!!

В верхнем варианте что выложил файл был коскак, копи-паст осился от моего другого модуля, исправлено и кое что еещё подправлено

Тестировалось на ocStore 3.0.2.0 и Opencart 3.0.2.0

 

Выкладываю новую версию

loading_goods-oc3.0.2.ocmod.zip

Link to comment
Share on other sites
1

Venter Mentor

Venter

Posted
  • Author
Posted

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

Link to comment
Share on other sites
1

  • 10 months later...
Iva1001 Apprentice

Iva1001

Posted
Posted
В 31.12.2020 в 09:17, Venter сказал:

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

Очень жду этот модуль. Передумали выкладывать?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.

  I accept