WiX Repeater Connected to Dataset | Expand/Collapse Text (More/Less)

Ask the community
, ,
1

Hello I read thru the forums and instructions for doing this but I can’t get it to work. I’m new to Velo coding and it’s likely a missing element or syntax error.

Can you help me?

Objective: Display a repeater for Google Reviews on a website (see the bottom of page @ marleysgothamgrill.net for example of repeater displayed). I need to set the amount of text displayed to be consistent so that the repeater block does not expand and stays uniform.

Reference: I referenced the site front end home page above to see the example of what I’m trying to manipulate and control. Here is also the home page code I inserted.

Issue: I noticed that the text52 element is noted with an error msg but I dont know how to fix it?

Field Definitions:
dataset1 - my content manager collection ID
repeater2 - the repeater ID shown on the home page
text52 - the text field in the repeater.
Note: this text data is mined from the dataset “comment” field name.
button12 - the Read More text button I placed into repeater.

// Velo API Reference: Introduction - Velo API Reference - Wix.com

let fullText ; // variable to hold the full text
let shortText ; // variable to hold the short version of the text

//$w.onReady(function () {

// Write your Javascript code here using the Velo framework API 

// Print hello world: 
// console.log("Hello world!"); 

// Call functions on page elements, e.g.: 
// $w("#button1").label = "Click me!"; 

// Click "Run", or Preview your site, to execute your code

$w ( “#dataset1” ). onReady ( function () {
const shortTextLength = 40 ;
fullText = $w ( ‘#dataset1’ ). getCurrentItem (). textField ;
if (! fullText ) {
$w ( “#repeater2” ). forEachItem ( ( ‘#text52’ )). collapse ();
$w ( “#button12” ). label = “Show Less” ;
} else {
if ( fullText . length <= shortTextLength ) {
$w ( “#repeater2” ). forEachItem ( ( ‘#text52’ )). text = fullText ;
$w ( “#button12” ). label = “Show More” ;
} else {
shortText = fullText . substr ( 0 , shortTextLength ) + “…” ;
$w ( “#repeater2” ). forEachItem ( ( ‘#text52’ )). text = shortText ;
}
}
});
//});
2

Hello!

Hope you’re liking Velo so far. :slight_smile: You’re right that this is a syntax issue – take a look at the documentation for forEachItem if you haven’t already if you’re confused about the syntax.

Taking your first if statement, you’ll have to set it up to look something like this:

 $w("#repeater9").forEachItem(() => {
            $w('#text52').collapse();
            $w("#button12").label = "Show Less";
        });

forEachItem basically loops through all of your Repeater items. In the callback part of the function (within the curly braces), you’ll code as you would anywhere else, using the $w selector and all – the difference being that anything you do inside the repeater’s forEachItem loop will be applied to all repeater items.

3

Thank you for you guidance, however I am still not making progress. I read thru the foreach element, adjusted the code, several hours of tweaking, still - it seems like one of two things:

  1. the text52 is not collapsible

  2. the full text line where I get current element should point to the dataset field name instead of textField variable. But i tried to change that line to point to the dataset field name instead with no progress.

Like if you look at the website, i dont understand how I can collapse text that doesnt have a collapsible component natively. I’m assuming that the code just makes that possible.

I keep getting some error squiggly red line under text52, then I finally got past that and got that same squiggly line under .collapse. a hover over the collapse error said something about text52 not being collapsible.

4

Your code should look, something like this…

const txtLimit = 40;

let fullText, shortText;

$w.onReady(function() {
  $w("#dataset1").onReady(function () {
    $w("#repeater2").forEachItem(($item, itemData, index) => {
      fullText = $w('#dataset1').getCurrentItem().textField;
      if (fullText>txtLimit) {
        $item('#text52').text = fullText.substr(0, txtLimit) + "...";
        $item("#button12").label = "Show More";
      }
      else {$item('#text52').text = fullText;}
    });
  });
});

Complete the code and add all your other functionalities.

5

OK that $item and itemdata and index is literal?? I see! I will try this!

I also ready about Multi-State boxes. Never realized that I’m not using one in my repeater. Must I be for this to work?

Should I also follow this lesson too? Velo Tutorial: Expand Text with a Read More Link | Help Center | Wix.com

6

There are different ways of how to solve your issue.

The shown example from the provided link is more a fixed solution without any flexibility and 0 intelligence.

All what will happen are only the behaving actions, which were added.
There won’t be any intelligent calculations, because you did’t generate code for it. —> NON-FLEXIBLE-CODE → HARD-CODING (not even coding → just settings from provided options).

Always keep on your mind —> if you use inflexible predefined stuff, you only will be able to do what the stuff is providing you as options.

But everything changes, as soon you start to trow-in some CODE!

Is this answer enough ?

The more code you use → the more efficient will be your wished function, maybe even with artificial intelligence, who knows!

7

So i think your point is that the code you provide avoids the need for a multi-state box (out of the box predefined widget, in essence). In other words, the code we/you are writing and suggesting is the raw way to do what some other widgets like a less flexible pre-built multi-state box with auto properties and less code does the same…

8

This is what I’m truly wishing to do.

I want a repeater of reviews mined from the dataset, that continues to grow a bit up to about 10 reviews in a grid (or scrollable left to right) with a simple “Read More…” link that either has the entire box expand and contract on click, or that takes the user to the full review on another page of all “full text” length of reviews on click.

That’s what I’d be using your codebase recommendations and feedback to get somewhere (anywhere) where things work then branch the code from there to tweak things.

See image example. Ignore the read more on 2 lines. It should be just the same line but the image got compressed.

2388×1568 307 KB

9

So I tried this code you recommend. Something happens :). But what happens is the text52 is totally wiped - no text at all on save and publish. So I’m thinking it has something to do with that my dataset has ’multiple’ text fields, not one. I wonder what textfield item the for/next finds when it loops thru the table for one, and why it never displays the 40 chars like the code should.

10

Almost yes, but with the advantage, that you won’t have any boundaries if generating it by code.

Instead of this…
fullText = $w ( ‘#dataset1’ ). getCurrentItem (). textField ;

…try this one…
fullText = itemData . textField ;

I do not work with DATASETS. It always depends on how you exactly settep-up your dataset, to be able to find the right solution.

Reading code for me is faster. I see code and can imagine without seeing your setup.

11

Try to use CONSOLE-LOGs to DEBUG your own code.

12

I did so and the code with all comments as I understand the lines to be doing are pasted here. The text is never sliced to the 40 car length on the front end like it is shown in console. Also, the button label is not transformed. I scoured much documentation but cant resolve it. Any suggestions?

const txtLimit = 40;

let fullText, shortText;

$w.onReady(function() { //page loaded
  $w("#dataset1").onReady(function () { //dataset loaded
    $w("#repeater2").forEachItem(($item, itemData, index) => { //for each repeated item
      var fullText = $w('#dataset1').getCurrentItem().comment; // pull dataset text field
      console.log (fullText.length); //show fulltext length
      if (fullText.length > txtLimit) { //if fulltext length is >40 then do this
        console.log ("more than 40 chars detected!"); //validate in console >40 detected. WORKING in CONSOLE.
        $item('#text52').text = fullText.slice(0, txtLimit) + "..."; //I think this replaces the text field with shortened version? NOT WORKING.
        console.log ($item('#text52').text = fullText.slice(0, txtLimit) + "..."); //show the shortened version of text. WORKING IN CONSOLE.
        $item('#button12').label = "Show More"; //changes text button label in repeater. NOT WORKING.
        console.log ($item('#button12').label = "Show More") //WORKING IN CONSOLE.
      }
      else {$item('#text52').text = fullText; //Shows the full text version.
      console.log ("less than 40 chars detected!"); //NEVER SHOWN IN CONSOLE. I HAVE TEXT FIELDS <40
      //I am seeing repeated items in console of the same review. Not expected. I should see 3 unique ones.
      }
    });
  });
});
13

And another interesting find is that in the preview side (Dev editor in WiX) I see the changed data properly, but not in the front end live site :frowning:

2388×1490 407 KB