Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 9, 2022 at 10:14 pm #1361288
    spooniverse

    Dear Support-Team,

    I have a question about the Masonry Element. Is it somehow possible to set a link to a page where there is a sortable Masonry placed and directly select one of the terms? Like a kind of anchor? For example something like this: http://www.example.com/page/?masonry-active-term=example

    I could have used this several times and somehow it must be possible, right?

    And another question (similar topic): Could the terms also be displayed as a drop-down?

    I’m looking forward to your advice and would like to place the first part as a feature request if it is not possible already.

    Thanks to the whole team! Cheers, Daniel

    August 10, 2022 at 1:08 am #1361297
    Ismael

    Hey spooniverse,

    Thank you for the inquiry.

    Is it somehow possible to set a link to a page where there is a sortable Masonry placed and directly select one of the terms? Like a kind of anchor?

    Yes, this should be possible. You can use this snippet in the functions.php file to automatically activate a specific term on page load. The masonry-active-term parameter should contain the name of the term in lowercase.

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

    Unfortunately, there is no option to display the terms as dropdown.

    Best regards,
    Ismael

    August 10, 2022 at 8:28 am #1361310
    spooniverse

    Thank you, Ismael, that sounds interesting! Can I make the script somehow dependent on the respective page call? From the used link?

    Example:

    http://www.example.com/page/masonry-active-term1

    Triggers one of the terms, while:

    http://www.example.com/page/masonry-active-term2

    Triggers another one?

    August 10, 2022 at 8:29 am #1361311
    spooniverse

    So the $_GET would need to pull the request from the URL – or am I wrong?

    August 11, 2022 at 9:09 am #1361428
    Nikko

    Hi spooniverse,

    That’s correct, the value of $_GET would be fetched from the URL.

    Best regards,
    Nikko

    August 11, 2022 at 9:27 am #1361435
    spooniverse

    Hey guys, I am really sorry but I can’t get it to work. I copied the code from Ismael, did not change any part of it, and tried to add the name of an masonry-active-term to the URL, nothing happened. I tried to put a masonry-active-term into the code, nothing happend. I tried a few other things, emtied the cache, reloaded the theme settings, nothing happend.

    So my question is: Do I have to edit the code in any way?

    And: How is the request needed to be written?

    In my code I see a part where it says:
    <a href="#" data-filter="example-term_sort" class="example-term_sort_button avia_show_sort"><span class="inner_sort_button"><span>Feste Gruppen</span><small class="avia-term-count"> 1 </small></span></a>

    I added to the URL like: http://www.example.com/page/example-term or http://www.example.com/page/#example-term

    Everything with no effect. What am I doing wrong?

    August 14, 2022 at 2:44 am #1361629
    Mike

    Hi,
    Thank you for your patience, please try this script in your child theme functions.php instead,

    function custom_masonry_hash_sort_trigger_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
function sortHash() {
if (location.href.indexOf("#") != -1) {
        var target = window.location.hash.substring(1);
        setTimeout(function(){
        $(".av-masonry-sort .av-sort-by-term").find('a[data-filter="'+ target +'"]').trigger("click");
        },200);
    }
}
sortHash();
window.addEventListener('popstate', function(event){
	sortHash();
});
}(jQuery));
});
  </script>
  <?php
}
add_action('wp_footer', 'custom_masonry_hash_sort_trigger_script');

    This script checks for a hash in the url on page load and if it is found in the masonry sort it triggers a click, it also listens for a hash in the url after the page is loaded so if a link or a button on the same page is clicked it will trigger the script.
    I have linked to my test page below with the hash #photography_sort
    2022-08-13_016.jpg
    On my test page I only have 3 sort options:
    design_sort
    illustration_sort
    photography_sort
    this should help you find the correct data-filter hash on your page.

    Best regards,
    Mike

    August 16, 2022 at 4:12 pm #1361816
    spooniverse

    Exactly what I needed. Thanks a lot!
    Best regards, Daniel

    August 16, 2022 at 4:18 pm #1361821
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    August 16, 2022 at 4:25 pm #1361822
    spooniverse

    You may close this. Thanks!

    August 16, 2022 at 6:46 pm #1361839
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Link to Masonry Terms?’ is closed to new replies.