Randomizing WordPress Custom Post Type Sorting Through Them Without Page Refresh

Question

So in essence, we have a custom post type to create quotes – we can pull them up and randomize on page refresh normally, however when it comes to getting them to refresh to a new random quote, every say, 10 seconds, it doesn’t seem to want to work.

The solution we came up with was to make the WP_Query, pull the whole list of quotes, then convert them to json for javascript to handle the randomizing without refresh, but javascript isn’t my strong suite and it’s tripping up the process.

The other part I haven’t quite figured out is how to pass an ACF field into json for javascript to parse.

Here is the code:


'quotes',
'posts_per_page' => -1
);

$quote_pull = new WP_Query( $args );

?>

var post_info = posts); ?>;

/assets/js/quotes.js">

-

(function() {
console.log('Loaded');
});
getQuote();

And finally, the JS:
function quoteRandomizer(){
var randomNumber = Math.floor(Math.random() * (post_info.length));
var quoteText = post_info[randomNumber].the_quote;
var quoteName = post_info[randomNumber].post_title;
document.getElementById('quoteShowText').innerHTML = quoteText;
document.getElementById('quoteShowName').innerHTML = '-' + quoteName;
const text = document.querySelector(".quoteEffect");
const strText = text.textContent;
const splitText = strText.split("")
text.textContent = "";
for(let i = 0; i " + splitText[i] + "";
}

}

function getQuote(){
quoteRandomizer();
setInterval(() => {
quoteRandomizer()
}, 1000);
}

0
, , Frank 1 year 2020-07-23T02:10:41-05:00 0 Answers 30 views 0

Leave an answer

Browse
Browse