Automatically display text when summary block is empty

alicroft · November 11, 2019

I've tried every solution I could find here on the Circle forum, but none are working!

page: https://theveil.squarespace.com/nfk
(scroll down to "Upcoming Events" section)

template: Royce

I've got a Summary Block displaying Events, filtered by Category. When nothing matches the filter criteria, there is just a big black space on the page. I'd prefer it to automatically display text when the summary block is empty, like

"There are no upcoming events at this location."

Note: The Upcoming Events section on the page is actually a page (/nfk-events) nestled within an Index Collection (/nfk), in case it matters.

Anyone have ideas / updates to the old solutions for this? (https://forum.squarespace.com/search/?&q=empty summary block&search_and_or=and&sortby=relevancy)

Edited November 11, 2019 by alicroft
add detail

paul2009 · November 11, 2019

Hi @alicroft

The solution that I provided in March 2018 is now out of date. A newer version is as follows:

Add a Code Block just above or just below the Summary Block. Add the following to the Code Block. The first line will create an empty div element with a class of ‘no-events’. When the Summary Block contains events, this div will not be seen because it will be empty.

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

The remaining lines contain JavaScript that checks if Summary Block content exists on the page. If there is no content (because the events are in the past), some text is added within the empty div so that users see a message. You can edit the message to suit your needs.

Note: This is designed for use on pages where there is only one Summary Block. It will not work on pages containing more than one Summary Block.

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

Edited October 29 by paul2009
Updated due to Squarespace changes

alicroft · November 11, 2019

Thank you so much @paul2009, that worked perfectly!

For anyone else trying the same:

The script did not work in the page header injection (/nfk-events), but it did in the Index Collection header injection (/nfk).

paul2009 · November 11, 2019

To be clear, the code won't work in the page header injection of either of these if you have Ajax enabled.

(Note that Ajax is never enabled when you are logged on to a site! This makes it appear to work whilst logged on, but as soon as you hand over a site and the client tries it, they'll find it doesn't work 😫)

If further checks are added to the code to identify the collection or URL it can then be inserted in the Footer Injection and it will play nice with Ajax 🙂.

alicroft · November 11, 2019

@paul2009 I have Ajax enabled, and inserted your code as written above into the Collection's header injection, and it's working...!

Is this delicate in some way? (I know nothing about Ajax or javascript!) Should I move it into the Footer Injection area of the site instead? I'd prefer to leave it on the Collection so I can customize what it says for each summary block on the site, if possible.

paul2009 · November 11, 2019

It will only work if you are logged on, or if you load that specific page. If you navigate from another page to that one, it won't.

paul2009 · November 11, 2019

I wrote a guide that may help you to understand how Ajax affects JavaScript on Squarespace:

https://sf.digital/squarespace-solutions/why-doesnt-my-code-work-until-i-refresh-the-page

alicroft · November 11, 2019

Understood, thank you for clarifying!

April 29, 2020

Hi @paul2009

I'm in the exact same pickle as alicroft, but I'm unable to see the answer, you provided. Do you know why that is?

Would love an answer to this problem!

paul2009 · April 29, 2020

1 minute ago, Ida_nymand said:

I'm unable to see the answer, you provided. Do you know why that is?

You can't see the original post because Squarespace upgraded their forum and deleted lots of content. However, I had repeated the answer below the link (as shown in your screenshot 🙂).

April 29, 2020

Thanks, I thought that was in relation to disabling Ajax, haha. I've tried to insert the code in my Index page header injection, but it doesn't seem to be working. I don't have Ajax enabled.

I'm using the Stella template - do you think this might be why it's not working?

paul2009 · April 29, 2020

2 hours ago, Ida_nymand said:

I'm using the Stella template - do you think this might be why it's not working?

Stella is a Brine-family template, so it should be fine. The code needs to be inserted in the site footer injection area. (Settings > Advanced > Code Injection). If it doesn't work for you, please post a working link to the page.

April 30, 2020

16 hours ago, paul2009 said:

Stella is a Brine-family template, so it should be fine. The code needs to be inserted in the site footer injection area. (Settings > Advanced > Code Injection). If it doesn't work for you, please post a working link to the page.

I tried to insert the code in the site footer injection area, but it's still not working. Would be great if you would take a look at it. Link to the page: https://www.rumligcph.dk/hjem

The Summary Block is located under the 'Events' headline.

Thanks!

paul2009 · April 30, 2020

Your Summary Block is showing some upcoming events, so the message will not be shown.

May 5, 2020

On 4/30/2020 at 1:21 PM, paul2009 said:

Your Summary Block is showing some upcoming events, so the message will not be shown.

Sorry for the late reply. There are two Summary Blocks on the page - one is located under the headline 'Events' and not showing anything (this is the one, where I would like the 'no upcoming events' text), while the other is showing the latest blogposts (the one in your screenshot).

Maybe the problem is that there are two Summary Blocks on the page?

Yari · May 22, 2020

Hi! I'm wondering if this solve works with either version of Squarespace. Tried it on 7.1 and having no luck (with either the Ajax and non-Ajax code). Still tinkering but thought I'd ask in the meantime.

Yasheng · August 10, 2020

It also doesn't work for my 7.1 site.

paul2009 · August 10, 2020

22 minutes ago, Yasheng said:

It also doesn't work for my 7.1 site.

@Yari @Yasheng

I provided this solution in 2018 when Squarespace 7.1 did not exist! 🤔

If you'd like assistance with a 7.1 site, please post a question that includes the URL of the page on your site and what you'd like to achieve. If the site is hidden from public view, please set a site password and tell us what it is.

donovanryan · August 30, 2020

@paul2009

Hi Paul,

Are you possibly to help me with this?

I have a 7.1 site and I'm wanting to add this also when we have no events coming up!

Website is: https://www.tavernharewood.co.nz/whats-on

Thanks!

Wonderneath · November 1, 2021

On 5/5/2020 at 3:47 PM, Ida_nymand said:

Sorry for the late reply. There are two Summary Blocks on the page - one is located under the headline 'Events' and not showing anything (this is the one, where I would like the 'no upcoming events' text), while the other is showing the latest blogposts (the one in your screenshot).

Maybe the problem is that there are two Summary Blocks on the page?

Were you able to find a solution to this? I am trying to do this on a page with two summary blocks as well and it doesn't work.

The code does work with only one summary block.

alicroft · November 3, 2021

@Wonderneath Sadly, I did not find a solution!

paul2009 · November 3, 2021

@Wonderneath @alicroft If the solution isn’t working for you, please provide more details, including the URL for the page so that we can see the issue and test a solution.

Wonderneath · November 5, 2021

@paul2009

I don't have the page live yet to view.

I am creating a page that contains 2 Summary blocks. The first summary block on the page is a summary of a blog for community updates. The second Summary block is for Events in our calendar, it is on this second summary block that I need the code to work on.

I have used your code on three other pages and it works perfectly but this is the only page it won't function on and I assume it is because I am using two differnt summary blocks.

Thank you!

If looking at our site at all will help you even though you can't see this specific page it is
www.wonderneath.com

paul2009 · November 5, 2021

15 minutes ago, Wonderneath said:

I am creating a page that contains 2 Summary blocks.

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.

Wonderneath · November 5, 2021

@paul2009

Thanks for clarifying.

Automatically display text when summary block is empty

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

iamdavehart

paul2009

paul2009

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources