Showing an Element in a Repeater based on the Specific Repeater Items Database Content

Ask the community
, ,
1

I have a testimonials page on our site that displays information about our client’s testimony in a repeater connected to a dataset. I would like to add a button (Show Our Reply) that shows up on the specific repeater item based on that items data in the “reply” field in the dataset. Then once that button is clicked, to show that items respective reply. I would also like to hide the button from other items that do not have anything in the “reply” field in the dataset.

I have the below code but each item still shows the button even when that specific items “reply” field is empty. In the future, I also want to add a way to filter the testimonies based on Rating, and display a number of total ratings with an average star rating.

  • #container2 = Testimony Repeater

  • #item205 = “Show Our Reply” Button

  • #item206 = “Reply Data”

import wixData from ‘wix-data’ ;

var myDATABASE = “GenericTestimonials” //–> your collection-name here…
var searchFIELD = “Rating” //–> Search-Field-ID here…

$w . onReady ( function () {
$w ( “#container2” ). onViewportEnter (( event ) => {
// get repeated item scope
const $item = $w . at ( event . context );
// get the ID of the repeated item which fired an event
const itemId = event . context . itemId ;
// get all repeater’s data, it’s stored as an array of objects
const data = $w ( “#repeater1” ). data ;
// use the array methods to find the current itemData and index
const itemData = data . find (( item ) => item . _id === itemId );
const index = data . findIndex (( item ) => item . _id === itemId );

wixData . query ( myDATABASE ) 
  . isNotEmpty ( "reply" ) 
  . find () 
  . then ( ( results ) => { 
     **if** ( results . items . length  >  0 ) { 
      console . log ( "Items-found" ) 
      $item ( "#text205" ). show (); 
        $item ( "#text205" ). onClick (( event ) => { 
          $item ( "#text206" ). show (); 
        }); 
    }  **else**  { 
            $item ( "#text205" ). hide (); 
            // handle case where no matching items found 
      } 
  });

});
});

2

@base742 For the purposes of working with a repeater, using both a dataset and wixData.query is typically problematic. I would suggest choosing one or the other. For your situation, unless I’m missing something, a dataset should work fine if all of the data is in one collection.

Secondly, Velo has looping repeater functions onItemReady and forEachItem with built-in parameters that you’re manually defining. Using those functions is relatively straightforward and preferable to the custom approach that you’re using.

I’m also wondering about the use of the onViewportEnter function. If you’re using a dataset, it may have not yet loaded when this event executes. It may be okay depending on where the Testimony repeater is on the page.

Let’s say you used a dataset. You could use the onItemReady function and define the onClick something like this.

$w.onReady(function () {
    $w("#repeater1").onItemReady(($item, itemData, index) => {
	  if (itemData.reply){
                $item("#text205").show();
          } else [
               $item("#text205").hide();
	}
    });

   $w("#text205").onClick((event)=>{
       let $item = $w.at(event.context);
        $item("#text206").show();	
   }); 
});