html data-filter set on other page

Question

I have a page where a user can filter for different products. This works so far.

                <ul class="nav__list" width="100px" id="filters">
                    <li>
                        <li><button data-filter="*">All Products</button></li>
                        <li><button data-filter=".categorie1">Product1</button></li>
                        <li><button data-filter=".categorie1">Product2</button></li>
                        <li><button data-filter=".categorie2">Product2</button></li>
                        <li><button data-filter=".categorie2">Product3</button></li>
                        <li><button data-filter=".categorie3">Product4</button></li>
                    </li>
                  <ul>

Is there a possibility to call a filter for eg categorie2 from a different page? Something like the link below would be awesome:

<a href="shop.php?filter=categorie2">Categorie2</a>

Any ideas if this is possible?

Many thanks

Answer 1

First of all, you are missing a <ul> after your first <li> From the question I don't fully understand what you want to do.

Do you want to sort the items on the page?

Do you want to reload some items and then filter them?

Do you want send a filter request to the server?

<ul class="nav__list" width="100px" id="filters">
    <li>
        <ul>
            <li><button data-filter="*">All Products</button></li>
            <li><button data-filter=".categorie1">Product1</button></li>
            <li><button data-filter=".categorie1">Product2</button></li>
            <li><button data-filter=".categorie2">Product2</button></li>
            <li><button data-filter=".categorie2">Product3</button></li>
            <li><button data-filter=".categorie3">Product4</button></li>
        </ul>
    </li>
<ul>

Answer 2

I can get the query string using window.location.search

Now you can use JavaScript to call the function used to filter the products using the same query string.