Webflow & Javascript: How can I hide search result items with a blank page in Webflow that contain "/sku/" in the URL using Javascript?
- Identify the class or ID of search result items in Webflow.
- Add a Javascript snippet in the Project Settings' Custom Code section to loop through items and hide those containing "/sku/" in the URL by setting their display style to none.
- Save changes and republish the site to implement the script.
To hide search result items with a blank page that contain "/sku/" in the URL using Javascript in Webflow, follow these steps:
1. Identify the Container and Elements
- Examine your project's structure in Webflow to identify where the search results are rendered. This typically involves the search result list or items.
- Find the class or ID associated with each search result item.
2. Add Custom Code in Webflow
- Go to Project Settings in your Webflow dashboard.
- Click on the Custom Code tab.
- In the Footer Code section, insert a script to loop through search results and hide those containing "/sku/" in their URL.
3. Write the Javascript Code
- Use the following Javascript code snippet within the Custom Code section:
```javascript
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select all search result items by their class name
var searchItems = document.querySelectorAll('.search-item-class a');
searchItems.forEach(function(item) {
// Get the href attribute of the link element
var url = item.getAttribute('href');
// Check if the URL contains "/sku/"
if (url.includes('/sku/')) {
// Hide the entire search item
item.closest('.search-item-class').style.display = 'none';
}
});
});
</script>
```
4. Save and Publish
- Click Save Changes to apply the script.
- Republish your site to allow the changes to take effect.
Summary
To hide search result items with URLs containing "/sku/", add a Javascript snippet in the footer that loops through each search result and checks if the URL matches the criteria. Upon finding a match, the item is hidden by setting its display style to none.
