blog page search bar

Shopify Discussion
,
1

Anyone know how to code a search bar for a blog page so peoples can find blogs based on blog tag

2

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

Yes, you can definitely code a search bar for a blog page that filters posts based on tags. Here’s a breakdown of how you can approach this, along with code examples in JavaScript (for front-end functionality) and considerations for back-end (if needed):

1. Front-End (JavaScript):

  • HTML Structure:
    • You’ll need an input field for the search bar and a container to display the filtered blog posts.
    • Assume your blog post data is available as a JavaScript array of objects, where each object represents a blog post and includes its title, content, and tags.

HTML

<input type="text" id="tagSearch" placeholder="Search by tag...">
<div id="blogPosts">
    </div>
  • JavaScript Logic:
    • Get references to the search input and the blog post container.
    • Add an event listener to the search input to detect changes.
    • When the input changes, filter the blog posts based on whether their tags include the search term.
    • Dynamically update the blog post container with the filtered results.

JavaScript

const searchInput = document.getElementById('tagSearch');
const blogPostsContainer = document.getElementById('blogPosts');

// Sample blog post data (replace with your actual data)
const blogPosts = [
    { title: 'Blog Post 1', content: '...', tags: ['programming', 'javascript'] },
    { title: 'Blog Post 2', content: '...', tags: ['webdev', 'html'] },
    { title: 'Blog Post 3', content: '...', tags: ['programming', 'css'] },
    { title: 'Blog Post 4', content: '...', tags: ['optimization'] },
];

function displayBlogPosts(posts) {
    blogPostsContainer.innerHTML = ''; // Clear previous results
    posts.forEach(post => {
        const postElement = document.createElement('div');
        postElement.innerHTML = `
            <h3>${post.title}</h3>
            <p>${post.content}</p>
            <p>Tags: ${post.tags.join(', ')}</p>
        `;
        blogPostsContainer.appendChild(postElement);
    });
}

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const filteredPosts = blogPosts.filter(post => {
        return post.tags.some(tag => tag.toLowerCase().includes(searchTerm));
    });
    displayBlogPosts(filteredPosts);
});

// Initial display of all blog posts
displayBlogPosts(blogPosts);

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

3

its not working , anyone know other ways

4

Hi @Ecomowner

You can consider using below code to see if work or not:

Here I attach a guideline how to create a Search Bar from W3Schools. Please also take a look and make it as a reference. Thank you!

https://www.w3schools.com/howto/howto_css_searchbar.asp

5

i want the search in the actual blog post page

6

Hey,

maybe this is still relevant for you, we have developed an app, with which you can actually add a search and tag filters to your blog posts and blog overview page.

https://apps.shopify.com/easy-blog-post-filter-search

Within the app you can style the search pop up and define featured articles as well.

Best,

Your AhoiApps-Team

7

To search the actual blog post data in real time, you need to use either Shopify Ajax API or liquid to render the data on server-side. You might also require further result filtering to ensure no duplicated data.

We do this with our app HUE Blog Filter & Search PRO. If you haven’t found a blog search solution, I’d love to know your thoughts about our app :slight_smile:

image