Online location filter

Developing with LiveWhale
1

Hi folks,

Is it possible to have any events that are marked as online events to be grouped into an event “location” called online?

2

I don’t know if this is helpful, but I wrote a backend.js customization that enters “Virtual” in the location field and locks that field so it can’t be changed. Seems like that would accomplish what you are wanting.

3 
// Add extra functionality to the online event selector in the Event editor
if ($('body').attr('id') == 'events_edit') {
    function lockLocation(){
        $('.places-remove').click(); // remove location map if one was added
        $('#places_location').prop('readonly',true).css({'opacity':'.5','pointer-events':'none'}); // disable location field
        $('.places-add-new-checkbox').prop('disabled',true); // disable new location checkbox
        $('.places-select-existing, .places-options .checkbox').addClass('disabled'); // disable all locations button
    };
    function unlockLocation(){
        $('#places_location').prop('readonly',false).css({'opacity':'','pointer-events':''}); // enable location field
        $('.places-add-new-checkbox').prop('disabled',false); // enable new location checkbox
        $('.places-select-existing, .places-options .checkbox').removeClass('disabled'); // enable all locations button
    };
    $(window).on('load',function(){
        // If loading an event with the online event box checked and the online only option chosen
        if ( $('#is_online').prop('checked') && $('[name="online_type"]:checked').val() == 1 ) {
            lockLocation(); // just lock the location fields (location should have already been saved as "virtual")
        }
    })
    $('#is_online').on('change',function(){
        // when the online event checkbox is checked and online type is not 2 (hybrid) 
        if ( $('#is_online').prop('checked') && $('[name="online_type"]:checked').val() != 2 ) {
            $('#places_location').val('Virtual'); // set the location field to "Virtual"
            lockLocation(); // and lock the location fields
        }
        // otherwise, means the online checkbox was unchecked OR hybrid is chosen
        else {
            if ($('#places_location').val() == 'Virtual') {
                $('#places_location').val(''); // if location field has a value of "virtual", clear it
            }
            unlockLocation(); // unlock the location fields
        }
    });
    $('[name="online_type"]').on('change',function(){
        // when the online type option is set to online only
        if ( $('[name="online_type"]:checked').val() == 1 ) {
            $('#places_location').val('Virtual'); // set the location field to "Virtual"
            lockLocation(); // and lock the location fields
        }
        // otherwise, means it is set to hybrid
        else {
            if ($('#places_location').val() == 'Virtual') {
                $('#places_location').val(''); // if location field has a value of "virtual", clear it
            }
            unlockLocation(); // unlock the location fields
        }
    });
}
4

Hi folks,

Another way of approaching this is: we do have a standalone “is this event online” filter checkbox that you can see referenced in /livewhale/theme/core/components/calendar/lw_cal_categories.html:

<div id="lw_cal_online_selector" class="lw_cal_selector"></div>

That online selector we typically theme inside of the “categories” dropdown, but actually it doesn’t need to live there, it could go anywhere. (The checkbox itself is themed using the calendar component lw_cal_online_selector.html if you want to redesign or reword it.)

So, Rob, if your theming already has a component filtering by location, you could add or move that lw_cal_online_selector into the top of that, and the Online events checkbox would go there instead. Hope this may help!

5

Thank you both so much!

6

Hey folks, we had a developer work on this and this is what she reported; any other guidance?

Jon Wilcox’s suggestion at Online location filter - #3 by jwilcox allows for the locking and unlocking of the Location fields in the “Edit an event” page, but does not actually add or modify the Locations available in the “Search Events” sidebar.

Karl Hinze’s suggestion at Online location filter - #4 by karl suggests adding a specific

, but adding that div only produces an empty div. The tagged html file, lw_cal_online_selector.html, does not exist in our Prod, Dev, or Git instances of Event Cal.

The only other solution I can think of is to try manually adding a “Virtual” or “Online” option to the available locations, as suggested here (Locations - LiveWhale Support). I cannot actually try this option to see if this helps since I do not have the required authorization in either the Dev or Prod version of the site.

7

Hey Rob,

Sorry to hear this is giving your developer trouble. The lw_cal_online_selector.html file will be used from the core theme as a fallback (livewhale/theme/core/components/calendar) until/unless it’s been copied to your global theme to override. More on editing components.

I’m sure it’s possible to get the “online events” selector to work on your front-end calendar, but it may be something that’s difficult to coach in the abstract here – if you’d like a little hands-on help from our team to get this across the finish line, feel free to reach out using the Request Help form which will enable us to SFTP into your site and connect some of the pieces that your developer might be missing.

Otherwise, happy to continue answering questions here. Thanks Rob.