[Resolved] Conditional URL

[Author]

Posts

[JoelK2744]

Hello, I have a view which is displaying a featured event from The Events Calendar plugin.

The loop output is essentially a clickable container with the event details inside that links to the event url.

This all works fine apart from when the event is recurring. So I would like to use a different URL when the event is recurring (I can add a custom field checkbox for this).

What would be the best way to do this?

The Events Calendar adds a date at the end of the URL when it's a recurring event. e.g. hidden link - ideally I would like to dynamically be able to change this URL to hidden link when the event is recurring but guessing this would require some JS?

The alternative option is to setup a custom field and add the URL manually there, but this isn't so ideal. If I was to use this option would I essentially have to duplicate the view loop but with a different URL to the clickable container, and make the entire container conditional? Or is there anyway of just making the URL of clickable container conditional? I am using blocks.

Thanks

[Jamal]

Hello and thank you for contacting Toolset support.

Or is there anyway of just making the URL of clickable container conditional? No there is no built-in way. But, I suspect that hooking into the post_type_link and check if the event is recurring, then change the returned URL. However, I did not test this method, maybe it won't work.
https://developer.wordpress.org/reference/hooks/post_type_link/

I think that the easiest solution would be JS-based. Either check the container links for the last fragment(date of the event) and changing the URL with the desired one.
Or, add a Fields&Text block where you build the URL using shortcodes, and then you update the container link using Javascript. Does it make sense?

I hope this helps. Let me know if you have any questions.

[JoelK2744]

Thanks Jamal for getting back to me so promptly.

I'm pretty new to filters, is there anyway of getting a filter to only work for this specific view as I wouldn't want it to change the URLs for all links to recurring events?

Or if you can provide any pointers with the JS for your suggestion of checking the container link for the last fragment (date of the event) and changing the URL with the desired one, that would be much appreciated.

Many thanks

[Jamal]

Sorry for forgetting to tell you how to check if we are within the relevant view. There is a global object that can be used:

global $WP_Views;
if ( WP_Views->current_view() == 123) {
}

Where 123 is the view's ID.

I can help with the Javascript code, but I'll need to see the view. Can you share a URL where we can see this view?

[JoelK2744]

Thanks Jamal...it's here - hidden link - if you scroll down approx half way down the page, it's the one immediately below the 'What's On' heading.

Thanks

[Jamal]

The following code should work, assuming that the dates are always written with leading 0 when necessary (2021-09-09 instead of 2021-9-9):

jQuery(function($){
    $('.tribe-events-widget-events-list__event-title-link').each(function(){
        var link = jQuery(this)
        var url = link.attr('href')
        if (/\/\d{4}-\d{2}-\d{2}\/$/.test(url)){
            link.attr('href', url.replace(/\/\d{4}-\d{2}-\d{2}\/$/, '/all/'))
        }
    });
});

[JoelK2744]

Thanks Jamal. It's actually the view to the left of that, the one with the featured image and a blue box with the event details in white writing. So I've tweaked the code to the below but it doesn't seem to be working - I'm testing it on this url - hidden link

jQuery(function($){
    $('.feat-evt-cnt').each(function(){
        var link = jQuery(this)
        var url = link.attr('href')
        if (//d{4}-d{2}-d{2}/$/.test(url)){
            link.attr('href', url.replace(//d{4}-d{2}-d{2}/$/, '/all/'))
        }
    });
});

Thanks

edit...just noticed the slashes are different on mine, WP seems to be auto-correcting it? I copy and pasted your code but once the page is saved the slashes change like the above, is there any way of preventing that from happening?

[Jamal]

Try this one:

jQuery(function($){
    $('.wp-block-toolset-blocks-container.tb-container.feat-evt-cnt').each(function(){
        var link = jQuery(this)
        var url = link.attr('href')
        if (/\/\d{4}-\d{2}-\d{2}\/$/.test(url)){
            link.attr('href', url.replace(/\/\d{4}-\d{2}-\d{2}\/$/, '/all/'))
        }
    });
});

I have also posted it on pastebin.com to keep a raw copy here https://pastebin.com/yy5mLS4a

[JoelK2744]

No joy I'm afraid...once the page is saved and I return to the view it is saved like this (after copying and pasting from pastebin)

jQuery(function($){
    $('.wp-block-toolset-blocks-container.tb-container.feat-evt-cnt').each(function(){
        var link = jQuery(this)
        var url = link.attr('href')
        if (//d{4}-d{2}-d{2}/$/.test(url)){
            link.attr('href', url.replace(//d{4}-d{2}-d{2}/$/, '/all/'))
        }
    });
});

[Jamal]

Hello and my apologies for the late reply, but I do not work on Wednesdays and Thursdays as you may check on my profile page https://toolset.com/forums/users/jamal-b/

Please allow me temporary access to your website and let me check it closely. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

Can you share a screenshot to let me see where do you copy the code? It seems to me that you are not copying it in the correct place.

[Jamal]

I see the issue. The regular expression code is changed after saving the page. So, I created a content template using the legacy editor. And I only added the Javascript code into it. And I added it before the view. You can check it here hidden link

However, the code did not work, because the new view does not have a special class on the container(feat-evt-cnt) so, I updated the code to:

jQuery(function($){
  $('.wp-block-toolset-blocks-container.tb-container').each(function(){
    var link = jQuery(this)
    var url = link.attr('href')
    if (/\/\d{4}-\d{2}-\d{2}\/$/.test(url)){
      link.attr('href', url.replace(/\/\d{4}-\d{2}-\d{2}\/$/, '/all/'))
    }
  });
});

Now it works as expected.

Let me know if you still need assistance with implementing this on the live site.

[JoelK2744]

That's great, thanks Jamal, great support once more.