Feature Request: Component Based Shortcodes for Page Builders

[Anonymous]

We need better Shortcodes catered to building custom layouts via page builders like Elementor.

By better, I mean more modular/component based.

Example, I should be able to add a Crypto Balance shortcode to an Elementor header widget and style it accordingly to have it look like the following: http://prntscr.com/t7l9y7 .

Instead, it looks like the one marked with red. The worst part is, Elementor doesn’t style this shortcode at all AND it adds additional data that ruins
any custom design attempts.

By ‘additional data’ I mean things like ‘Balance:’, ‘BTC’, and ‘USD: 0.00’.

Another example, I should be able to use a shortcode to generate the User’s deposit address ONLY.

Currently, you cannot do so.

Rendering a deposit shortcode displays the coin type, qr code, destination address label, and ugly clipboard icon.

The only option in this instant (at least in my case, since I’m a newb & not a web developer) is to use CSS to hide all this crap that’s ruining my
attempt at creating a custom UI via a page builder.

This can be resolved by creating shortcodes or arguments that allows one to display JUST one particular component.

Meaning, JUST the deposit address. Or, JUST the user’s total balance. Or, JUST the QR Code…. I think you get my point.

========

TL;DR

Due to all the shortcodes being ‘bundled together’ with extra data, you can’t create custom layouts via pagebuilders.

The ‘Coin Balance’ (0.12324) , ‘Coin Type’ for that balance (BTC) , and Amount the currency is in USD ($9,3434) needs seperated so Users
who aren’t coders can properly create layouts in Page Builders. (And the output actually needs to be styled! It’s currently overwriting my Page Builder Styles)

Additionally, there aren’t enough CSS classes for things like forms.

I’m pretty sure that I can’t style the Deposit form differently from the Withdrawal form since there isn’t any CSS classes to differentiate them.

This is a problem because the Deposit form isn’t made to input data, but the Withdrawal form is…

[alexg]

Hello,

You bring up a valid point.

1. Since there is now a proper templating system, I intend to create new templates that output the raw values for things like the currenct balance. Unfortunately this is not possible for more complex output, like the list of past transactions, which has to be a table in one way or another. I will let you know on this thread when I implement this.

2. You are correct that you need to know some CSS. However, if you do not, then I would argue that this is a problem. On the one hand, themes will never be similar in terms of CSS, so I can’t provide one set of rules that works every time. And on the other hand, how are you going to offer a website that handles peoples money if you are not a web developer? The plugin and its extensions are aimed at developers. If you wish to learn CSS, start by learning the selectors, then go on to read about selector specificity. Unfortunately there’s no way around this.

3. It’s a good idea for me to look into providing editor blocks (I will not be looking into Elementor specifically, only WordPress Gutenrberg blocks). As I am currently very busy, I cannot undertake any new development at the moment. This should not be a big problem, since you can always enter shortcodes as blocks.

4. The data is also available in its raw form. Look into the JSON-API for details.

5. It’s not true that there are no classes to differentiate between deposits and withdrawals. The selectors are .dashed-slug-wallets.withdraw and .dashed-slug-wallets.deposit. Use these to focus your rules on one form or the other.

In conclusion, please learn some CSS because it’s impossible for me to provide a set or rules that works for everyone everytime, and because you want to know this if you are building websites. I will notify you again here when I release shortcode templates with plain value outputs.

with regards

[Anonymous]

1. That’s exciting! I’ll be on the look out for the newly implemented templating system.

============================

2. “And on the other hand, how are you going to offer a website that handles peoples money if you are not a web developer? The plugin and its extensions are aimed at developers. If you wish to learn CSS, start by learning the selectors, then go on to read about selector specificity. Unfortunately there’s no way around this.”

A: That’s a fair observation.

For starters, I don’t plan on running a full node wallet, but the CoinPayments cloud wallet.

Additionally, my skills are more in the linux system admin. realm at the moment. Meaning, I’m not completely oblivious to server security protocols etc.

Also… once this project is ready to go live, I’ll be hiring people much smarter than me in this space to manage operations anyways, ha.

As for CSS… I know a little CSS.

Enough to change the styles of HTML elements (background color, border, font, box-shadow etc.), but not enough to create any layout I want with things like Flex, Grid, etc. (it’s currently being learned in my free time, ha.) and display the data in some newly made template through something like PHP.

I already know about selectors, specificity, etc. etc.

My primary lack of knowledge in CSS is basically the #1 thing I need to know to truly utilize it properly (anything to do with creating Layout).

After that, then I’m back to trying to figure out how to use this useless Javascript, PHP, and Python syntax I know… lmao.

But, that’s another story entirely.

And, I could tell that this plugin was for Developers the moment I realized that I would need to hack away at CSS, PHP etc. to change the default templates into something more aesthetically pleasing.

I’ve been spoiled by plugins giving me the raw values in shortcodes for use in Page Builders, lol.

Well, almost… still doesn’t get past the fact that I need to finish learning Javascript for more dynamic layouts since these Page Builders are slacking on enabling me to do so without code.

============================

3. I was about to say… blocks aren’t even needed with shortcodes. The only problem at the moment is the fact that the shortcodes don’t output raw values and can’t be styled in Elementor for some reason.

============================

4. As a wannabe web developer in training, this is useless to me since I currently do not have the knowledge to utilize JSON myself.

However, that’s good to know for future use when I’m not such a newb, or if I want to hire a developer to utilize it him/herself.

Initial questions that come to mind as a newb:

1. How do I connect and grab/access the desired data?

It says that the plugin ‘exposes the JSON APIs over HTTP’.

OK, but how do you actually connect to said APIs over HTTP with X programming language?

I’m guessing that it has something to do with some magical function/method I’m not aware of & a URI like ‘/wallets/api3/get_coins_info’ to get some response.

But, what function/methods you actually use to connect, and what you do with the response and what the response could contain is beyond me… lol.

2. Once grabbed/accessed, how do I display said data in my template?

3. Am I even asking the right questions that will enable me to get the desired result, or am I more oblivious about what’s actually going on than I thought? lmao.

*Extra questions that come to mind*

** Without documentation, how would one know which URIs to use, or if an API is available in the first place to utilize?

Is there some special way to find out without documentation?

Additionally, without documentation… how do you know what is available to use from X API?

If I request X URI in my code, will the response be filled what is available for use?

So many questions that I have no answers to… sigh.

============================

5. Really!? I didn’t see any when I looked. I’ll have to check it out again. Thanks.

[alexg]

Hello,

First of all, if you are concerned with how to display data in your own HTML markup, the best way to do this is by overriding the templates. Since 5.0.0 this is done in a way that is standard to WordPress, i.e. you copy the template files and hack the markup, placing the new files under your theme or child theme. For more information please see the relevant release notes, and the accompanying documentation.

Regarding your question about API docs: There are two major APIs to the plugin, the PHP API and the JSON API.

The plugin’s documentation is found in the bundle download of the plugin, which you can get here. The same is true for the Exchange extension, which also has a bundle download. Both bundles include a PDF document which includes documentation on the JSON APIs.

Additionally, there are instructions on how to communicate with the API using a bearer token from the command line using curl. Instructions are given in the JSON API page and in the documentation. The user can display or refresh their bearer token using the [wallets_apikey] shortcode.

Using the JSON API you can construct any kind of interface including web interfaces or standalone applications. Additionally, you can call the JSON API from any programming language where you can do HTTP requests and parse JSON.

Have a look at the docs and let me know if you have any questions.

I have began dev and will be releasing plaintext shortcode outputs over the next few days, but this can only be implemented for shortcodes that output simple values. My recommendation to you is that you first look into the templating system, before attempting to hack a new solution using the JSON API. But it’s up to you.

with regards

[alexg]

Hello,

Version 5.0.6 is out, and has several new shortcode templates and a few new shortcodes. The Shortcode documentation and the accompanying PDF document have been updated to reflect the changes. It is now possible to output some values as pure text. See the “Textonly” and “Static textonly” paragraphs in the shortcode documentation.

If you need something more specialized in terms of HTML templates, you can always override the templates yourself, as discussed above (see the release notes for 5.0.0 for how to do this.)

Hope this helps. Let me know if you have any further questions on this topic.

with regards

[Anonymous]

Thank you for the update!

However, a few of these shortcodes are still too opinionated to be used in creating an interface.

For example, the wallet balance shortcode assumes that I want to display the coin type before it.

‘BTC 0.00000000’

When really, I just want the balance ‘0.000000’ to be outputted.

The coin type for the current balance should be able to be displayed separately from the actual balance so that I have more options on where/how I’d like to display it.

Additionally, the wallet account value shortcode does the same thing~

It assumes that I want ‘USD’ before the balance, but I don’t.

Last thing (just a minor inconvenience, and more for just bringing to your awareness), the shortcode styles are overwriting the Page Builder styles.

Yes, I can use CSS to style the Shortcodes, but still… it’s annoying, lol.

[alexg]

Hello,

If you need finer control over the output, you should override the templates as described above. It’s really very easy and you get very fine control over what is printed. Let me know if you need help with this.

Alternatively you can get the information from the JSON API, or the knockout.js observables. For example, the BTC balance is in wp.wallets.viewModels.wallets.coins()['BTC'].balance.

You mentioned a problem with CSS rules and a page builder. Please open a new thread about this, and mention which builder you’re referring to and which styles. Thank you.

with regards

[Author]

Posts