[Resolved] Changing the "connect an existing post" button in the relationship fields

[Author]

Posts

[BrandenT2154]

I should preface this by saying I know customization on this level is probably outside of the scope of the support offered here. But I am hoping for some direction (rather than a real solution). If not, I understand.

The Problem:

I am using a toolset relationship between 2 of my posts with an intermediary post type.

In my use, I will have other users use the back end to input posts with relationships. In this case, the "rep" user role will be able to create their own post for the 'rep' custom post type, and using the toolset interface, connect existing manufacturers, or add new manufacturers.

When they do so, at the bottom of the edit screen they will see the below screenshot to add associated manufacturers.

[see screenshot 1]

The problem with this is that I think it's confusing for the average user. You see, this is a directory site, so in general I want the user to click "connect existing manufacturer" to see if there is one already existing that they want to connect so that they can be listed together. They should only click "add a new manufacturer" after they see that the manufacturer they want to connect is not on the list. However, most users don't know this, and will click "add new manufacturer" first because that button makes more sense to them than "connect existing manufacturer" because they don't understand what the latter button means.

The only real solution I can think of would be to hide the "add new manufacturer" button from this screen and add it to the popup box that appears when they click "connect existing manufacturer" [see screenshot 2] or somewhere else.

My developers inform me that there are no hooks for this area, and they believe that javascript is not an option "because they contain dynamic strings inside them that are generated inside twig. (for example: value="{{ strings.misc.addNew }}")" reference this line of toolset code: hidden link

Do you see any way of my editing or changing these buttons in any way? even if it is not exactly how I describe in screenshot 2?

[BrandenT2154]

My developer was able to create a workable solution in the end. He essentially removed the 'add new post' from the edit screen and added a new button to the 'connect existing' popup. hidden link

I know a few others have asked similar things, so here is the code for anyone interested. it will need to be edited to work for your fields/posts types. it only works to add a new related post with post title only, since that's all my use case requires. but i suppose it wouldn't be very hard to add more fields.

P.s. my two cents is that this is how the default toolset UX should be. not the two buttons. this is a much more obvious workflow.

// MANIPULATE "ADD NEW MANUFACTURER" POPUP
function repPopup() {
global $post_type;
global $current_user;

if($post_type=='rep' ){

?>
<div id='repCustomPopup'>
<h3>Add a new Manufacturer</h3>
<form action="" method="post" class="ajax" enctype="multipart/form-data" id="enqform">

<input type="text" id="manufacturer_name" name="manufacturer_name" placeholder="Enter manufacturer name" />
<input type="submit" id="submit_manufacturer_name" value="Add" /> <input type="button" id="close_repCustomPopup" value="Close">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce( 'form-nonce' );?>" />
</form>
<div id="res_msg_form"></div>
</div>
<script>
function addNewRelManufacturer() {
jQuery("#repCustomPopup").show();
jQuery("#submit_manufacturer_name").prop("disabled", false);
}
jQuery( document ).ready(function() {
jQuery('input[value="Add new Manufacturer"]').remove();
jQuery("#close_repCustomPopup").on("click",function(){
jQuery("#repCustomPopup").hide();
});
});
jQuery( '#enqform' ).on( 'submit', function(e) {
jQuery("#repCustomPopup input").prop("disabled", true);
var manufacturer_name = jQuery("#manufacturer_name").val();

jQuery.ajax({
type: "POST",
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: {action: 'new_rel_post', manufacturer_name:manufacturer_name},
error: function(jqXHR, textStatus, errorThrown){
console.error("The following error occured: " + textStatus, errorThrown);
jQuery("#repCustomPopup input").prop("disabled", false);
},
success: function(data) {
console.log(data);
jQuery("#res_msg_form").html(data.message);
jQuery("#res_msg_form").show();
jQuery("#repCustomPopup input").prop("disabled", false);
if(data.status == "1"){
jQuery("#submit_manufacturer_name").prop("disabled", true);
}
}
});
return false;
});
jQuery( document ).ajaxComplete(function( event, xhr, settings ) {

if(settings.data.includes("related_content_action=search_related_content") && settings.data.includes("relationship_slug=rep-manufacturer") && settings.data.includes("post_type=manufacturer") ){

var responseData = JSON.parse(xhr.responseText);
if(responseData.success === true){
jQuery("#new_manuf_note").remove();
jQuery('.types-new-relationship-block[rel="post"]').prepend('<div id="new_manuf_note"><p>Manufacturer not in the list?</p><input type="button" class="button" value="Click Here to add a manufacturer" onclick="addNewRelManufacturer();"> </div>');

}
}

});
</script>
<?php
}
}

add_action( 'admin_footer', 'repPopup' );

// handle ajax front-end new post submit
add_action( 'wp_ajax_new_rel_post', 'tb_11445_ajax_handler' );
add_action( 'wp_ajax_nopriv_new_rel_post', 'tb_11445_ajax_handler' );
function tb_11445_ajax_handler() {

$post_name = wp_strip_all_tags( $_POST['manufacturer_name'] );
if( $post_name && strlen($post_name) >= 3 ){

$post_data = array(
'post_title' => $post_name,
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_type' => "manufacturer"
);

$new_post_ID = wp_insert_post( $post_data );

$response = array(
'status' => '1',
'message' => 'New manufacturer added! You can now close this and connect to the new Manufacturer',
'new_post_ID' => $new_post_ID
);

header( 'Content-Type: application/json; charset=utf-8' );
echo json_encode( $response );
exit; // important
} else {
$response = array(
'status' => '0',
'message' => 'Name field must have 3 or more characters'
);

header( 'Content-Type: application/json; charset=utf-8' );
echo json_encode( $response );
exit; // important
}

}