Webflow sync, pageviews & more.
NEW
Answers

Webflow & Javascript: How can I hide search result items with a blank page in Webflow that contain "/sku/" in the URL using Javascript?

To hide search result items with a blank page in Webflow that contain "/sku/" in the URL using JavaScript, you can follow these steps:

1. Get all the search result items on the page: Depending on your specific HTML structure, you can use a CSS selector or class name to select all the search result items.

2. Loop through the search result items: Use a loop, such as a `forEach` loop or a `for` loop, to iterate over each search result item.

3. Check if the URL contains "/sku/": Access the URL of each search result item and check if it contains "/sku/" using the `includes` method. If it does, it means the search result item has a URL containing "/sku/".

4. Hide the search result item: If the search result item's URL contains "/sku/", you can use CSS to hide it. You can add a class to the element or directly manipulate its style using JavaScript. For example, you can use `display: none;` to hide the element.

Here's an example implementation:

```javascript
// Step 1: Get all search result items
const searchResultItems = document.querySelectorAll('.search-result-item');

// Step 2: Loop through search result items
searchResultItems.forEach(item => {
// Step 3: Check if item's URL contains "/sku/"
const url = item.getAttribute('href');
if (url.includes('/sku/')) {
// Step 4: Hide the search result item
item.style.display = 'none';
// or item.classList.add('hidden');
}
});
```

In the above code snippet, we're assuming that each search result item has a `` tag with an `href` attribute containing the URL. Adjust the code according to your specific HTML structure.

Remember to place this JavaScript code on your page where you want the search result filtering to occur, or you can add it to an external JavaScript file and include it in your Webflow project.

Additionally, make sure to trigger this JavaScript code after the search results have been rendered on the page, for example, after an AJAX call or when the page has finished loading.

Other Webflow Questions