Jump to content

Automatically display text when summary block is empty

Go to solution Solved by paul2009,

Recommended Posts

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)

Screen Shot 2019-11-11 at 20.17.50.png

Edited by alicroft
add detail
Link to comment
  • Solution

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 by paul2009
Updated due to Squarespace changes

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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 🙂.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@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.

Link to comment

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. 

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 5 months later...
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 🙂).

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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? 

 

Link to comment
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.

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
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! 

Link to comment

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

1943208354_Screenshot2020-04-30at12_19_46.png.7f6cd6e8bd3a37ca0277f2cd25592369.png

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
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.

1943208354_Screenshot2020-04-30at12_19_46.png.7f6cd6e8bd3a37ca0277f2cd25592369.png

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? 

  

Skærmbillede 2020-05-05 kl. 20.42.52.png

Link to comment
  • 3 weeks later...
  • 2 months later...
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.

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 weeks later...
  • 1 year later...
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? 

  

Skærmbillede 2020-05-05 kl. 20.42.52.png

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.

Link to comment

@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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@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

 

Link to comment
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.  

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.