Docs

[Paul G]

Guys,

I’ve searched the forum but can’t find any solution for this, but apologies if there is one!

I’m trying to configure a card button to open the search overlay.
I’ve essentially got three cards on my home screen, two of which will link to other pages, but the last one needs to open the search function.

Not sure how I do this, so would appreciate your assistance.

Kind Thanks,
Paul.

[Lely]

Hello Paul,

Please try adding this custom javascript on Appearance > Customize > Custom > Edit Global Javascript:

jQuery( function( $ ) {
  
$('.search-trigger .x-face-button').on('touchstart click', function(e) {
    e.preventDefault();
    $('.x-searchform-overlay').toggleClass('in');
    $('.x-searchform-overlay').find('.search-query').focus();
  });

});

Then add search-trigger on your card element class field.

Hope this helps.

[Paul G]

Thanks so much – that worked like a charm!
Brilliant!

Can I just ask why the following code (which I already have) didn’t work when I typed the x-search-btn class in the card class?

jQuery(document).ready(function($) {
var $trigger = $(‘.x-search-btn’);
var $formWrap = $(‘.x-searchform-overlay’);
var $input = $formWrap.find(‘.search-query’);
$trigger.click(function(e) {
e.preventDefault();
$formWrap.toggleClass(‘in’);
$input.focus();
});
});

[Nabeel A]

Hi again,

Glad we could help. You might not have selected the right class for the trigger button.

Have a nice day!

[Author]

Posts