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

redissx

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

Рекомендуемые сообщения

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>

Изменено пользователем redissx

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, redissx сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

 

У меня, в 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() ?

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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}. Также выходит что подгрузку можно только при клике.

 

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

Изменено пользователем redissx

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Попробовал изменить код вызова на 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>?

 

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

Изменено пользователем kind_whale

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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('');
					/* здесь мы выполняем все свои действия после того, как все загрузилось и добавилось */
                }

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

<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>

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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 нужно перезапускать. Где вписать перезапуск написано чуть выше.

  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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]

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго. 

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

  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

redissx

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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>

Спасибо!

Изменено пользователем Shohxusrav

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
9 часов назад, Shohxusrav сказал:

 

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

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

  • Нравится 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
17 часов назад, Mark456 сказал:

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 20.12.2018 в 15:42, redissx сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 30.12.2018 в 17:50, jeka66 сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 02.01.2019 в 18:57, redissx сказал:

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

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

 

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

Изменено пользователем jeka66

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, jeka66 сказал:

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 часов назад, alexpsp сказал:

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

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

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

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

  • Поддерживаю 1
  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти