Because of some great assist right here at stack trade, I’ve constructed a remark part with a dropdown menu that provides comment_meta to the feedback.
I at present have a working filter that makes use of GET to set off an if assertion to question primarily based on this comment_meta information. The factor I do not like is that it refreshes the web page every time you click on a button. I am on the lookout for a solution to filter with out having the web page refresh. I feel I would like Javascript for this.
I’ve arrange two units of buttons. The highest row is my GET buttons, which work, however refresh the web page. The underside row are my javascript buttons. I can get them to filter the textual content WITHIN the feedback, however I might like them to filter the whole contents as a substitute.
For example, for those who go to Madonna’s web page (https://staging3.recordcollectorsoftheworldunite.com/artist/madonna/), and scroll all the way down to the feedback, they do not even present up till you press ‘present all’. When you press “Present All” it appears to be like proper, however once more if you filter, it solely filters the feedback.
Here is 3 footage. First is when the web page masses, how all of the feedback are hidden- I might like “ALL” to routinely be chosen when the web page masses. I attempted <button class="button energetic"> however that should not be the suitable solution to say it.
Here is my feedback.php
<?php
comment_form();
if (have_comments()) : ?>
<div class="container">
<div class="btn-group flex">
<button kind="button" onclick="window.location.href="https://wordpress.stackexchange.com/questions/406332/<?php echo the_permalink();?>/?cmeta=ALL"">SHOW ALL</button>
<button kind="button" onclick="window.location.href="<?php echo the_permalink();?>/?cmeta=BUY"">BUY</button>
<button kind="button" onclick="window.location.href="<?php echo the_permalink();?>/?cmeta=SELL"">SELL</button>
<button kind="button" onclick="window.location.href="<?php echo the_permalink();?>/?cmeta=TRADE"">TRADE</button>
<button kind="button" onclick="window.location.href="<?php echo the_permalink();?>/?cmeta=TALK"">TALK</button>
</div>
</div>
<hr>
<div class="container">
<div class="btn-group flex">
<button class="button energetic" onclick="filterSelection('all')"> Present all</button>
<button class="button" onclick="filterSelection('BUY')"> BUY</button>
<button class="button" onclick="filterSelection('SELL')"> SELL</button>
<button class="button" onclick="filterSelection('TRADE')"> TRADE</button>
<button class="button" onclick="filterSelection('TALK')"> TALK</button>
</div>
</div>
<model>
.filterDiv {
show: none;
}
.present {
show: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
</model>
<script>
filterSelection("all")
perform filterSelection(c) {
var x, i;
x = doc.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "present" class (show:block) to the filtered parts, and take away the "present" class from the weather that aren't chosen
for (i = 0; i < x.size; i++) {
w3RemoveClass(x[i], "present");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "present");
}
}
// Present filtered parts
perform w3AddClass(aspect, identify) {
var i, arr1, arr2;
arr1 = aspect.className.cut up(" ");
arr2 = identify.cut up(" ");
for (i = 0; i < arr2.size; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
aspect.className += " " + arr2[i];
}
}
}
// Disguise parts that aren't chosen
perform w3RemoveClass(aspect, identify) {
var i, arr1, arr2;
arr1 = aspect.className.cut up(" ");
arr2 = identify.cut up(" ");
for (i = 0; i < arr2.size; i++) {
whereas (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
aspect.className = arr1.be a part of(" ");
}
// Add energetic class to the present management button (spotlight it)
var btnContainer = doc.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.size; i++) {
btns[i].addEventListener("click on", perform() {
var present = doc.getElementsByClassName("energetic");
present[0].className = present[0].className.change(" energetic", "");
this.className += " energetic";
});
}
</script>
<?php
if(isset($_GET['cmeta'])){
$commentmeta=$_GET['cmeta'];
if($commentmeta=='ALL'){
$wantto= get_comment_meta( $comment_id, 'wantto', true );
$args = array(
'post_id' => get_the_ID(),
);
}else{
$wantto= get_comment_meta( $comment_id, 'wantto', true );
$args = array(
'post_id' => get_the_ID(),
'meta_query' => array(
array(
'key' => 'wantto',
'worth' => $commentmeta,
),
)
);
}
$comment_query = new WP_Comment_Query( $args );
$feedback = $comment_query->feedback;
echo '<ol class="post-comments">';
wp_list_comments(array(
'model' => 'ol',
'short_ping' => true,
));
echo $wantto;
echo '</ol>';
/* a lot less complicated one to model in all probability
if ( $feedback ) {
foreach ( $feedback as $remark ) {
echo '<p>' . $comment->comment_content . '</p>';
}
} else {
echo 'No feedback discovered.';
}
*/
}else{
$wantto= get_comment_meta( $comment_id, 'wantto', true );
echo '<ol class="post-comments">';
wp_list_comments(array(
'model' => 'ol',
'short_ping' => true,
));
echo $wantto;
echo '</ol>';
}
endif;
$comment_id=get_comment_ID();
echo $wantto;
?>
Here is the part from my features.php that provides the dropdown menu, and filters by kind. I’ve added the filterDiv tag within the second perform of this half. The place I’ve it now solely filters the textual content, I might prefer it to filter the whole remark itself.
/*
* This may add the fields to the remark type
*/
perform wpse406058_custom_comment_fields() {
echo '<p class="comment-form-wantto">';
echo '<label for="wantto">Tag your remark so different customers can discover your submit.<br>I need to</label>';
echo '<choose id="wantto" identify="wantto" class="myclass">';
echo '<choice worth="---">---</choice>';
echo '<choice worth="BUY">BUY</choice>';
echo '<choice worth="SELL">SELL</choice>';
echo '<choice worth="TRADE">TRADE</choice>';
echo '<choice worth="TALK">TALK</choice>';
echo '</choose>';
}
add_action( 'comment_form_logged_in_after', 'wpse406058_custom_comment_fields' );
add_action( 'comment_form_after_fields', 'wpse406058_custom_comment_fields' );
/*
* This may subject worth as remark meta
*/
perform wpse406058_save_custom_field($comment_id) {
if ( isset($_POST['wantto']) && !empty($_POST['wantto']) ) {
$wantto = sanitize_text_field($_POST['wantto']);
update_comment_meta( $comment_id, 'wantto', $wantto );
}
}
add_action( 'comment_post', 'wpse406058_save_custom_field' );
perform wpse406058_display_comment_meta( $comment_text ) {
$wantto = get_comment_meta( get_comment_ID(), 'wantto', true );
if ( isset($wantto) && !empty($wantto) ) {
$wanttotext="<p class="wantosec">I need to " . esc_html($wantto) . '</p>';
?><div class="filterDiv <?php echo $wantto;?>"><?php
$comment_text = $wanttotext . $comment_text;
}
echo '<div class="container">';
return $comment_text;
echo '</div>';
echo '</div>';
}
add_filter( 'comment_text', 'wpse406058_display_comment_meta' );
