CODEWITHSUNDEEP
javascriptsquarespace
user2379391
user2379391

Reputation: 49

Hide Squarespace page sections if summary block in section is empty

Hi I am trying to solve for a unique Squarespace issue.

I am building out a client's site who will be serving content to pages via summary blocks with tag filters. The summary blocks are contained in page sections that offer a title and description of the summary block content. In the case that the summary block does not return any content I am wanting to hide the page section containing the title, description, and summary block.

My Java script is quite rusty! is there any support out there who could help me develop this script?

Thanks in advance!

Upvotes: 0

Views: 479

Answers (1)

Brandon
Brandon

Reputation: 3707

Something like this, inserted via site-wide code injection should do the trick:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var summarySectionIds = [
    "5fa5f5230814705318de86d4",
    "5fb3d5c28ae3d9089a29f66f"
  ]
  var i, s, sb;
  
  if (document.body.classList.contains("sqs-edit-mode")) {
    return;
  }
  
  i = summarySectionIds.length;
  while(i--) {
    s = document.querySelector("[data-section-id='" + summarySectionIds[i] + "']");
    if (!s) {
      continue;
    }
    sb = s.getElementsByClassName("sqs-block-summary-v2");
    if (sb.length == 0) {
      s.style.display = "none";
    }
  }
});
</script>

Note that the above solution requires you to get the section ID of every section that you expect to have a summary block in it, and add it to the array summarySectionIds. That means you'd have to update this area in the code as new summary-block sections are added.

As I see it, that's necessary since Squarespace removed any trace of the Summary Block if it's empty.

Another alternative would be to ensure you always layout sections containing summary blocks exactly the same way (using Squarespace's layout columns) and only use that layout for summary block sections. Then you could identify summary block sections via their HTML instead of maintaining a list of IDs. But my opinion is that Squarespace's "Layout Engine" is so squirrely, you'd have a hard time making sure it's laid out the same every time, and how much more so would a client struggle to do so as well.

But, you could come up with some other "trick" to identify such sections using an empty Markdown or Code block or something harmless like that where you put an empty div with an class within the Code/Markdown block. In any case, the logic in the code above would be similar, but would identify sections differently.

Upvotes: 0

Related Questions