Disable specific collection linkblock

Design help General
1

Hi,
I have a client that im helping develop a ecommerce site.
She wanted a menu with products categories, one of the categories still doesnt have products and will be “coming soon”. so this menu is being fed with a collection, but client wants to disable the link block to prevent users from clicking it and opening a results page without products.

image
image916×308 33.4 KB

Thanks,
RM

2

Read-only project link?

3

https://preview.webflow.com/preview/baboush?utm_medium=preview_link&utm_source=designer&utm_content=baboush&preview=845b480794d4fdbbd86f5458a4ce2f2c&pageId=64b4bbe89102618ca5b0d1e9&itemId=64b4bbe89102618ca5b0d23b&workflow=preview

4

In Webflow, you don’t have a built-in option to disable links for a specific collection item. However, you can achieve this with a bit of custom code and conditional visibility.

Try this!

  1. Setup Collection Field: Go to the Collection settings and add a new switch field, let’s say “Active”. You will use this field to identify whether a product category is active or coming soon.
  2. Modify the Collection: For each item in the collection, set the “Active” switch field to true if the category is active (i.e., has products) and false if the category is still “coming soon”.
  3. Add Conditional Visibility to the Link Block: Go to the page where you have your categories menu. Select the link block and add a condition to only display it when “Active” is set to true.
  4. Add a Text Block for “Coming Soon” Categories: Add a separate text block element for the “coming soon” categories. This element should have the same styling as your link block, but without the actual link functionality. Then, apply a condition that this block will only be visible when “Active” is set to false.

Now, categories that are still “coming soon” will be displayed as plain text and won’t be clickable, while the active categories will have the usual link block.

Remember that you need to add this custom code inside an HTML Embed element or within Page Settings > Custom Code > Before tag:

<script>
  $(document).ready(function(){
    $('.your-class-name').each(function(){
      if($(this).attr('href') == '#'){
        $(this).removeAttr('href');
      }
    });
  });
</script>

In the code above, replace ‘your-class-name’ with the class of the element you want to disable the link for.

Let me know if this is helpful!

2 Likes
5

Esther’s GPT answer is in the right direction, but there is no custom code needed.
The approach is to have two copies of that block, one in a link and one not, and the use conditional visibility on your coming soon field.

Your div block version will be conditionally visible when coming soon is set
Your link block when coming soon is NOT set

image
image1617×814 184 KB

1 Like
6

wow i needed this, thank you man