I have two buttons on my Single Product template, a Read More for the product description in the Product details block (WordPress theme 2024) and a second that takes the content from a custom post type and displays it when pressed called show composer. This last looks at the contents of an ACF field, matches it against the title of the custom post and displays the content. It does not show if there is no match. A conflict occurs only when the Show Composer button is displayed. The conflict prevents the Read More button from working. To confirm, if there is no Composer found that button does not appear and the Read More button works as expected. If a composer is found the Read More button fails. The only thing I can see that might cause this is that the last line of the Read More code might conflict with a line in the Show Composer code that calls the_content().
But I cant see how to resolve this if it is
The code for the two modules is below.
/*======================================================================================
#6 Shorten product long description with read more button
=======================================================================================*/
function filter_the_content( $content ) {
// Only for single product pages
if( ! is_product() ) return $content;
// Set the limit of words
$limit = 25;
// Strip p tags if needed
$content = str_replace( array( '<p>', '</p>' ), '', $content );
// If the content is longer than the predetermined limit
if ( str_word_count( $content, 0 ) > $limit ) {
// Returns an associative array, where the key is the numeric position of the word inside the string and the value is the actual word itself
$arr = str_word_count( $content, 2 );
// Return all the keys or a subset of the keys of an array
$pos = array_keys( $arr );
// First part
$text = '<p>' . substr( $content, 0, $pos[$limit] ) . '<span id="dots">...</span>';
// More part
$text .= '<span id="more">' . substr( $content, $pos[$limit] ) . '</span></p>';
// Read button
$text .= '<button id="read-button"></button>';
$content = force_balance_tags( $text ); // needded
}
?>
<script type="text/javascript">
jQuery(document).ready( function ($) {
// Settings
var read_more_btn_txt = 'Read more';
var read_less_btn_txt = 'Read less';
// Selectors
var more = '#more';
var read_button = '#read-button';
var dots = '#dots';
// On load
$( more ).hide();
$( read_button ).html( read_more_btn_txt );
// On click
$( read_button ).on( 'click', function() {
if ( $( more ).is( ':hidden' ) ) {
$( more ).show();
$( dots ).hide();
$( read_button ).html( read_less_btn_txt );
} else {
$( more ).hide();
$( dots ).show();
$( read_button ).html( read_more_btn_txt );
}
});
});
</script>
<?php
return $content;
}
add_filter( 'the_content', 'filter_the_content', 10, 1 );
/*==============================================================
# Create Show Composer Button
================================================================*/
// Function to handle the 'composer_info' shortcode
function display_composer_info() {
global $post;
// Unique ID for the composer content div
$unique_id = 'composer-info-' . $post->ID;
// Get the 'composer' ACF field value of the current product
$composer_name = get_field('composer', $post->ID);
// WP_Query arguments to find the 'Composers' post with the matching title
$args = array(
'post_type' => 'composers',
'title' => $composer_name,
'posts_per_page' => 1
);
// The Query
$composer_query = new WP_Query($args);
// Start output buffering to return the content
ob_start();
// Check if any posts were found
if ($composer_query->have_posts()) {
while ($composer_query->have_posts()) {
$composer_query->the_post();
// Button to toggle the display of the composer info
echo '<button id="show_composer" class="show_composer" onclick="toggleComposerInfo('' . $unique_id . '')">Composer Info</button>';
// Div to contain the composer post content, hidden by default
echo '<div id="' . $unique_id . '" style="display:none;">';
// Display the content of the composer post
the_content();
echo '</div>';
}
} else {
// No posts found, so no button or content is displayed
echo '';
}
// Restore original Post Data
wp_reset_postdata();
// Get the buffered content
$output = ob_get_clean();
// Return the content
return $output;
}
// Register the shortcode with WordPress
add_shortcode('composer_info', 'display_composer_info');
// Add inline JavaScript for the toggle function
function composer_info_scripts() {
?>
<script type="text/javascript">
function toggleComposerInfo(id) {
var content = document.getElementById(id);
content.style.display = (content.style.display == 'none') ? 'block' : 'none';
}
</script>
<?php
}
add_action('wp_footer', 'composer_info_scripts');