Adding a knockout.js data binding on the balance template • dashed-slug.net

Tagged: knockout

This topic has 5 replies, 2 voices, and was last updated 2 years, 10 months ago by Anonymous.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 10, 2022 at 2:13 am #11452

Anonymous
Inactive

so i am using this shortcode

[wallets_balance]

but i want to be able to add a button under this shortcode populated from the selected option, so if it is BTC i want the button to add ?symbol=BTC&balance=1.00222 to it

i have tried all sorts of ways to get to that option but knockout doesn’t give a ID or Name that i can check with javascript to see changes to it.

i have tried to get the info from <label class=”coin”> and still no avail.

February 10, 2022 at 8:00 am #11453
alexg
Keymaster
Hello,

This would be so much easier if you were working on wallets6, but unfortunately it’s not ready for release just yet.

Oh well, I guess you could do this:

<a class="button" data-bind="attr: { href: '?symbol=' + selectedCoin() + '&balance=' + currentCoinBalance() }">Button!</a>

The mistake I did in the past is that in wallets 5.x the UI JavaScript is a big bunch of spaghetti code (wallets-ko.js). I have since changed the templates to make everything clear and self-contained and extendable. You’ll see 🙂

In any case, make sure you make your changes in a theme or child theme. The documentation explains how in: Frontend -> Template Modifications -> Modifying markup. TL;DR, you should copy balances.php to wp-content/themes/YOURTHEMEORCHILDTHEME/templates/wallets/balances.php and do your changes there…

And if you do need to run any javascript on the UIs, you should run it after the data loads, on the wallets_ready bubbling event. So, to hook to that event, you would do:
```
	jQuery( 'body' ).on( 'wallets_coins_ready', function( event, coins ) {
		// TODO do your thing here!
	} );
```
Hope this helps.
February 10, 2022 at 9:33 pm #11455
Anonymous
Inactive
i was actually planning it outside of the plugin.

so i would show the balance and under it
```
jQuery( 'body' ).on( 'wallets_coins_ready', function( event, coins ) {
		
        CODE HERE TO SHOW THE BUTTON  IN A <SPAN> TAG

	} );
```
I am going to try with info you added above and follow up with it works, and maybe need a little more assistance

yeah that knockout code is tough to decipher lol
February 10, 2022 at 10:16 pm #11456

Anonymous
Inactive

oh wait that does not alert me on change 🙁 it did work on load the wallets tho,

im serious when i say it is tough to get that info from knockout without having a “ID” or “NAME” and its not added in there for some reason, which i find odd. If it had that i could get that info and when it changes

thanks and sorry for the hassle,

February 11, 2022 at 7:40 am #11457
alexg
Keymaster
If you want to hook into an event, you could subscribe to the observable for the selected currency:
```
wp.wallets.viewModels.wallets.selectedCoin.subscribe(
  function() {
    let coin = wp.wallets.viewModels.wallets.coins()[ wp.wallets.viewModels.wallets.selectedCoin() ];
    let html = '<span class="button" href="?symbol=' + coin.symbol + '&balance=' + coin.balance + '">' + coin.name + '</span>';
    console.log( html);
  }
);
```
Not sure if this is what you are looking for. Again sorry, I know all of this is confusing, which is why I am currently improving it.
February 12, 2022 at 10:02 pm #11462

Anonymous
Inactive

worked perfectly thanks!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.