CMS DataLife Engine - Система управления сайтами

redissx

Ajax подгрузка новостей по кнопке или при скролле

Recommended Posts

8 часов назад, Shohxusrav сказал:

Здравствуйте!

 

У вас отличный хак. Но есть вопрос. Если новости показывает в main.tpl с помощью тег {content} работает без проблем.

А я пользуюсь с тег {custom}. Потому что мне нужно выводить определенный новости с категориями. 

 

Мой вариант:

{custom category="5-6" template="shortstory" aviable="global" from="0" limit="20" order="date" navigation="yes"}

 

Как можно разобраться что хак работал тоже с {custom} тегам.

 

Спасибо!

Оберните свой кастом в <div id="dle-content"></div>

Edited by redissx

Share this post


Link to post
Share on other sites
2 часа назад, redissx сказал:

Оберните свой кастом в <div id="dle-content"></div>

Большой спасибо! Помог.

Share this post


Link to post
Share on other sites

Здравствуйте.

 

Отличный хак, спасибо.

 

Вопрос по существу:

 

У меня, в navigation.tpl, перед навигацией {pages}, на сайте загружается рекламный блок Яндекс.Директ:

 

Соответственно, в navigation.tpl добавлен код:

 

<div id="yandex_ad2_{page_now}"></div>

<script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
                    site_charset: "windows-1251",

............
</script>

<!-- стандартная навигация -->

 

В шаблон к рекламному блоку добавлена переменная с текущей страницей - {page_now}.

 

Так вот, на первой странице код Директа отрабатывается, реклама показывается.

На последующих подгруженных ajax-страницах эти рекламные div пустые.

 

Т.е.

id="yandex_ad2_1" - есть реклама 

id="yandex_ad2_2" - пусто и т.д.

 

Вопрос: как это поправить?

Как подгружать рекламу в последующие, после первого div?

 

Пишут, что:

 

Цитата

На AJAX-сайтах с помощью асинхронного кода можно настроить обновление содержимого рекламного блока при изменении контента страницы или при другом указанном событии. Для этого необходимо повторно вызывать функцию:
Ya.Direct.insertInto( XXXX, "yandex_ad", { /*… Настройки вашего блока … */}) ;

Так вот, как и где повторно вызывать эту Ya.Direct.insertInto() ?

 

Заранее благодарю за ответ.

Share this post


Link to post
Share on other sites
16 часов назад, kind_whale сказал:

Здравствуйте.

 

Отличный хак, спасибо.

 

Вопрос по существу:

 

У меня, в navigation.tpl, перед навигацией {pages}, на сайте загружается рекламный блок Яндекс.Директ:

 

Соответственно, в navigation.tpl добавлен код:

 


<div id="yandex_ad2_{page_now}"></div>

<script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
                    site_charset: "windows-1251",

............
</script>

<!-- стандартная навигация -->

 

В шаблон к рекламному блоку добавлена переменная с текущей страницей - {page_now}.

 

Так вот, на первой странице код Директа отрабатывается, реклама показывается.

На последующих подгруженных ajax-страницах эти рекламные div пустые.

 

Т.е.

id="yandex_ad2_1" - есть реклама 

id="yandex_ad2_2" - пусто и т.д.

 

Вопрос: как это поправить?

Как подгружать рекламу в последующие, после первого div?

 

Пишут, что:

 

Так вот, как и где повторно вызывать эту Ya.Direct.insertInto() ?

 

Заранее благодарю за ответ.

1. скрипт тогда нужно помещать в маин.тпл перед </body>

2. перезапуск вставляется тут

         
                success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                }

                success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
					Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
						site_charset: "windows-1251",
						.........
					};
                }

я не знаю как  точно перезапускать, эту проблему уже решать вам.

 

Хотя не так все просто, {page_now}" же тоже меняется, выходит перед </body> не пойдет, возможно скрипт прямо в navigation.tpl в #bottom-nav, но тогда надо обязательно чтобы длешные скрипты подключались перед ним, то есть аккуратнее с {jsfiles}. Также выходит что подгрузку можно только при клике.

 

В общем, придется вам поломать голову.

Edited by redissx

Share this post


Link to post
Share on other sites

Да, действительно не всё так просто.

Попробовал изменить код вызова на RTB, почитал "Показ рекламы в лентах с бесконечной прокруткой"

https://yandex.ru/support/partner2/web/products-rtb/partner-code.html

 

Пробовал добавлять код и в navigation.tpl и Вашу функцию:

success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
					
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXXXX-4",
		                renderTo: "yandex_rtb_R-A-XXXX-4-{page_now}",
		                pageNumber: {page_now},
		                async: true
		            });

                }

Но не работает.

 

На первой странице первый рекламный блок отображается. Его код в браузере:

<div id="yandex_rtb_R-A-XXX-4-1">код рекламы</div>
<script type="text/javascript">
		    (function(w, d, n, s, t) {
		        w[n] = w[n] || [];
		        w[n].push(function() {
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXX-4",
		                renderTo: "yandex_rtb_R-A-XXX-4-1",
		                pageNumber: 1,
		                async: true
		            });
		        });
		        t = d.getElementsByTagName("script")[0];
		        s = d.createElement("script");
		        s.type = "text/javascript";
		        s.src = "//an.yandex.ru/system/context.js";
		        s.async = true;
		        t.parentNode.insertBefore(s, t);
		    })(this, this.document, "yandexContextAsyncCallbacks");
		</script>

А код остальных блоков не содержит <script>...</script>:

<div id="yandex_rtb_R-A-XXX-4-2"></div>
(нет <script>)

Вопрос: как для второго и последующих блоков добавить js-код вызова <script>...</script>?

 

Спасибо заранее.

Edited by kind_whale

Share this post


Link to post
Share on other sites
18 часов назад, kind_whale сказал:

Да, действительно не всё так просто.

Попробовал изменить код вызова на RTB, почитал "Показ рекламы в лентах с бесконечной прокруткой"

https://yandex.ru/support/partner2/web/products-rtb/partner-code.html

 

Пробовал добавлять код и в navigation.tpl и Вашу функцию:


success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
					
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXXXX-4",
		                renderTo: "yandex_rtb_R-A-XXXX-4-{page_now}",
		                pageNumber: {page_now},
		                async: true
		            });

                }

Но не работает.

 

На первой странице первый рекламный блок отображается. Его код в браузере:


<div id="yandex_rtb_R-A-XXX-4-1">код рекламы</div>
<script type="text/javascript">
		    (function(w, d, n, s, t) {
		        w[n] = w[n] || [];
		        w[n].push(function() {
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXX-4",
		                renderTo: "yandex_rtb_R-A-XXX-4-1",
		                pageNumber: 1,
		                async: true
		            });
		        });
		        t = d.getElementsByTagName("script")[0];
		        s = d.createElement("script");
		        s.type = "text/javascript";
		        s.src = "//an.yandex.ru/system/context.js";
		        s.async = true;
		        t.parentNode.insertBefore(s, t);
		    })(this, this.document, "yandexContextAsyncCallbacks");
		</script>

А код остальных блоков не содержит <script>...</script>:


<div id="yandex_rtb_R-A-XXX-4-2"></div>
(нет <script>)

Вопрос: как для второго и последующих блоков добавить js-код вызова <script>...</script>?

 

Спасибо заранее.

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

success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
					/* здесь мы выполняем все свои действия после того, как все загрузилось и добавилось */
                }

Как именно это сделать с рекламой я не знаю и за вас не сделаю. Попробуйте обратиться в тех. поддержку рекламной сети, им виднее, как это сделать.

Share this post


Link to post
Share on other sites

<img src="{THEME}/images/no_foto.gif" data-src="{fullimage-1}" alt="">

 

redissx у меня картинки не загружаются из-за этого скрипта. 

 

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer.getAttribute('data-src')) {
imgDefer.setAttribute('src',imgDefer.getAttribute('data-src'));
} } }
window.onload = init;
</script>

 

Что нужно сделать, чтоб срабатывал и этот скрипт и фотографии тоже появлялись? 

Share this post


Link to post
Share on other sites
В 04.12.2018 в 15:14, footballhd сказал:

<img src="{THEME}/images/no_foto.gif" data-src="{fullimage-1}" alt="">

 

redissx у меня картинки не загружаются из-за этого скрипта. 

 

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer.getAttribute('data-src')) {
imgDefer.setAttribute('src',imgDefer.getAttribute('data-src'));
} } }
window.onload = init;
</script>

 

Что нужно сделать, чтоб срабатывал и этот скрипт и фотографии тоже появлялись? 

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

  • Thanks 1

Share this post


Link to post
Share on other sites
5 часов назад, footballhd сказал:

redissx

Как сделать так чтоб в тегах тоже загружались так новости? 

По идее так

[aviable=main|cat|tags]
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    <!-- сюда можете вставить дополнительно обычную навигацию -->
    
</div>
[/aviable]
	[not-aviable=main|cat|tags]
<!-- обычная навигация -->
[/not-aviable]

 

Share this post


Link to post
Share on other sites

redissx

Нет так не работает. Я уже пробовал делать так. 

 

[aviable=cat|tags]
<div class="bottom-nav ignore-select" id="bottom-nav">
    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
</div>
[/aviable][not-aviable=cat|tags]{pages}[/not-aviable]

В такой ситуации просто показывают столько новостей сколько на 1 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго. 

Share this post


Link to post
Share on other sites
21 час назад, footballhd сказал:

redissx

Нет так не работает. Я уже пробовал делать так. 

 


[aviable=cat|tags]
<div class="bottom-nav ignore-select" id="bottom-nav">
    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
</div>
[/aviable][not-aviable=cat|tags]{pages}[/not-aviable]

В такой ситуации просто показывают столько новостей сколько на 1 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго. 

Загрузка начинает идти, но что-то ее останавливает. Смотрите консоль браузера. Думаю, перезапуск функции вы вставили, а саму функцию на странице тегов потеряли.

  • Thanks 1

Share this post


Link to post
Share on other sites

redissx

Спасибо! Я наколдовал с тегами и не заметил проблему с навигацией :)

Share this post


Link to post
Share on other sites
В 30.11.2017 в 15:30, redissx сказал:

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

 

Загрузка при клике по кнопке


В итоге мы получим это

1512035499_firefox_screenshot_2017-11-30

 

1. В navigation.tpl вашего шаблона


<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    <!-- сюда можете вставить дополнительно обычную навигацию -->
    
</div>

2. В конец css файла вашего шаблона


.bottom-nav {clear: both; padding-top: 60px;}
.nav-load {text-align: center;}
.nav-load a {padding: 0 60px; display: inline-block; height: 60px; line-height: 60px; border-radius: 30px;
font-weight: 700; font-size: 18px; background-color: #2980b9; color: #fff;}
.nav-load a:hover {background-color: #00a652; color: #fff;}
.nav-load span {display: none;}

3. В конец js файла вашего шаблона


$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});


Автоматическая загрузка при скролле


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

 

1. В navigation.tpl вашего шаблона


<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
</div>

2. В конец css файла вашего шаблона


.bottom-nav {clear: both; opacity:0;}

3. В конец js файла вашего шаблона


$(document).ready(function(){
    
    var loadLink = $('#nav-load'), loadStatus = 0;
    $(window).scroll (function () {
        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {
            var urlNext = loadLink.find('a').attr('href');
            if (urlNext !== undefined && loadStatus == 0) {
                loadStatus = 1;
                $.ajax({
                    url: urlNext,
                    beforeSend: function() {
                        ShowLoading();
                    },            
                    success: function(data) {
                        $('#bottom-nav').remove();
                        $('#dle-content').append($('#dle-content', data).html()).after($('#bottom-nav'));
                        window.history.pushState("", "", urlNext);
                        HideLoading();
                        loadStatus = 0, loadLink = $('#nav-load');
                    }
                });
            } else {
                loadLink.remove();
            };
        };
    });  
    
});

здесь в строке


        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {


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


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


[aviable=main|cat]
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    <!-- сюда можете вставить дополнительно обычную навигацию -->
    
</div>
[/aviable]
	[not-aviable=main|cat]
<!-- обычная навигация -->
[/not-aviable]

Еще раз здравствуйте!

 

А как можно сделать что бы рекламный баннеры показался между контентом после каждый 20 новость.

 

Мой конф:

<div id="dle-content">{custom category="11,13-20" template="shortstory" aviable="main" from="0" limit="20" order="date" navigation="yes"}</div>

Спасибо!

Edited by Shohxusrav

Share this post


Link to post
Share on other sites
9 часов назад, Shohxusrav сказал:

 

А как можно сделать что бы рекламный баннеры показался между контентом после каждый 20 новость.

Вставить можно в shortstory.tpl с помощью тега newscount. А будет ли показываться - это уже другой вопрос.

  • Like 1

Share this post


Link to post
Share on other sites

Установил первый пример по клику на кнопку. Но при нажатии на "загрузить еще" просто перекидывает на след страницу, а не подгружает ее. Крч, работает как обычная кнопка "далее". Подскажите что не так может быть?

 

Share this post


Link to post
Share on other sites
17 часов назад, Mark456 сказал:

Установил первый пример по клику на кнопку. Но при нажатии на "загрузить еще" просто перекидывает на след страницу, а не подгружает ее. Крч, работает как обычная кнопка "далее". Подскажите что не так может быть?

 

Значит не срабатывает скрипт. Раз не срабатывает, значит жс ошибка. Раз ошибка, значит ошиблись в установке. Вероятно, скрипты движка ({headers}, {jsfiles}) находятся ниже по коду страницы, чем скрипт погрузки.

Ошибку можете посмотреть в консоли браузера.

Share this post


Link to post
Share on other sites
В 20.12.2018 в 15:42, redissx сказал:

Значит не срабатывает скрипт. Раз не срабатывает, значит жс ошибка. Раз ошибка, значит ошиблись в установке. Вероятно, скрипты движка ({headers}, {jsfiles}) находятся ниже по коду страницы, чем скрипт погрузки.

Ошибку можете посмотреть в консоли браузера.

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

Подскажите где копать? (сам не спец, но навык небольшой есть)

Share this post


Link to post
Share on other sites
В 30.12.2018 в 17:50, jeka66 сказал:

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

Подскажите где копать? (сам не спец, но навык небольшой есть)

Смотрите консоль браузера, там все пишет.

Share this post


Link to post
Share on other sites
В 02.01.2019 в 18:57, redissx сказал:

Смотрите консоль браузера, там все пишет.

ставил эксперименты на локальной версии (12.1-1251), после обновления до 13.1-utf8, проблема исчезла. Возможно некорректно скачал с хостинга файлы перед экспериментом... В общем все работает сейчас нормально.

 

Возник вопрос: после достижения последней новости, кнопка "ЗАГРУЗИТЬ ЕЩЕ" становится неактивная, но остается. Есть возможность ее отключать по достижении конца списка?

Edited by jeka66

Share this post


Link to post
Share on other sites
1 час назад, jeka66 сказал:

ставил эксперименты на локальной версии (12.1-1251), после обновления до 13.1-utf8, проблема исчезла. Возможно некорректно скачал с хостинга файлы перед экспериментом... В общем все работает сейчас нормально.

 

Возник вопрос: после достижения последней новости, кнопка "ЗАГРУЗИТЬ ЕЩЕ" становится неактивная, но остается. Есть возможность ее отключать по достижении конца списка?

вопрос решился полной очисткой кеша на сайте и в браузере...

Share this post


Link to post
Share on other sites

DLE 13.2 с использованием lazy загрузки. При нажатие на "Загрузить ещё", картинки не грузятся.

Share this post


Link to post
Share on other sites
12 часов назад, alexpsp сказал:

DLE 13.2 с использованием lazy загрузки. При нажатие на "Загрузить ещё", картинки не грузятся.

$(window).on('ajaxComplete', function() {
  setTimeout(function() {
    $(window).lazyLoadXT();
  }, 50);
});

После этого скрипта.

https://github.com/ressio/lazy-load-xt#ajax

  • Upvote 1
  • Thanks 1

Share this post


Link to post
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