Upvote with Blitz

[LouisCuvelier]

Hello,

I'm trying to use Upvote and Blitz. So, I need to pull vote count with JS.

How can I perform this ?

[lindseydiloreto]

UPDATE:

Don't do any of the advice I gave previously. Go directly to the next comment and do exactly what Ben is recommending.

UPDATE UPDATE:

Upvote 2.1 has been released, and Blitz + Upvote will now magically work perfectly together! There is nothing to configure, it "just works".

https://www.doublesecretagency.com/plugins/upvote/docs/caching

[bencroker]

I don't expect that to work, given that {{ craft.blitz.csrfParam() }} returns JavaScript code itself. What I would suggest is something along the lines of the following:

<script>
// Get csrfTokenName
var xhr = new XMLHttpRequest();
xhr.onload = function () {
    window.csrfTokenName = this.responseText;
};
xhr.open("GET", "/actions/blitz/csrf/param");
xhr.send();

// Get csrfTokenValue
var xhr = new XMLHttpRequest();
xhr.onload = function () {
    window.csrfTokenValue = this.responseText;
};
xhr.open("GET", "/actions/blitz/csrf/token");
xhr.send();
</script>

Provided that runs after Upvote's scripts, you should be able to leave everything else as it originally was.

This uses vanilla JS but can be shortened with jQuery which Upvote seems to require.

[lindseydiloreto]

Upvote doesn't require jQuery, it uses superagent to handle the AJAX requests.

Thanks for providing the correct solution! 🙂

[bencroker]

Ah my mistake, looks like a nifty little library!

[LouisCuvelier]

Thanks you two for your answers but I'm not sure to understand.

With Blitz, the problem is not to upvote or downvote. It's to get the actual number of upvotes. So I thought that I can dynamically pull upvotes count on each elements with JavaScript.

Maybe It can helps you to see the concerned page.

[lindseydiloreto]

@LouisCuvelier What code are you running that is causing a specific problem?

You can ignore all of the advice I've given so far. Ben's answer is all that you should need.

[LouisCuvelier]

Sorry not to be clear 😅

Currently, my page is cached with Blitz. Visitors can upvote or downvote elements, but the actuel count of upvotes is not updated (on page reload) due to the cache.

So, as a workaround, I would like to dynamically pull upvotes count to replace the cached value.

[lindseydiloreto]

Actually, I don't believe that your visitors can cast an upvote or downvote. That's the part that seems to be broken.

Which translates to this, according to Google:

Incorrect request Can not verify your data submission.

It's actually kicking up a 400 error, probably because the CSRF token is being cached. I'd recommend following Ben's advice to try to fix it.

[LouisCuvelier]

Sh*t, you're right, I was testing logged in ... I pushed live with Ben's code. Casting upvote or downvote is now working, but, always not updating due to the cache.

[lindseydiloreto]

Ok great. So everything is working now?

[bencroker]

@LouisCuvelier You might want to rethink whether the page you are referring to should really be cached by Blitz. If you want the page's votes to update automatically (which I expect you do), then it makes little sense to cache it. You can exclude it with an Exclude URI Pattern in the Blitz plugin settings.

[LouisCuvelier]

It is working but is there a way to dynamically pull counts with JS ?

UPDATE : @bencrocker I have to cache the page because a lot of image transforms is happening. So I'm searching a way to update votes after page load with JS.

[bencroker]

Image transforms only happen the first time a page is visited. You can load part of the page dynamically using dynamic content tags, which may help.

[LouisCuvelier]

Thanks for your help !

@bencroker, I asked some questions related to your last comment.

[lindseydiloreto]

@LouisCuvelier With the release of Upvote 2.1 today, Blitz & Upvote will now work perfectly together! You don't even need to do anything, they will "just work" automatically.

https://www.doublesecretagency.com/plugins/upvote/docs/caching

Let me know if you have any questions!

[LouisCuvelier]

Amazing ! I ended by building a little module and some JavaScript code to do it with AJAX. But I can put my code into trash 🎉

Thanks !