Using jQuery / Javascript to apply filter function from an external link when linked page loads

Question

This is an extension of questions I asked here: Owl Carousel 2: filtering items, but keep the sort order using Javascript (hope this is ok).

I have a menu which filters items. I want the filter to be applied when clicked from and external page link. So on page X you click FilterA this directs you to page Y and filters the items to FilterA as if you had just clicked FilterA on page Y.

In the ideal world it would simply use a link such as www.example.com/pageY/#filterA.

You can see the live page here.

This is the filter function:

$(document).ready(function () {
function showProjectsbyCatEur(cat) {
    var owl = $(".owl8").data('owlCarousel');

    owl.addItem('<div/>', 0);

    var nb = owl.itemsAmount;
    for (var i = 0; i < (nb - 1); i++) {
        owl.removeItem(1);
    }

    if (cat == 'all8') {
        $('#projects-copy8 .project8').each(function () {
            owl.addItem($(this).clone());
        });
    } else {
        $('#projects-copy8 .project8.' + cat).each(function () {
            owl.addItem($(this).clone());
        });
    }
    owl.removeItem(0);
}
$('.owl8 .project8').clone().appendTo($('#projects-copy8'));
$('#project-terms8 a').click(function (e) {
    e.preventDefault();
    $('#project-terms8 a').removeClass('active');

    cat = $(this).attr('ID');
    $(this).addClass('active');
    showProjectsbyCatEur(cat);
});
});

My filter menu looks like this:

<div id="filter">
            <h1 class="title">Eurorack</h1>
                <div id="project-terms8">
                <ul class="filter">
                   <li class="filter"><a id="all8" class="active all" onclick="event.preventDefault();" href="#">Show All</a></li>

                   <li class="filter 3x"><a id="3x" onclick="event.preventDefault();" href="#">Clocks, Logic &amp; CV</a></li>

                    <li class="filter 2x"><a id="2x" onclick="event.preventDefault();" href="#">Filters &amp; Resonators</a></li>

                    <li class="filter 1x"><a id="1x" onclick="event.preventDefault();" href="#">Waveform Modifiers</a></li>

               </ul>
                </div>

So the answers so far have been helpful but not quite solve my issue. If anyone else has any advice that would be great! It seems using # is not helpful as the filter uses the id this just creates anchors down to the filter, so a /?filter=FILTERITEM would be best.

Alternatively a new filter system would be fine. As long as the sort order remains the same and this can be used with the URL as well as buttons.

Answer 1

You can get a url argument with javascript and use that in the filter.

function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null

}

var filter= getParameterByName('filter');
showProjectsbyCatEur(filter);

then make the link something like "www.mysite.com/pageY/?filter=euro".