Вывести в меню индикатор новых новостей и статей на сайте Тильда
Доброго времени друзья! Сегодня я хочу поделиться с вами скриптом, для сайта созданного с помощью конструктора сайтов Тильда, скрипт позволяет вывести в меню, индикатор новых новостей(статей и прочих записей) для пользователя, на против каждого пункта меню, в шапке сайта. Как оказалось данный скрипт очень востребован, поэтому спешу поделиться им с вами.
Принцип работы
Скрипт написан на JavaScript, с использованием библиотеки jQuery, а также дополнительного плагина для работы с Cookie. Скрипт добавляется на все страницы сайта(в шапку сайта). И работает следующим образом:
- Пользователь заходит на сайт, скрипт записывает информацию о посещении в Cookie браузера;
- Пользователь посещает сайт повторно, загружается скрипт, после чего скрипт опрашивает все разделы(с новостями, статьями т.д.) сайта, и сравнивает полученную информацию с данными в Cookie пользователя. Если выясняется, что с момента последнего посещения на сайт были добавлены новые материалы, скрипт выведет соответствующий индикатор в меню сайта.
Как это выглядит?
Меню на полной версии сайта будет выглядеть так, с отображением напротив каждого пункта меню индикатора количество новых новостей:
Меню в мобильной версии сайта:
Скрипт
jQuery(document).ready(function($) { // Стиль оформления индикатора $('head').append(` <style> .new-post { background: red; color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 20px; position: absolute; top: 0; right: -13px; } .t-menu__link-item {position: relative;text-align: center;} .t-menu__link-item .new-post { right: -20px; } </style> `); // Режим отладки, будет выводить в консоль информацию о работе скрипта var debug = true; // ID Проекта(сайта) на Tilda var projectid = ''; // Список ID каналов новостей (чтобы узнать их, нужно посмотреть в "инструментах разработчика", в браузере, запросы к API Tilda, и из них получить эти ID) var feed = { '86438483XXXX': {url: '/articles', feeduid: '86438483XXXX', total: 0, type: 'feed'}, '56743949YYYY': {url: '/news', feeduid: '56743949YYYY', total: 0, type: 'feed'}, }; //var lastfeed = window.localStorage.getItem('lastfeed') != null ? JSON.parse(window.localStorage.getItem('lastfeed')) : null; var lastfeed = $.cookie('lastfeed') != null ? JSON.parse($.cookie('lastfeed')) : null; if(lastfeed != null) { if(Object.keys(feed)[0] in lastfeed) {} else { lastfeed = null; //window.localStorage.setItem('lastfeed', null); $.cookie('lastfeed', null); if(debug) console.log('Set Lastfeed to Null (Fixed)'); } // Если в Storage данные не корректны, затираем его } var ajaxload = 0; if(debug) console.log(lastfeed); $.each(feed, function(i, v) { ajaxload++; var url = ''; var data = null; var method = 'GET'; if(v.type == 'feed') { // Запросы к API Tilda чтобы получить информацию о количестве статей url = "https://feeds.tildaapi.com/api/getfeed/?feeduid=" + v.feeduid + "&recid=&c=&size=&slice=1&sort%5Bdate%5D=desc&filters%5Bdate%5D=&getparts=true"; } else { method = 'POST'; // Запросы к API Tilda чтобы получить информацию о количестве записей на остальных страницах (разделах) url = "https://members.tildaapi.com/api/getpage/"; data = {pageid: v.feeduid, pageurl: "https://" + window.location.hostname + v.url, projectid: projectid, token: "", tzoffset: -180}; } $.ajax({ method: method, url: url, data: data, dataType: "json", success: function(data) { if(v.type == 'page' && 'data' in data) { var doc = new DOMParser().parseFromString(data.data.html, "text/html"); data.total = doc.querySelectorAll("ul li.t-item").length; } if( 'status' in data) { if(data.status == 'error') { ajaxload--; return; } } if(debug) console.log('Total on Feed URL: ' + v.url + ', UID: ' + v.feeduid + ': ' + data.total); if(lastfeed != null && window.location.pathname == v.url) { if(debug) console.log('This current Page ' + v.url + ', clear last Total data '); lastfeed[v.feeduid] = feed[v.feeduid]; lastfeed[v.feeduid].total = 'total' in data ? data.total : 0; } feed[v.feeduid].total = data.total; ajaxload--; } }); }); var timer = setInterval(function() { // Ждем получения информации от Ajax запросов в API Tilda if(ajaxload == 0) { if(debug) console.log('All Feed ajax loding'); if(lastfeed != null && Object.keys(lastfeed).length == Object.keys(feed).length) { if(debug) console.log('Save Cookie Lastfeed: ' + Object.keys(lastfeed).length); $.cookie('lastfeed', JSON.stringify(lastfeed), { expires: 7, path: '/'}); } else { if(debug) console.log('Save Cookie Feed: ' + Object.keys(feed).length); $.cookie('lastfeed', JSON.stringify(feed), { expires: 7, path: '/'}); } clearInterval(timer); $.each(feed, function(i, v) { if(lastfeed != null && v.feeduid in lastfeed && parseInt(lastfeed[v.feeduid].total) < parseInt(v.total)) { if(debug) console.log('In Feed ' + v.url + ' exists new Post: ' + (parseInt(v.total) - parseInt(lastfeed[v.feeduid].total))); $('.t396__artboard.rendered a.tn-atom[href="' + v.url + '"]').append(` <div class="new-post">` + (parseInt(v.total) - parseInt(lastfeed[v.feeduid].total)) + `</div> `); $('.t450__menu a.t-menu__link-item[href="' + v.url + '"]').append(` <div class="new-post">` + (parseInt(v.total) - parseInt(lastfeed[v.feeduid].total)) + `</div> `); } }); } }, 300); }); |
Не забываем подключить jQuery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> |
Код плагина для работы с Cookie:
jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // NOTE Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; |
Похожие записи
Оставить комментарий
Full Stack
Senior, Architect
предложить оффер
- jQuery: как получить значение атрибута?
- Интеграция с API ОСАГО сайта sravni.ru
- PHP работа с изображением, класс SimpleImage
- Комментарии на PHP, Ajax, mySQL
- PHP: Категории бесконечного уровня вложенности.
- Nginx редирект на другой сервис с сохранением URL спросил (а) Сергей
- Исполнитель пропал, почему такое случается и понять с кем работать? спросил (а) Артем
- Можно ли WordPress считать универсальным движком? спросил (а) Андрей
- Что такое самописный скрипт или CMS? спросил (а) Антон
- Как при поиске в linux используя grep, добавить исключения? спросил (а) Алексей
- Как создать Telegram-бота с авторизацией через сайт к записи
- PHP скрипт: каталог закладок на сайты к записи
- Валидация на PHP к записи
- Сколько зарабатывают в бизнесе на совместных покупках к записи
- Сколько зарабатывают в бизнесе на совместных покупках к записи
- Подключение(интеграция) приема платежей WeChat Pay на сайте к записи
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей к записи
Archive
- +2024 (6)
- Август 2024 (5)
- Май 2024 (1)
- +2023 (27)
- Ноябрь 2023 (1)
- Октябрь 2023 (13)
- Сентябрь 2023 (10)
- Апрель 2023 (1)
- Март 2023 (1)
- Февраль 2023 (1)
- +2022 (21)
- Декабрь 2022 (11)
- Ноябрь 2022 (1)
- Май 2022 (2)
- Апрель 2022 (2)
- Март 2022 (3)
- Февраль 2022 (1)
- Январь 2022 (1)
- +2021 (17)
- Декабрь 2021 (5)
- Ноябрь 2021 (2)
- Июль 2021 (1)
- Июнь 2021 (2)
- Май 2021 (5)
- Апрель 2021 (1)
- Март 2021 (1)
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (36)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (41)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (7)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Вывести в меню индикатор новых новостей и статей на сайте Тильда 28.08.2024
- Свой сетевой диск для iPhone — поднимаем Samba на Centos 27.08.2024
- Бекап, сохранение и восстановление БД MySQL 21.08.2024
- Авторизация SSH с помощью ключа в Putty 20.08.2024
- Настройка доступа к сайту, находящегося за NAT и проксирующим nGinx 20.08.2024