Adding a knockout.js data binding on the balance template

[Anonymous]

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.

[alexg]

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.

[Anonymous]

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

[Anonymous]

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,

[alexg]

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.

[Anonymous]

worked perfectly thanks!

[Author]

Posts