Collapse or Expand a section based on dataset filtering

Ask the community
, , , ,
1

Question:
Collapse or Expand a section based on filtering applied in the dataset settings in a wix store product page.

Product:
Wix Studio Editor

What are you trying to achieve:
Collapse or Expand a section based on a filtering result applied in the dataset settings. This result connects database items to a repeater slideshow. If there’s more than 0 items to be shown, the section containing the repeater slideshow should expanded. If the result is equal to 0, meaning there are no items to be shown, the section should remain collapsed as it is by default.

What have you already tried:
I’ve successfully accomplished the filter to deliver the desired behavior. If there is a relation between the wix store product page and items in a certain database, the repeater slideshow is populated, if not it is left blank. In the later case, the section, the title of the section and the buttons for that slideshow keep showing, and that’s what we want to avoid by collapsing that section. This is the code I’ve come up to with no satisfactory results:

$w.onReady(function () {
  // Get the slideshow repeater element
  const slideshow = $w("#slideshow1");

  // Initialize a counter for slides (alternative approach)
  let slideCount = 0;
  
  // Loop through each slide index
  for (let i = 0; i < slideshow.slides.length; i++) {
    // Increment counter for each slide
    slideCount++;
  }

  // Log slide count for verification
  console.log("Slide Count:", slideCount);

  // Check if there are any slides
  if (slideCount > 0) {
    // Expand the section if there are slides
    console.log("Expanding Section");
    $w("#sectionAditamentos").expand();
  } else {
    // Keep the section collapsed if there are no slides
    console.log("Section Remains Collapsed");
  }
});

Additional information:
The section is set to collapse by default

2

What’s setting the slides in the slideshow? A dataset?

Can you not check if the dataset is empty?

1 Like
3

You need to be checking the dataset on ready to get the total count, not the slideshow.

1 Like
4

Thanks for the guidance Nayeli, that was the correct path and it finally worked out for me!
This is the code that did the trick:

$w.onReady(function () {
  // Access the dataset directly
  const dataset = $w("#xxxxxxDataset"); // Replace with your dataset ID

  // Check if the dataset is ready
  dataset.onReady(function () {
    // Get the total item count from the dataset
    const itemCount = dataset.getTotalCount();

    console.log("Dataset Item Count:", itemCount);

    // Expand section if there are items
    if (itemCount > 0) {
      console.log("Expanding Section");
      $w("#sectionAditamentos").expand();
    } else {
      // Keep section collapsed if there are no items
      console.log("Section Remains Collapsed");
    }
  });
});
1 Like