Load a few recent reviews with AJAX pagination

[Rakshith]

"Create a WordPress child theme for HivePress ListingHive with the following features:
Reviews Limiting

• Display only the first 5 reviews by default in the listing single page.
• Reviews should keep the default HivePress/ListingHive style (star rating, review text, spacing).

Read More Button

• Add a ‘Read More’ button below the initial 5 reviews.
• The button should use AJAX to fetch the remaining reviews without reloading the page.
• Once clicked, the new reviews should slide down smoothly and the button should disappear.
  
  

But its not working can you please help me with this.
Code file drive link.

listinghive-child-reviews.zip

[ihor]

Hi,

Unfortunately there’s no simple solution for this, this would require a custom implementation. The first step would be removing the default reviews block as it lists all the reviews, and replacing it with a custom one via the hivepress/v1/templates/listing_view_page filter hook (it allows customizing the listing page blocks). The custom block you insert can implement the described logic, load a few reviews (comments of “hp_review” type) with a button that sends an AJAX request and renders the response at the end of the block, adding loaded reviews this way.

We also plan to add AJAX pagination for the reviews in future versions, another easy solution you can consider is loading all the reviews (like it currently works) and collapsing the reviews block via CSS, adding a button with JS logic to expand the reviews block in height.

Hope this helps

[Rakshith]

@ihor

consider is loading all the reviews (like it currently works) and collapsing the reviews block via CSS, adding a button with JS logic to expand the reviews block in height

When adding AJAX pagination, could you provide an estimated timeline (in months)? Alternatively, if AJAX is not implemented, the reviews can still be loaded as they currently are, but displayed in a collapsed block using CSS, with a button and simple JavaScript logic to expand the block when clicked. How should this be implemented?

[ihor]

There’s no specific ETA, but we plan to release this by the end of the year. Unfortunately there’s no general guidance for implementing the CSS solution, if you’re familiar with coding please check this sample topic javascript - Expand div on click with smooth animation - Stack Overflow

[Rakshith]

“I created a child theme with the following feature: the reviews block is displayed in a collapsed state using CSS (showing only a limited height by default). I also added a ‘Read More’ button below the reviews and used simple JavaScript logic so that when the button is clicked, the reviews block smoothly expands to its full height. However, it is not working with the code I used below.”
wp-content/themes/listinghive-child/
├── style.css
├── functions.php
├── script.js
1. style.css

/*
 Theme Name: ListingHive Child
 Template: listinghive
 Description: Child theme for ListingHive with collapsed reviews feature.
 Author: Your Name
 Version: 1.0
*/

/* Collapsed reviews block */
.hp-reviews-block.collapsed {
  max-height: 300px;   /* Show only a limited height by default */
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease;
}

/* Expanded state */
.hp-reviews-block.expanded {
  max-height: 2000px; /* Large enough to reveal all reviews */
  transition: max-height 0.5s ease;
}

/* Read More button */
.hp-reviews-actions {
  text-align: center;
  margin-top: 15px;
}
.hp-reviews-actions button {
  border-radius: 20px;
  padding: 8px 16px;
  margin: 5px;
  cursor: pointer;
 }

2. functions.php

<?php
// Enqueue scripts & styles
add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style('listinghive-child', get_stylesheet_uri(), [], '1.0');
    wp_enqueue_script('listinghive-child-js', get_stylesheet_directory_uri() . '/script.js', ['jquery'], '1.0', true);
});

// Add the "Read More" button below reviews with hooks
add_action('hp_listing_reviews_before', function($listing){
    // Wrap reviews in collapsible container
    echo '<div class="hp-reviews-block collapsed">';
});

add_action('hp_listing_reviews_after', function($listing){
    echo '</div>'; // close reviews block
    echo '<div class="hp-reviews-actions">
            <button id="hp-read-more">Read More</button>
          </div>';
});

3. script.js

jQuery(function($){
    let $reviews = $('.hp-reviews-block');
    let $button = $('#hp-read-more');

    $button.on('click', function(){
        if($reviews.hasClass('collapsed')){
            $reviews.removeClass('collapsed').addClass('expanded');
            $button.text('Show Less');
        } else {
            $reviews.removeClass('expanded').addClass('collapsed');
            $button.text('Read More');
            $('html, body').animate({
                scrollTop: $reviews.offset().top - 100
            }, 400); // scroll back to top of reviews when collapsing
        }
    });
});

[Rakshith]

I tried this code also, but it’s not working

[ihor]

Unfortunately we can’t help with reviewing custom code and help with implementing custom features as this is outside of our support scope. It includes fixing reported bugs and collecting feature suggestions, if it’s urgent and some feature is not available yet, please consider hiring a developer for customizations Customize your website | HivePress