Support » Plugin: Site Reviews » Simple Review Slider / Carousel – How To Guide (and 1 Support Question)

  • itguysconsulting

    (@itguysconsulting)


    I noticed other people asking about adding a slider or carousel of testimonials in the support forums, so I thought I would include my VERY simple review slider that I created, which doesn’t require much coding effort or knowledge to include on a site.

    I have placed my slider in the footer of my client’s site.
    ————–
    Here is how:
    ————–
    First create a single review (display=1) shortcode for the reviews. Be sure to set pagination=”ajax” like this. Note that the class name is important and should be unique to your site, as this will be used by the jQuery code further below:

    [site_reviews class="custom-footer-testimonials-slider" display="1" offset="0" pagination="ajax" hide="response" fallback="No reviews yet."]

    This creates a site review list of 1 single review item, with ajax pagination for all the rest. You can add more filters (such as categories) as per the documentation, to limit the number of “pages” as there will be one page per review.

    Next, add the shortcode to your sidebar or footer widget using the WordPress Text Widget.
    Ta da, you now have a single testimonial with pagination for the rest of them.

    Now let’s automate:
    To do this, add the following JavaScript to your theme’s JavaScript file. For this you will need to google “how to enqueue javascript in your wordpress theme”. But if you have a JavaScript you are already loading, you just copy and paste the following into it, and if you changed the name of the “class” in the above shortcode, you have to replace it in the code below. This bit of code also supports pausing the review slide effect on hover over.

      var customFooterReviewsSliderPaused = false;
      var customFooterTimeoutFunctionID = undefined;
      
      $(".custom-footer-reviews-slider").bind("mouseenter", function() {
        customFooterReviewsSliderPaused = true;
        if (customFooterTimeoutFunctionID != undefined) {
          clearTimeout(customFooterTimeoutFunctionID);
        }
      });
      $(".custom-footer-reviews-slider").bind("mouseleave", function() {
        customFooterReviewsSliderPaused = false;
        advanceCustomTestimonialsSlider();
      });
      
      function advanceCustomTestimonialsSlider() {
        $navLinks = $(".custom-footer-reviews-slider .nav-links");
        $nextBtn = $("a.next.page-numbers", $navLinks);
        $prevBtn = $("a.prev.page-numbers", $navLinks);
        $pg1Btn = $('.page-numbers').not('.prev, .next').first();
        if ($nextBtn.length > 0) {
          $nextBtn[0].click();
        } else if ($pg1Btn.length > 0) {
          $pg1Btn[0].click();
        }
        if (customFooterReviewsSliderPaused  === false) {
          customFooterTimeoutFunctionID = setTimeout(function() {      
            advanceCustomTestimonialsSlider();
          }, 3000); 
        }
      }
      
      /* Automate  Testimonials As A Slider */
      setTimeout(function() {
        advanceCustomTestimonialsSlider();
      }, 3000); 
    });

    —————————-
    My One Support Question:
    —————————-
    I noticed that even though the pagination uses Ajax that it is modifying the URI query string for each review viewed:
    eg) the ?reviews-page=3 as so:
    https://mywebsite.com/?reviews-page=3

    Since I am placing (say a dozen) select reviews in the footer, this will create a dozen ?indexable? permutations of every single page, which I’m not sure if Google will pick up on, but may not be a desired thing, I’m thinking.

    I’m well versed in jQuery, JavaScript and PHP, so I may poke around in the JS of your plugin to see what I could potentially suppress.

    PS: Amazing plugin! Truly well coded and thought out.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Gemini Labs

    (@geminilabs)

    You can disable the URL query string for pagination in the settings:

    A couple other notes:

    1. The offset=0 option in the shortcode is unnecessary if you are using pagination.

    2. If using the pagination for the carousel navigation, you can hide all pagination links except the next/prev link with css like this:

    .glsr-pagination .page-numbers:not(.prev):not(.next) {
        display: none;
    }

    Or to only target the specific shortcode, use the class used in the shortcode option like this:

    .custom-footer-testimonials-slider .page-numbers:not(.prev):not(.next) {
        display: none;
    }

    3. If you need a more advanced solution, you can use the undocumented site-reviews/paginate_links filter to build your own. The filter accepts two arguments: $links the generated links as HTML, $args the argument array used to build the links (use glsr_debug($args) to print this to the screen to inspect it).

    4. Site Reviews only uses jQuery in the admin (since WordPress already uses it there). It uses vanilla javascript in the frontend.

    itguysconsulting

    (@itguysconsulting)

    Oh wow, sorry about that. I have found the setting you mentioned now.
    I don’t know how I managed to miss that as I thought I looked everywhere.
    Thanks for the tips!

    PS: For some reason I did have to set the offset to 0, as it was always landing on page 2. So I just included that to enforce it.

    Plugin Author Gemini Labs

    (@geminilabs)

    Perhaps the URL query was making it start at page 2 when you reloaded the page?

    Yes after finding the option to turn off the pagination URLs as pointed out above, I was able to remove the offset=0. Thanks, again!!!

    —-

    Just in case anyone follows this post in the future, ignore the original code above.
    It had a couple defects, one resulting in a “#” refresh of the page after the first review slider transition started. Below is my latest JavaScript/jQuery that I am using with SiteReview plugin v4.6.3

    This version also has a transitionCountLimit to prevent a page left open from constantly polling the site for the next review.

    Also I should have mentioned that this code must be placed inside a document ready event handler:
    jQuery(document).ready(function($) { ....... });

    If you don’t have this already replace the ……. with the JavaScript code below, and ensure you enqueue jQuery with your script in functions.php as shown in bold below…

    wp_enqueue_script('my-child-theme-script', get_stylesheet_directory_uri() . '/assets/js/MyChildThemeScript.js', <strong>array('jquery'), </strong>wp_get_theme()->get('Version'), true);

    Revised ‘Text Widget’ Shortcode:
    [site_reviews class="custom-footer-testimonials-slider" display="1" pagination="ajax" hide="response" fallback="No reviews yet."]

    And below is the guts of the jQuery code, which handles the slider:

    /* Slider for Footer Reviews */
    
    // Settings:
    var timeOutLength = 2000; // Milliseconds between transitions  
    var transitionCountLimit = 20;  // Limit # of transitions 
                                   // in case somebody leaves page open (prevents indefinite queries).
                                   // Set to 0 for indefinite (not advised)
    
    // Initializations:
    var customFooterReviewsSliderPaused = false;
    var customFooterTimeoutFunctionID = undefined;
    var currentFooterPageNumber = 1;
    var transitionCount = 0;
    
    // Pause the slider on mouse enter:
    $(".custom-footer-reviews-slider").on("mouseenter", function() {
      customFooterReviewsSliderPaused = true;
      if (customFooterTimeoutFunctionID != undefined) {
        // stop the next slide from appearing:
        clearTimeout(customFooterTimeoutFunctionID);
      }
    });
    
    // Resume the slider on mouse leave, even if transitionoCountLimit reached:
    $(".custom-footer-reviews-slider").on("mouseleave", function() {
      customFooterReviewsSliderPaused = false;
      // Assuming the user is still interacting with the site and hasn't walked off.
      // So allowing another transitionCountLimit more slides to be shown.
      // Remove "transitionCount=1;" line below for a hard stop after transitionCountLimit is reached:
      transitionCount = 1;    
      advanceCustomReviewsSlider();
    });
    
    // Advance the slider, by finding the next available page button and clicking it
    // Or go back to page 1:
    function advanceCustomReviewsSlider() {
      if (customFooterReviewsSliderPaused  === false) {
        // Grab the set of navigation links:
        $navLinks = $(".custom-footer-reviews-slider .nav-links");
        // Find the current page we are on.
        $currentLink = $(".page-numbers.current", $navLinks);
        // Find the next page # link following this current page:
        $nextPage = $currentLink.next("a.page-numbers");
        if ($nextPage != undefined && $nextPage.length > 0) {
          // Click the next available page # link:
          $nextPage[0].click();
        } else {
          // No more pages... Go back to page 1:
          $page1 = $("a.page-numbers[data-page=1]");
          if ($page1 != undefined && $page1.length > 0) {
            $page1[0].click();
          } else {
            // Something went wrong, just terminate
            return;
          }      
        }
        // If slider isn't paused, then wait timeOutLength to show advance the slider:
        if (customFooterReviewsSliderPaused  === false) {
          customFooterTimeoutFunctionID = setTimeout(function() {      
        // Checks if there is a limit, and enforces, or if limit is 0 continues.
            if (transitionCountLimit > 0 && transitionCount < transitionCountLimit) {
              transitionCount++;
              advanceCustomReviewsSlider();
            } else if (transitionCountLimit == 0) {
              advanceCustomReviewsSlider();          
            } else {
              return;
            }
          }, timeOutLength); 
        }
      }
    } 
    
    // Delay timeOutLength seconds after page load before executing:
    setTimeout(function() {
      // Do the first slider transition to the next review:
      transitionCount++;
      advanceCustomReviewsSlider();    
    }, timeOutLength);
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.