I've developed a plugin using WPBakery's API that basically allows the user to select a post type, along with a taxonomy to be displayed on the frontend. What I'm trying to achieve is the ability to display additional fields dynamically, depending on which parent taxonomy is first chosen.
For example, I display all parent taxonomies in a multi-dropdown field. Depending on which taxonomies are chosen, I then want to display additional dropdowns with the children of those taxonomies as choices.
At this point, I feel my only solution is to output a ton of dynamically named fields (as in every child term of every parent taxonomy), and use some JavaScript to show/hide those selected as dropdowns. This seems like a terrible implementation, with excessive HTML in the DOM (although hidden).
I've also considered injecting params into the DOM, but I'm not entirely sure how to handle them on the backend, since they're likely not registered.
There is a param_group, but that seems to be used for repeater fields, rather than dynamic population.
My code looks like this:
function YYY() {
add_shortcode('YYY', 'YYY');
$markup = 'YYY';
$types = get_post_types([], 'array');
$post_types = array("All");
foreach($types as $type) {
$post_types[] = $type - > name;
}
$taxonomies = get_taxonomies();
foreach($taxonomies as $taxonomy) {
$post_taxonomies[] = $taxonomy;
}
vc_map(array(
"name" => __("YYY"),
"base" => "YYY",
"category" => __('Content'),
"custom_markup" => $markup, // @TODO how do we access shortcode's attributes here to display in bakery grid
"params" => array(
array(
'type' => 'dropdown_multi',
'heading' => __('Select a post type', VAE_TEXT_DOMAIN),
'param_name' => 'post_types',
'value' => $post_types,
'description' => __('Select a post type', VAE_TEXT_DOMAIN),
'admin_label' => false,
'save_always' => true,
),
array(
"type" => "dropdown_multi",
"holder" => "div",
"class" => "",
"heading" => __("Count"),
"param_name" => "count",
"value" => array("All", "3", "6"),
"description" => __("How many tiles to show")
),
array(
"type" => "dropdown_multi",
"holder" => "div",
"class" => "",
"heading" => __("Select Taxonomy(ies)"),
"param_name" => "taxonomies",
"value" => $taxonomies,
"description" => __("Post with selected taxonomies will be shown")
),
array(
"type" => "dropdown",
"holder" => "div",
"class" => "",
"heading" => __("Taxonomies Operator"),
"param_name" => "taxonomies_operator",
"value" => array("IN - posts which match ANY selected taxonomy", "NOT IN - post which DO NOT match ANY selected taxonomy", "AND - posts which match ALL selected taxonomy"),
"description" => __("Posts with selected Tags will be shown")
), //@TODO how do I dynamically add dropdowns here with key/value pairs dynamically populated by above taxonomies dropdown
array(
"type" => "dropdown",
"holder" => "div",
"class" => "",
"heading" => __("Header Style"),
"param_name" => "header_style",
"value" => array("h2", "h3", "Visual Style/Color"),
"description" => __("")
),
array(
"type" => "dropdown",
"holder" => "div",
"class" => "",
"heading" => __("Read More Text"),
"param_name" => "read_more_text",
"value" => array("Read More", "Learn More", "Download"),
"description" => __("")
),
array(
"type" => "dropdown",
"holder" => "div",
"class" => "",
"heading" => __("Link Target"),
"param_name" => "link_target",
"value" => array("Self", "Blank"),
"description" => __("")
),
array(
"type" => "dropdown",
"holder" => "div",
"class" => "",
"heading" => __("Order By"),
"param_name" => "order_by",
"value" => array("Date"),
"description" => __("")
),
array(
"type" => "dropdown",
"holder" => "div",
"class" => "",
"heading" => __("Sort By"),
"param_name" => "sort_by",
"value" => array("ASC", "DESC"),
"description" => __("")
),
array(
"type" => "checkbox",
"holder" => "div",
"class" => "",
"heading" => __("Front-End Filter (Only shows chosen taxonomies)"),
"param_name" => "front_end_filter",
"value" => array("Show" => "show", "Hide" => "hide"),
"description" => __("")
),
array(
"type" => "checkbox",
"holder" => "div",
"class" => "",
"heading" => __("Pagination"),
"param_name" => "pagination",
"value" => array("Show" => "show", "Hide" => "hide"),
"description" => __("")
),
array(
"type" => "checkbox",
"holder" => "div",
"class" => "",
"heading" => __("Icon"),
"param_name" => "icon",
"value" => array("Show" => "show", "Hide" => "hide"),
"description" => __("")
),
array(
"type" => "checkbox",
"holder" => "div",
"class" => "",
"heading" => __("Featured Image"),
"param_name" => "featured_image",
"value" => array("Show" => "show", "Hide" => "hide"),
"description" => __("")
),
array(
"type" => "checkbox",
"holder" => "div",
"class" => "",
"heading" => __("Excerpt"),
"param_name" => "excerpt",
"value" => array("Show" => "show", "Hide" => "hide"),
"description" => __("")
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __("Row Class"),
"param_name" => "row_class",
"value" => "",
"description" => __("")
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __("Row ID"),
"param_name" => "row_id",
"value" => "",
"description" => __("")
),
)
));
}
