Automatically display text when summary block is empty

On 11/5/2021 at 3:16 PM, paul2009 said:

You can't achieve the same effect if there is more than one Summary Block, because Squarespace remove the empty Block and there's nothing to check.  

Hi @paul2009

I've spent ages trying to work out why this wouldn't work on one of my pages when it was working perfectly well on another, this makes total sense now!

Is it possible to target one block or section at a time with this at all? I have a museum with different event types so several summaries all on the one page.

1 hour ago, kellyhutsbydesigns said:

Is it possible to target one block or section at a time

Yes, if you place each Summary Block in a separate section on 7.1 (or pages within an index on 7.0) you could modify the code to check for a Summary Block within the specific section/page. 

On 12/4/2021 at 10:05 AM, paul2009 said:

Yes, if you place each Summary Block in a separate section on 7.1 (or pages within an index on 7.0) you could modify the code to check for a Summary Block within the specific section/page. 

@paul2009 That's what I thought but I wasn't able to edit your code to achieve that. Could you drop me a price over to do that please?

Instead of looking for a single class of summary-title like this:

document.getElementsByClassName("summary-title")[0]

you'll need to look for each class within each section. For example, where the section ID is wxyz, you might use:

document.querySelector("section[data-section-id="wxyz"] .summary-title")

don't know if this is relevant posting this on an old thread (i'm relatively new to adding messages to forums so haven't seen a lot of the old ones), but saw this and thought that there's a css only way to do this that might be easier to maintain, and I think then wouldn't need premium, and the browser may render more quickly. essentially you can use a + selector which says "find me an element that is immediately preceded by this other element". We can use this to say "find me a code block that is immediately after a summary block", which means the selector won't fire if the block is removed. 

So all you need to do is add a code block after each summary block you want to do this for (they can be anywhere you want, just the code block has to come straight after it). put a div in there with a class of "no-summary" and add the message you want. 

<div class="no-summary">Nothing to see here</div>

then add the following css to your custom css, or inject it into your page or however you want

<style>
  .no-summary {
    display:block;
  }
  .sqs-block-summary-v2+.sqs-block-code .no-summary {
    display:none;
  }
</style>

hides any no-summary message that appears in a code block that immediately follows a summary block. This way you can add the css once and just add as many "no summary items" messages as you want.

Just offering it as an alternative. 

(there may be better classes to use for the + selector, I just used the 7.1 ones I saw. could probably be a bit more specific)

On 12/10/2021 at 1:52 PM, paul2009 said:

Instead of looking for a single class of summary-title like this:

document.getElementsByClassName("summary-title")[0]

you'll need to look for each class within each section. For example, where the section ID is wxyz, you might use:

 

document.querySelector("section[data-section-id="wxyz"] .summary-title")

 

Thanks so much @paul2009
This didn't work for me using the section ID, but it did with the block ID...

<div id="no-events"></div>

<script>
  window.addEventListener('DOMContentLoaded',function () {
    var sfSummaryExists = document.querySelector("#block-yui_3_17_2_1_1639337200029_6221 .summary-title");
    if (sfSummaryExists == null) {  
      document.getElementById('no-events').innerHTML = "Sorry, we don't currently have any guided tours upcoming.";
    }
  });    
</script>

@iamdavehart Sorry - have only just seen your reply! Great suggestion, will test this one too and report back. Thanks guys!

On 12/10/2021 at 6:13 PM, iamdavehart said:

don't know if this is relevant posting this on an old thread (i'm relatively new to adding messages to forums so haven't seen a lot of the old ones), but saw this and thought that there's a css only way to do this that might be easier to maintain, and I think then wouldn't need premium, and the browser may render more quickly. essentially you can use a + selector which says "find me an element that is immediately preceded by this other element". We can use this to say "find me a code block that is immediately after a summary block", which means the selector won't fire if the block is removed. 

So all you need to do is add a code block after each summary block you want to do this for (they can be anywhere you want, just the code block has to come straight after it). put a div in there with a class of "no-summary" and add the message you want. 

<div class="no-summary">Nothing to see here</div>

then add the following css to your custom css, or inject it into your page or however you want

<style>
  .no-summary {
    display:block;
  }
  .sqs-block-summary-v2+.sqs-block-code .no-summary {
    display:none;
  }
</style>

hides any no-summary message that appears in a code block that immediately follows a summary block. This way you can add the css once and just add as many "no summary items" messages as you want.

Just offering it as an alternative. 

(there may be better classes to use for the + selector, I just used the 7.1 ones I saw. could probably be a bit more specific)

@iamdavehart

This simple, elegant solution worked well for me prior to Fluid Engine. But now it's broken. Have you (or anyone) updated this for FE? The issue is placing the code block directly below the summary block. Previously, as you know, you clicked the + sign below the summary block and added the code block. In FE, you drag the code block to below the summary block, which doesn't work, and I'm not coder enough to figure out how to change it. Your help is very much appreciated!

@watts-creative

ok, I'll answer because it is sort of interesting and I like interesting posts. The interesting thing is the implementation of fluid engine blocks, and what that means for css rules within it. No-one's got time for long explanations so I'll just put my favourite answer first, then I'll add more detail beneath it.

Best answer (most elegant IMHO)

In a fluid engine layout summary blocks are rendered even when they're empty. to achieve this, sqs have used container elements, but they do render an internal content wrapper tag, which is rendered empty (zero white-space) in an empty summary block. CSS let's you use the :empty pseudo selector to find this, and then (somewhat counter intuitively) lets you add content into it using ::before pseudo elements. so... you can do this 

.fe-block .sqs-block-summary-v2 .sqs-block-content:empty::before {
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  content:'Nothing To See Here'
}

and now any summary block that's empty gets a nice message, sized the same as the original summary block

Alternative Answer - Thinking 3D

I think the real problem here is that the fluid engine layouts aren't that fluid. they're fixed and the elements are positioned. that means that to show a good "there's nothing here" message it needs to be placed in the same place as the summary block. but we do have a front-to-back ordering in a grid unlike a flow layout... 

So I genuinely thing that the answer here is to make your "nothing here" message as normal. just a text block or something. put it "underneath" your summary block by setting the z-order in squarespace (send to back).  now you'll be able to see through it so what you want is to set your summary block (which is transparent by default) to have the same opaque colour as your background. you can use the colour or the css variable for the site background or section background or whatever. now when your summary block is full it will be put in front of your no-content message, and when it's empty you'll see your message.

The interesting thing about this is that squarespace DO render the fluid block in the same size even if its empty, but they don't absolutely size the block contents container so this approach does work. This would therefore be useful if you wanted a complex text block for your message. e.g. with links etc.

.fe-block .sqs-block-summary-v2 .sqs-block-content {
	background:white;
}

• remember to make sure that your "nothing here" block is set behind the summary block in both desktop and mobile view. you'll have to do that explictly.

Another approach I opted against: CSS Container Query

You could also use a css container query (:has) which would be similar to the original answer, but I've opted not to do that. Container queries are awesome, but they're just a little too new and support is opt-in on firefox. the container query would allow us to find code blocks that were general siblings of a summary block and then show/hide the code block accordingly. There's a caveat here though, that the fluid blocks are absolutely positioned, but css sibling selectors don't work like that, so you'd have to make sure that the code block was added second and that's going to be hard to debug if you get it wrong...

container queries are going to make a lot of really useful css editing possible. maybe not today in this case, but soon they'll be everywhere... 

Final Thoughts

I'm not sure I'm a great fan of fluid engine layouts as default. Grid layouts can be great, but it seems to me that flow layouts are more useful (esp in responsive situations) so I really hope they don't get rid of the "classic" layout altogether (or at least give us a flow container block...)

that was a very long answer. sorry.

@iamdavehart, I am a huge proponent of the long answer when someone explains something as methodically and clearly as you have done. And your solution(s) outlined above are as elegant as your previous one!

I haven't implemented any of your solutions yet, but will get back if I have issues (which will most assuredly be user input error, of course).

Regarding your Final Thoughts, I concur with your FE review. As a conventional graphic designer—who cut his teeth on programs like Adobe Illustrator, which essentially uses a grid layout scheme with layers to assemble a design—I think SS's approach with FE feels more like what I'm used to. But where AI is a robust, powerful layout tool, many years in the developing, FE is in its infancy...as clumsy as a toddler sometimes, especially since I had finally gotten to a point where I felt comfortable hacking my way through much of the code (or stealing someone else's hacks!) to achieve the result I was looking for. FE solved many layout issues, but created problems for many others. In any case, this is where we are, and I appreciate SS making this approach available.

Thanks again!

@iamdavehart

Deployed your "Best Answer" and it worked beautifully! Again, thanks for the time you spent on it.

@paul2009 

Hi Paul, I hope this message finds you well. I’m also looking to use the code block you supplied for my events page but it doesn’t work for me either. I’m also not sure if my template uses Ajax however, my site is built on Version 7.0 - York family. See link to page https://www.toyaburris.com/events.

I currently have the code injected into the site footer.

23 minutes ago, Latoya.burris said:

I’m also looking to use the code block you supplied for my events page but it doesn’t work for me either.

@Latoya.burris There have been many Squarespace changes since this thread started so I'd recommend the more up-to-date CSS workaround.

Did this help? Please give feedback by clicking an icon below  ⬇️

On 11/5/2021 at 10:16 AM, paul2009 said:

You can't achieve the same effect if there is more than one Summary Block, because Squarespace remove the empty Block and there's nothing to check.  

If you have more than one Summary Block, you can target the specific one you want to display the message by using its block id as shown below (where it says 'block-numbersandletters'):

<div id="no-events"></div>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    var summaryExists = document.getElementById('block-99b2e1d5ac7d9ed116cd').getElementsByClassName("summary-title")[0];
    if (summaryExists == null) { 
      document.getElementById('no-events').innerHTML = "There are no upcoming events at this time. Check back soon!";
    }
  }); 
</script>

To find the block id, use the "Squarespace ID Finder" Chrome Extension or use your Chrome inspection tool to find the id for the summary block.