Me gustaría agregar automáticamente un esquema de preguntas frecuentes según el contenido de un div con id #content en una página web.
No soy desarrollador, construyo en webflow y aprendo sobre la marcha cada vez que necesito un script.
Hasta ahora, aquí es donde obtuve:
var questions = document.getElementsByClassName("auto-question"); var answer = document.getElementsByClassName("auto-answer"); var schema ={ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [] } for (var i = 0; i<questions.length; i++){ var new_schema = { "@type": "Question", "name": questions[i].innerText, "acceptedAnswer": { "@type": "Answer", "text": answer[i].innerText } } schema.mainEntity.push(new_schema); } var script = document.createElement('script'); script.type = "application/ld+json"; script.text = JSON.stringify(schema); document.querySelector('body').appendChild(script);Funciona, pero ahora mi problema es que quiero agregar la clase .auto-question y .auto-answer automáticamente.
Este es un ejemplo de la página en la que estoy tratando de trabajar: crédit impôt recherche .
Mi idea es el siguiente proceso:
Una vez más, no soy un desarrollador, juntar fragmentos de código está bien, pero escribir uno propio está fuera de mi alcance.
Espero que puedas ayudar, muchas gracias
Su enfoque es bueno en general, pero no creo que sea apropiado en este caso. No funcionará así, porque no se ajusta a la estructura HTML dada, debe adaptarse a esa estructura.
Como todos los elementos son hermanos, un enfoque sería obtener todos los elementos en el contenedor de preguntas frecuentes y luego recorrer cada elemento y usar la etiqueta H2 como indicador para construir un esquema de pregunta. Agregar clases adicionales no tendría sentido, ya que necesitaría agregar clase a cada elemento ...
Entonces, al leer una etiqueta H2, construya un esquema, envíelo a las Preguntas frecuentes, hasta que termine.
Aquí está el código, reemplace su código de preguntas frecuentes con este:
window.addEventListener('DOMContentLoaded', () => { // setup selectors const snippetsContainer = '.w-richtext'; const questionIndicatorTag = 'H2'; // get the faq container and all nodes const faqHTML = Array.from(document.querySelector(snippetsContainer).children); const schemaFAQ = { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [] }; // data variables to store while looping let questionName = answerText = ''; // loop each element, h2 is a question indicator, other nodes are its answer faqHTML.forEach((el, i) => { // check question tag indicator if (el.tagName === questionIndicatorTag) { // new question, add previous question to the faqs, reset // check if index indicates it's not the first question if (i > 0) { // add to the FAQ schemaFAQ.mainEntity.push({ "@type": "Question", "name": questionName, "acceptedAnswer": { "@type": "Answer", "text": answerText } }); // reset data questionName = answerText = '' } // new question questionName = el.innerText; } else { // add answer answerText += el.innerText + '<br>'; } // all done if (i + 1 === faqHTML.length) { schemaFAQ.mainEntity.push({ "@type": "Question", "name": questionName, "acceptedAnswer": { "@type": "Answer", "text": answerText } }); } }); // insert const scriptFAQ = document.createElement('script'); scriptFAQ.type = "application/ld+json"; scriptFAQ.text = JSON.stringify(schemaFAQ); document.getElementsByTagName('head')[0].appendChild(scriptFAQ); });