Integrating Avia Layout Builder with AngularJS

Hi,
I’d like to start of by saying thank you to the valiant effort that you (and the team) have put in into making this theme incredible. The amount of work that you guys have done is astounding and it really shows with your continuing support and updates!

This is my first time using this theme and I’ve spent a great amount of time during the last few days learning the architecture and the various ways that you’ve allowed this theme to be extended and customized. I’ve created a child theme and have prepped everything I need in order to do the following, however, I was wondering if you could provide some guidance as to where I should start in order try and accomplish the following:

I am trying to add another (custom) Content Element into your Avia Layout Builder that will allow me to input some data and have that data stored in the wp_db as a JSON object rather than a shortcode. Reason being is I’d like to have the ability to use this element as data entry (as opposed to layout) and then use the WP JSON API to gather the data and present it via AngularJS on the front-end. I’ve created my own /shortcode/ dir in my child theme, renamed the element to my desired name but am now trying to find where I can modify the way the content looks as it makes its way into the db. More specifically, can I modify what that content looks like (JSON object) for this custom page only? Can this be done with a child theme or is shortcode the only way to go when using the Avia Layout Builder?

In other words, let’s say I make a JSON request, my current output looks something like this when creating a pricing table using the Avia Layout Builder:

post: {
content: '[av_table purpose='pricing' caption='' responsive_styling='avia_responsive_table']
[av_row row_style=''][av_cell col_style='']Label 1[/av_cell][av_cell col_style='']Label 2[/av_cell][av_cell col_style='']Label 3[/av_cell][/av_row]
[av_row row_style=''][av_cell col_style=''][/av_cell][av_cell col_style=''][/av_cell][av_cell col_style=''][/av_cell][/av_row]
[av_row row_style=''][av_cell col_style=''][/av_cell][av_cell col_style=''][/av_cell][av_cell col_style=''][/av_cell][/av_row]
[/av_table]'
}<code></code>

Which files would I need to move over to my child theme in order to customize my custom pricing table to spit out something like this instead:

post: {
content: {
row: {
   0: {
cell: {
    0: 'Label 1',
    1: 'Label 2',
    3: Label 3'
}
}
}
}
}

I stripped out a whole bunch of the other info that comes back with a JSON request for spacing, but is this even possible to do with the a child theme and the avia layout builder without heavily modifying the original theme?

Thank you!

• This topic was modified 10 years, 3 months ago by idev.ehill.