Link to Page & Pre-Filter Portfolio Items

Question

Joomla 3.9.10

I am using this template. I would like to create a link on my home page that when clicked, will take the user to the portfolio page and display a pre-selected tab..

For example my link would be 'Branding Portfolio', when clicked this should go to http://demo2.joomshaper.com/2019/indigo/index.php/portfolio and the 'Branding' tab should be pre-selected, and the items already filtered.

Is this possible?

I've spoken with the developers JOomshaper but they've said it required additional development and they don't offer / support that.

I'm thinking I could somehow use and anchor and jquery?

Any advice is appreciated.

Answer 1

By "anchor and jquery" you mean like the way bootstrap tabs work - ie. by letting the uri's fragment hit the id of the tab. But these tabs aren't set up like that. You can of course use jquery to trigger a click on the tab you want (via the fragment if that is useful) but that will trigger the animation that goes along with it. If you don't care about that then the following js might do...

Example link with a fragment: http://demo2.joomshaper.com/2019/indigo/index.php/portfolio#branding

Example script to run after everything else has run:

var hash = location.hash.replace('#', '');
jQuery('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');

Answer 2

I found the answer, thanks for the help @jamesgarrett

The tabs were using shuffle.js so I needed to edit the page builder js file.

jQuery(function($) {

    var $container = $('.sp-simpleportfolio-items');

    $(window).load(function() {
        var $sizer = $container.find('.shuffle__sizer');

        $container.shuffle({
            itemSelector: '.sp-simpleportfolio-item',
            sequentialFadeDelay: 150,
            sizer: $sizer
        });

        // ADD - get the url hash
        var hash = location.hash.replace('#', '');
        // ADD - shuffle based on the hash
        $container.shuffle( 'shuffle', hash );
        // ADD - highlight the tab
        $('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');

    });

});