Remove empty space in repeater when a dataset field is blank

Ask the community
, , ,
1

I’ve created a website for a restaurant that features their menu. To make it easy for the managers to edit, I created data sets for the menu items and linked them to designed repeaters. Overall it’s excellent, but have run into one negative.

I’ve created fields for the item name/price and the descirption. Unfortunately some of their menu items don’t have descriptions and in those cases, the repeater leaves an unsightly large gap in the menu for that text box. Is there a way to write the code so that items without a description automatically collapse or remove that text box?

Here’s a link to the site: https://www.eathoncho.com/

I’ve also attached screenshots of the content manager and the site with the unsightly gap under “Union Mac & Cheese”.

906×1304 88.9 KB

1770×872 69.3 KB

1 Like
2

Hi,

You can accomplish this by using collapse() on the text element once the dataset for the repeater loads.

Here is a example (you should modify this to match the element IDs on your page):

$w.onReady(function () {
  // Dataset Connected to Repeater
  $w("#dataset1").onReady(() => {
    $w("#repeater").forEachItem(($item, itemData, index) => {
      //Repeated Text Element
      if ($item("#text1").text === "") {
        $item("#text1").collapse();
      }
    });
  });
});
3

This worked perfectly, thanks so much!

One question though - this would be tedious to do for every single repeater as I have numerous, is there no way to do it for every one? Understandable if it’s not but figured it was worth asking.

4

Since each dataset loads the data from different collections asynchronously, I would still recommend creating a $w(“#dataset”).onReady block for each repeater.

It may be possible to also combine the menu options into a single collection and organize the menus using a new field that dictates the menu type (i.e. Kids, Adults, etc). With this method you would be able to populate all of the menus with a single dataset (and collection). I understand this may be difficult to refactor if your website is already structured a certain way.

I’m glad this solution worked for you though! :grinning:

5

No worries. Thanks again!

6

@thomasj This worked great on 3 of the sites I’ve built for this client but for some reason it’s not working on one. Any chance you could help me debug it? Here’s the site link: https://www.unionassembly.com/

In the menu, under the lunch menu tab, you can see that in the soup and salad section it’s not collapsing properly (see screenshot). But my code is exactly the same as I’ve done for the other sites but of course with the updated dataset/repeater/item names. I’ve included the code below for quick reference.

1714×894 99.1 KB

$w.onReady(function () {
// Dataset Connected to Repeater
$w(“#lunchsoupdataset”).onReady(() => {
$w(“#lunchsoupdataset”).forEachItem(($item, itemData, index) => {
//Repeated Text Element
if ($item(“#lunchsoupdescription”).text === “”) {
$item(“#lunchsoupdescription”).collapse();
}
});
});
});
7

Yes, you need to do this on every repeater. But the the code above is flawed.

Use a different logic instead:

What you want to do first is check if there is something in that field (NOT check if the text is connected to something). Let’s say your field key is “description”, then use itemData.de scription in the code (see below).

Make sure to click on the description text on your repeater and set it to “collapse” on load that way ALL the text is collapsed before the page loads.

It looks cleaner when something is expanding when the page loads instead of “collapsing”.

So the code below checks if there is data inside of the description field of the database and THEN expands the text ONLY if the field is not blank.

$w.onReady(function () {
  // Dataset Connected to Repeater
  $w("#dataset1").onReady(() => {
    $w("#repeater").forEachItem(($item, itemData, index) => {
      //Repeated Text Element
      if (itemData.description) {
        $item("#text1").expand();
      }
    });
  });
});

#codequeen
#totallycodable

8

Thanks for the response! I tried this out though and it still has the same gap as noted above. Here’s a screenshot and the web address for reference. If you could take inspect the code and let me know if there’s something I’m missing, that would be much appreciated.

1714×894 99.1 KB