O que há de novo?

Carregamento com fetch, melhor performance e exibição de páginas vistas

O carregamento por AJAX permite controlar a chamada dinâmica de listas de notícias. Pode ser usada, por exemplo:

• eliminar paginação ao carregar mais itens durante rolagem;
• carregar notícias segundo interesse em locais específicos;
• carregar notícias em locais que não é necessariamente o blog;
   

⚠️ Cuidado: Como a solicitação das notícias é via data-driven direto para o banco, não é interessante utilizá-la sem necessidade;

 Os carregamentos na página de exemplo:

Parâmetros utilizados no exemplo

⚠️ A solicitação é por AJAX via API. Só funciona no domínio real do site.

Dados para passar no script via POST:

• "req"      :  listNews (valor padrão e obrigatório);
• "siteId"   :  valor manual e obrigatório, ex: 1;
• "lim"       :  valor para carregamento na barra de rolagem, ex: 4;
• "scroll"   :  valor de variavel scrollDeep;
• "tag"       :  valor opcional para filtros por categoria;
• "author" :  valor opcional para filtros por autor;
• "order"   :  valor opcional para ordenação, ex: publishNewsTitle ASC / publishNewsId DESC.

DEMO: https://www.interago.com.br/App/Sites/1/demo-lista-de-noticias-.html

Código completo de um exemplo para utilização em outros locais:

Exemplo de código recomendado para invocar o script de forma otimizada, precisa de fetchData() a seguir

Parâmetros do fetchData:

urlToday: é a URL do Script, fixa e não muda

paramsToday: São os parâmetros da requisição

"listTodayNewsContainer" : é o ID do elemento onde os artigos serão carregados

"hoje": É uma variável que pode ser usada como string para determinar classes para alterar o CSS

 if (navigator.onLine) {
 //o script é sempre o mesmo
 const urlToday = "https://www.interago.com.br/App/Extensions/4/compile/assets/loadNewsList.php";
 const paramsToday = new URLSearchParams({
    req: "listNews", //obrigatório
    siteId: 421, //id do website
    lim: 20, //quantas matérias será exibida
    order: "publishNewsDate desc", //qual a ordenação padrão
    scroll: 0, //nível de rolagem, para carregar automaticamente mais artigos
    tag:0, //especificar o id da tag para filtrar
    websiteDomain:"www.bematualizado.net", //domínio
    configPath:"blog" //caminho para a extensão de notícias
 });
 
 fetchData(urlToday, paramsToday, "listTodayNewsContainer", "hoje");
} else {
    console.log("navegador offline"); //ação caso o navegador esteja offline
 }

Exemplo de função fetchData para fazer a requisição e processá-la

function fetchData(url, params, containerId, classStyle) {
        fetch(url, {
            method: "POST",
             headers: {
                "Content-type": "application/x-www-form-urlencoded"
            },
            body: params
        })
        .then(response => {
            if (response.ok) {
                return response.text();
            }
            throw new Error("Network response was not ok.");
        })
        .then(data => {
            if (data == 0) {
                window.removeEventListener("scroll", scrollF);
            } else {
                const news = JSON.parse(data);
                renderContent(data);
            }
        })
        .catch(error => {
            console.error("There was a problem with the fetch operation:", error);
        });
    }

Assim que a requisição é bem sucedida, a função renderContent(data) é responsável por exibir os artigos

Exemplo de JSON com as matérias (formato da data enviada)

[
    "{\"id\" : \"8215\",\n                    \"title\" : \"Quanto de herança Michael Jackson deixou para os filhos após a morte?\",\n                    \"subtitle\" : \"15 anos após falecimento do cantor, filhos de artista continuam a faturar com legado deixado pelo pai\",\n                    \"image\" : \"https://cdn.interago.com.br/img/jpg/w_0_q_8/421/mc/Curiosidade/Famosos/Quanto Michael deixou para os filhos/copia_1262713229FIlhos-Michael\",\n                    \"tag\": \"446\",\n                    \"date\": \"26/06/2024\",\n                    \"time\" : \"14h44\",\n                    \"modificationDate\" : \"26/06/2024\",\n                    \"modificationTime\" : \"14h45\",\n                    \"authorId\" : \"360\",\n                    \"author\" : \"Ana Paula Lima\",\n                    \"authorDesc\" : \"Ana Lima é uma jornalista que há cerca de quatro anos atua com ênfase em entretenimento, arte, cinema, música e televisão. Estudou Comunicação Social na Universidade Paulista em 2019, com especialização em mídias digitais. Passou por veículos de comunicação como o jornal Alô, Brasília e possui longa experiência em agências de publicidade e propaganda.\",\n                    \"tagName\" : \"Hoje\",\n                    \"tagTag\" : \"hoje\",\n                    \"tagClass\" : \"hoje\",\n                    \"tagImg\" : \"https://cdn.interago.com.br/img/jpg/w_0_q_8/421/mc/tags/212\",\n                    \"pubUrl\" : \"https://www.bematualizado.net/blog/8215-quanto-de-heranca-michael-jackson-deixou-para-os-filhos-apos-a-morte-\",\n                    \"autUrl\" : \"https://www.bematualizado.net/blog/author/360#ana-paula-lima\",\n                    \"tagUrl\" : \"https://www.bematualizado.net/blog/tag/hoje\",\n                    \"views\" : \"552\"}",
    "{\"id\" : \"8212\",\n                    \"title\" : \"Asteroide “potencialmente perigoso” do tamanho do Monte Everest passará próximo à Terra\",\n                    \"subtitle\" : \"Considerado perigoso, público poderá avistar passagem de corpo celeste através de transmissão ao vivo ou telescópio.\",\n                    \"image\" : \"https://cdn.interago.com.br/img/webp/w_0_q_8/421/mc/Curiosidade/Notícias/Asteroide passará próximo a Terra/copia_1035060346Asteroide\",\n                    \"tag\": \"447\",\n                    \"date\": \"26/06/2024\",\n                    \"time\" : \"12h40\",\n                    \"modificationDate\" : \"27/06/2024\",\n                    \"modificationTime\" : \"09h55\",\n                    \"authorId\" : \"360\",\n                    \"author\" : \"Ana Paula Lima\",\n                    \"authorDesc\" : \"Ana Lima é uma jornalista que há cerca de quatro anos atua com ênfase em entretenimento, arte, cinema, música e televisão. Estudou Comunicação Social na Universidade Paulista em 2019, com especialização em mídias digitais. Passou por veículos de comunicação como o jornal Alô, Brasília e possui longa experiência em agências de publicidade e propaganda.\",\n                    \"tagName\" : \"Tecnologia\",\n                    \"tagTag\" : \"tecnologia\",\n                    \"tagClass\" : \"tecnologia\",\n                    \"tagImg\" : \"https://cdn.interago.com.br/img/jpeg/w_0_q_8/421/mc/tags/technology\",\n                    \"pubUrl\" : \"https://www.bematualizado.net/blog/8212-asteroide-_potencialmente-perigoso_-do-tamanho-do-monte-everest-passara-proximo-a-terra\",\n                    \"autUrl\" : \"https://www.bematualizado.net/blog/author/360#ana-paula-lima\",\n                    \"tagUrl\" : \"https://www.bematualizado.net/blog/tag/tecnologia\",\n                    \"views\" : \"175\"}"
]

Exemplo de renderContent para exibir os artigos (exemplo com ordenação por mais vistos)

function renderContent(newsArray, containerId, classStyle, type) {
//about the json above, reorganize the array putting the news with more views first
newsArray.sort((a, b) => {
return JSON.parse(b).views - JSON.parse(a).views;
});
let render = '';
 
 newsArray.forEach(item => {
 const news = JSON.parse(item);
 console.log(news);
 let newsImage = news.image;
 
 if (news.image != '') {
 if (window.innerWidth < 400) {
 newsImage = news.image.replace('w_0_', 'w_300_');
 } else if (window.innerWidth < 500) {
 newsImage = news.image.replace('w_0_', 'w_500_');
 } else if (window.innerWidth < 700) {
 newsImage = news.image.replace('w_0_', 'w_700_');
 } else {
 newsImage = news.image.replace('w_0_', 'w_700_');
 }
 
 if(type == "card"){
 render += `
 <div class="col-12 col-lg-3">
 <a title="Leia mais sobre ${news.title}" href="${news.pubUrl}" class="cardBlog">
 <picture>
 <source media="(min-width: 400px;)" srcset="${news.image.replace('w_0_', 'w_300_')}">
 <source media="(min-width: 500px;)" srcset="${news.image.replace('w_0_', 'w_500_')}">
 <source media="(min-width: 700px;)" srcset="${news.image.replace('w_0_', 'w_700_')}">
 <img src="${newsImage}" alt="Imagem principal de ${news.title}" title="Imagem principal de ${news.title}" loading="lazy"/>
 </picture>
 <div class="textBlog">
 <h3 class="newsTitle ${news.tagTag}">${news.title}</h3>
 <p class="newsSubTitle">${news.subtitle}</p>
 <p class="newsTime">`+dateTimeConvertForReadability(news.date, news.time)+` - Em <span class="${news.tagTag}">${news.tagName}</a></p>
 </div>
 </a>
 </div>`;
 }
if(type == "listing"){
 render += `
 <a title="Leia mais sobre ${news.title}" href="${news.pubUrl}">
 <div class="row alignCenter mt-3 mb-3">
 <div class="col-4 col-sm-3">
 <picture>
 <source media="(min-width: 100px;)" srcset="${news.image.replace('w_0_', 'w_100_')}">
 <source media="(min-width: 200px;)" srcset="${news.image.replace('w_0_', 'w_200_')}">
 <source media="(min-width: 300px;)" srcset="${news.image.replace('w_0_', 'w_300_')}">
 <img src="${newsImage}" alt="Imagem principal de ${news.title}" title="Imagem principal de ${news.title}" loading="lazy"/>
 </picture>
 </div>
 <div class="col-8 col-sm-9">
 <div class="textBlog">
 <h3 class="newsTitle ${news.tagTag}">${news.title}</h3>
 <p class="newsTime">`+dateTimeConvertForReadability(news.date, news.time)+` - Em <span class="${news.tagTag}">${news.tagName}</span></p>
 </div>
 </div>
 </div>
 </a>`;
 }
 }
 });
 
 if (render !== '') {
 const listNewsContainer = document.getElementById(containerId);
 listNewsContainer.innerHTML = '';
 listNewsContainer.insertAdjacentHTML("beforeend", render);
 }
 }