0

I have a "Library" page within my website, in which there are several "templates". Each of these templates has a "Category" assigned to it.

The difficulty is that I need to add some <select> at the top, to be able to filter these "templates" by "category" and "year", and that the results are displayed in real time on the page.

I have tried using the plugins "Search&Filter", "AjaxSearchLite", but I have not obtained the result I want.

Is it possible to do this, without having to purchase the PRO versions of these plugins, and without touching any PHP, JS or HTML code?

Thank you all in advance.

1
  • 1
    Best way to do this would be to write the code yourself. You can either use JS .hide() items that don't match the filtered options that have been selected using `.on('change') or you can dynamically requery and reload the content so that ONLY those that match are pulled in using AJAX. Using a third party plugin's PRO option for this is just an expense you needn't take on and also there's always the chance it won't actually work the way you want it to. Jul 31, 2023 at 22:25

1 Answer 1

0

As third-party plugin/library recommendations are not on-topic on this StackExchange, the next best option is a code-based solution. If you can describe why you can't use a code-based solution I could possibly provide a better answer.

You can accomplish this using some simple JavaScript event listeners on the <select> element. This would require you to be able to add data attributes to the elements for filtering mind you.

<!-- Select filter -->
<label>Category:
    <select id="category-select">
        <option>All Categories</option>
        <option>Category 1</option>
        <option>Category 2</option>
    </select>
</label>


<!-- Templates -->
<div class="template" data-category="Category 1">
    <p>Template 1</p>
</div>
<div class="template" data-category="Category 2">
    <p>Template 2</p>
</div>


<!-- Event handling -->
<script>
    window.addEventListener('load', () => {
        let categorySelect = document.getElementById('category-select');

        // runs code on change of the value of #category-select
        categorySelect.addEventListener('change', (e) => {
            let value = e.target.value;
            let allRows = document.querySelectorAll('.template');
            
            // show all rows if 'All Categories' is selected
            if (value === 'All Categories') {
                allRows.forEach((el) => {
                    el.style.display = 'block';
                });
            } else {
                // sets all rows to hidden first
                allRows.forEach((el) => {
                    el.style.display = 'none';
                });

                // then sets the ones in that category back to shown
                let valueRows = document.querySelectorAll(`.template[data-category="${value}"]`);
                valueRows.forEach((el) => {
                    el.style.display = 'block';
                });
            }
        });
    });
</script>

This will change the results displayed on the page as you select different options in the dropdown menu.

6
  • There's possibly a better way to do this using AJAX and dynamic re-querying, but it's not something I'm familiar with.
    – YourManDan
    Aug 1, 2023 at 14:50
  • Thank you for the response. The reason I'm not using code is that I don't know where to place it or how to reference files in Wordpress. I have access to the theme directory of my page, but I have no idea where to add the code or the files. Where could I create and store them?
    – EDG_DGK
    Aug 15, 2023 at 19:31
  • @EDG_DGK That highly depends on the structure of your website, not something I can answer on here unfortunately. The code would get placed in your "Theme File Editor" under "Appearance" (or using an FTP client if that doesn't show up), but which file it goes in depends on a lot of things.
    – YourManDan
    Aug 15, 2023 at 19:59
  • I'd recommend doing some independent research on some plugins that might accomplish this task if you don't feel comfortable with a code-based solution.
    – YourManDan
    Aug 15, 2023 at 20:00
  • Thanks for the answer again. Returning to the filters, if I want to add that I also filter by year, how would I do it?
    – EDG_DGK
    Aug 15, 2023 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.