Open extra topbar

Adding a knockout.js data binding on the balance template

I reply to all queries on the forums and via email, once per day, Monday to Friday (not weekends).

If you are new here, please see some information on how to ask for support. Thank you!

Adding a knockout.js data binding on the balance template

dashed-slug.net Forums General discussion Adding a knockout.js data binding on the balance template

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #11452
    dynamitemedia
    Participant

    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.

    #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.

    #11455
    dynamitemedia
    Participant

    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

    #11456
    dynamitemedia
    Participant

    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,

    #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.

    #11462
    dynamitemedia
    Participant

    worked perfectly thanks!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.