Prevent page from refreshing when a visitor clicks on a button block that is currently not linked.

Hi everyone,

I'm trying to find a way to prevent a page from refreshing when a visitor clicks on a button block that is currently not linked.
I have tried adding the following css code to the relevant section of the homepage, but I want to disable only buttons that are currently not linked. This code disabled all the buttons in the section. Could anyone help me make this work ?

Hi @emilie_one if a button is not linked, it shouldn't do anything. Please share your website url, and the page that you are referring to, and we can take a look.

Hi @melody495, thank you for getting back to me.
I'm referring to the block "Les Episodes" on the home page. Buttons are currently hidden because our upcoming episodes are not yet available. Is that a problem for you to take a look ?

3 minutes ago, emilie_one said:

I'm referring to the block "Les Episodes" on the home page. Buttons are currently hidden because our upcoming episodes are not yet available. Is that a problem for you to take a look ?

Unfortunately without seeing the issue, I don't know where to look! If you don't want to modify your homepage as-is, you can duplicate the page, and add back in the button to demonstrate the issue you are describing.

Then myself, or others from the community can try and help you.

Of course. Just duplicated the page so you could have a look @melody495:

As you will see, if you click on any of the three buttons I'm talking about, even though they're not linked, it will still redirect you to the home page. 

On 4/17/2024 at 7:23 AM, emilie_one said:

As you will see, if you click on any of the three buttons I'm talking about, even though they're not linked, it will still redirect you to the home page. 

They don't go to the home page, but they do open up a new window with the same page. Weird, as I can't reproduce that on my test site!

This seems to be a platform issue, so I would suggest contacting Squarespace support .

You could potentially address it with custom code, but the buttons don't have a unique ID, so you can't target your code for just one button.

Thanks for checking @melody495!

Thought I might be able to work something out with custom code but my problem was exactly as you mentioned, I couldn't find a way to target the code for just one button. 

I already contacted Squarespace support before reaching out on the forum. 
They told me the following and recommended consulting the Squarespace Forum community.
I understand you are wanting to find a way to prevent the page from refreshing when a visitor clicks on a Button block that is currently Not Linked. I've checked on this and I don't see that we currently offer a way to prevent this at this time. 

So I guess there's not much I can do about this then...

@emilie_one you can try this.

Edit: see Paul's answer below, it's even neater.

Rather than targeting the button directly, you can select a specific list item. This selects the list item element based on the order they are in, then selects the respective button. This selects the 1st list item.

.user-items-list-item-container[data-section-id="6589bcfe73da041088f119c1"] .list-item:nth-child(1) {
  .list-item-content__button {
 	 pointer-events: none;
  }
}

To select multiple buttons, you add to it like this. This selects the 1st and 3rd list item.

.user-items-list-item-container[data-section-id="6589bcfe73da041088f119c1"] .list-item:nth-child(1), .list-item:nth-child(3) {
  .list-item-content__button {
 	 pointer-events: none;
  }
}

Thank you so much @melody495 and @paul2009. Both solutions work perfectly well!