Portfilio Grid Pre Filtered - Support | Kriesi.at

Tagged: portfolio grid

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

August 29, 2022 at 5:17 pm #1363079

Vangone

Participant

Hi,

we have a Website eg: http://www.example.com

Here we do have a Subpage eg: http://www.example.com/subpage/

On this subpage we have a Portfilio Grid with 3 different filters (ALL | Filter1 | Filter 2 | Filter 3).
I want to make a custom Link to my my menu, where these Filters are set eg:

http://www.example.com/subpage/#filter1
http://www.example.com/subpage/#filter2
http://www.example.com/subpage/#filter3

Is that possible?

Best regards,
Phil

August 30, 2022 at 3:15 am #1363125

Ismael

Moderator

Hey Vangone,

Thank you for the inquiry.

Yes, this should be possible. You can use the following script in the functions.php file, which should trigger or activate a sort button based on the value of the sort URL parameter.

// activates a sort button based on the sort query parameter
function ava_activate_sort_button()
{
    if (NULL == $_GET["sort"]) {
        return;
    }	
    ?>
		<script>
        (function($){	
            $(document).ready(function() {
               <?php echo '$(".'. $_GET["sort"] .'_sort_button").trigger("click");'; ?>
            });	
        })(jQuery);
        </script>
<?php
}
add_action('wp_head', 'ava_activate_sort_button');

Example of the URL with the sort parameter.

https://kriesi.at/portfolio?sort=enfold

Visiting the above URL will trigger the category sort item named enfold.

Best regards,
Ismael

August 30, 2022 at 8:21 am #1363145

Vangone

Participant

Hi Ismael,

thanks for your help. But that thing is not working with my skills.

I placed your code but I dont really know how to make it run.
Your Url is also not working.

Best regards,
Phil

August 31, 2022 at 11:19 am #1363333

Ismael

Moderator

Hi,

Thank you for the update.

You have to add the code in the functions.php file and create custom menu items in the Appearance > Menus panel. In the URL field of the menu item, add the URL of the page containing the Portfolio Grid and include the sort query parameter and set the name of the category that you would like to immediately activate as its value.

Example:

http://mysite.com/page-with-portfolio-grid?sort=cat

When a user visit the link or click the custom menu item, the script will automatically activate the category with the name “cat”. If you need more help, please provide the login details in the private field and make sure that the Appearance > Theme File Editor panel is active.

Best regards,
Ismael

August 31, 2022 at 2:21 pm #1363366

Vangone

Participant

Hi,

perfect. It worked like that:

// activates a sort button based on the sort query parameter
function ava_activate_sort_button()
{
    if (!(is_page( 202 ))) {
        return;
    }	
    ?>
		<script>
        (function($){	
			window.addEventListener('load',() => {
			 console.log('test');
			});
            $(document).ready(function() {
              	 console.log(window.location.hash);
				if(window.location.hash) {
					//$("div[class$='_sort'],div[class*='_sort ']").hide();
					switch(window.location.hash) {
						case "#Teile":
							setTimeout(() => {  $(".teile_sort_button").trigger("click"); }, 500);
							//$(".teile_sort_button").trigger("click");
							//$(".teile_sort").show();
							break;
						case "#Uhren":
							setTimeout(() => {  $(".uhren_sort_button").trigger("click"); }, 500);
							//$(".uhren_sort_button").trigger("click");
							//$(".uhren_sort").show();
							break;
						case "#Kurioses":
							setTimeout(() => {  $(".kurioses_sort_button").trigger("click"); }, 500);
							//$(".kurioses_sort_button").trigger("click");
							//$(".kurioses_sort").show();
							break;
						case "#Bronzen":
							setTimeout(() => {  $(".bronzen_sort_button").trigger("click"); }, 500);
							//$(".bronzen_sort_button").trigger("click");
							//$(".bronzen_sort").show();
							break;
						default:
							$(".all_sort_button").trigger("click");
							//$("div[class$='_sort'],div[class*='_sort ']").show();
					}
				
				}
			
				
            });	
			$(window).on('hashchange', function() {
				//$("div[class$='_sort'],div[class*='_sort ']").hide();
				console.log(window.location.hash);
				switch(window.location.hash) {
						case "#Teile":
							$(".teile_sort_button").trigger("click");
							//$(".teile_sort").show();
							break;
						case "#Uhren":
							$(".uhren_sort_button").trigger("click");
							//$(".uhren_sort").show();
							break;
						case "#Kurioses":
							$(".kurioses_sort_button").trigger("click");
							//$(".kurioses_sort").show();
							break;
						case "#Bronzen":
							$(".bronzen_sort_button").trigger("click");
							//$(".bronzen_sort").show();
							break;
						default:
							$(".all_sort_button").trigger("click");
							//$("div[class$='_sort'],div[class*='_sort ']").show();
					}
			});
        })(jQuery);
        </script>
<?php
}
add_action('wp_head', 'ava_activate_sort_button');

Teile, Uhren, Bronzen, Kurioses are my Kategories.

Thanks

September 1, 2022 at 3:00 am #1363427

Mike

Moderator

Hi,
Glad Ismael could help, and thanks for sharing your final code, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Portfilio Grid Pre Filtered’ is closed to new replies.