Themer Connection not loading data dynamically on Number Counter module for number

#1

Hello everyone,

I have recently started using Themer to make field connections to user meta data. However, I have come across a bug (or maybe just limitation) specifically related to the “Number Counter” module.

I have a certain user meta value that is stored and that I want to read that may change often. I have connected a header, a text field, and even the “Text Before Number” field and it always displays the correct, current number from the user’s meta data. However, when I connect the Number field itself, it never loads the new data after the module is initially saved.

For example, let’s say the number is “700” at the time I save the module. The number countdown will currently be set to 700, and all other connected fields show 700.

If I then, somewhere else, change that number in the user’s meta data to 600, and go back and reload the original page, all of the connection fields update EXCEPT for the number in the Number Counter. It stays at 700.

So, it seems to me that this connected field for “Number” is only reading the connected field data at the time the module is saved, and NOT again when the page is loaded like it should.

Any chance that a) there is a way for this field to load dynamically like all of the others or b) a workaround anyone can suggest?

Hopefully the problem description is clear, please let me know if I can provide any other information.

Kevin

#2

I have the same problem. And it’s been that way since I started using Themer.

Usually requires you to edit the page using BB and publish it again, which kinda defeats the purpose of having the content load dynamically…

If anyone has a workaround, or if the BB team have any suggestions, I’d be very interested, too!

#3

Hi Jon,

Thanks for chiming in! Glad to know I’m not crazy or asking for something unreasonable. :slight_smile:

I think if the themer connection is offered, it should work consistently like it does everywhere else, or it should be removed if it can’t work as expected.

Kevin

#4

I suspect the module uses js and the number is written into the layout js which is then written to a file.
I bet if you change the connection number then cleared the bb cached files it will work.

#5

Hello,

Clearing the BB Cache doesn’t work. The only thing that causes the number to change to the newer value is editing and re-saving the module in Builder. A cursory look at the code suggests that the number is only read when the module editor is open, and then whatever that number is at the time gets saved to the configuration for that module.

Kevin

#6

Thanks Kevin, You suggestion matters to me because it really helpful for me.

#7

And just to emphasize this point - if (in theNumber Counter module) you connect “Text Before Number” and “Text After Number” to the same user_meta field as “Number,” those text fields do update with every page load to the current value from the user_meta.

So, the text fields are being dynamically connected, but the Number field is not.

#8

Yes, because those fields are added in PHP. The number is done in JS and the browser caches those files.

CloudApp

We might be able to move that one VAR into PHP with localize script, but if the html is cached as well it wont help. t the end of the day the JS is cached in the browser.

#9

pross,

Thanks for the reply. I would argue then that the Number field should not have a themer connection because it does not work consistently with how other themer connected fields work. Would have saved me a lot of aggravation trying to figure out what was going on. :slight_smile:

Also: I’m working with user_meta, not post_meta. And I tried clearing the BB cache, and that does not work with user_meta.

I have caching disabled on this page that I want to use the dynamic Number Counter on because it has a lot of dynamic content, so that wouldn’t be an issue.

Kevin

#10

user_meta/post_meta the data source does not matter.

The module works like this, its quite simple. When the JS does not exist, or you have just added the module, it gets the number from the field connection via frontend.js … that gets combined into the main layout.js file.

If you click the clear cache button under tools, the js file will be nuked, and then the next pageload the module will do the exact same thing again, fetch the current number from the connection and add it to the layout js file.

At the same time your browser is caching the file, and any other caches you have.

Open the dev tools, turn off the browser cache when the tools are open, and you’ll see it works

CloudApp

#11

pross,

OK, I understand. I disabled my browser cache and server cache and I can see now that clearing the Builder Cache does update the number.

So my next question is, is there a way to force the Beaver Builder Cache to clear on a page-specific basis? Or would that clear it for all pages every time it’s loaded for the one page?

I guess the number being loaded in JS is because it counts and changes, whereas the text is just displayed, so it can be loaded in PHP. Oh well, it just seems like this is not going to be a solution for what I need to do here. :upside_down_face:

Kevin

#12

go to the modules/number folder.

Open numbers.php

On line 33 find wp_add_inline_script under that line add:
wp_localize_script( 'jquery-waypoints', 'number_module_' . $this->node, array( 'number' => $number ) );

Now open js/frontend.js in the numbers module folder

Line 17 that defines the number to be used, change it to
window["number_module_" + settings.id].number;

#13

pross,

Oooh exciting! THAT WORKS! Is this a hack I’ll have to re-apply or will this become part of BB?

Do you have a trick up your sleeve for the circle animation? It doesn’t get loaded dynamically so the “max” value doesn’t update and it causes the circle not to animate all the way around. If not, I can live without the circle.

THANK YOU!! I know this is a little thing but I’m pretty excited about it.

Kevin

#14

This hack works for my purposes:

	this.max                 = window["number_module_" + settings.id].number;

Just load the max to always be the same as the number.

A more elegant approach might be to have logic that if the max is hard-coded to “0” to make max equal to the number itself, but I’m not sure there’s a good way to advocate for that to be standard behavior.

#15

numbers.zip (7.9 KB)

Try this modded numbers module, ive also added connection support for the max number :slight_smile:

#16

pross,

WOW! I love it. This is great! I have a way to use different number and max values so being able to load each dynamically is FANTASTIC.

Just for some context, here’s how I’m putting it to use:

Full circle represents total number of days to study between the start and exam date, so every day the circle will shrink a little and count down a day. (Every time the page loads, the custom template sets user_meta data with the correct number of days.)

Question: will this be new standard BB capability or do I need to re-apply the customized module after every update?

Again, thank you! This really makes my day - and my boss’s. :wink:

Kevin

#17

Well ive kind of milestoned it as part of the module overhaul program, so you should really add it to your child theme for now so plugin updates do not nuke it.

Thx for testing tho :slight_smile:

#18

Oh, I can add it to my child theme? What folder should I put it in?

I have my theme in bb-theme-child, and I have your “numbers” folder. What subfolder structure do I need to create?

Thanks for the final bit of hand-holding. :slight_smile:

Kevin

#19

Its easy check out the docs here:

https://kb.wpbeaverbuilder.com/article/624-cmdg-18-override-built-in-modules

#20

Done. Thanks!

Really good support, again, thank you! :star_struck:

Kevin

1 Like