Let’s say you had an Elementor popup that was part of your Add Listing Flow where users could search for listings on your website with the intention of seeing what was available for claiming.
You can see a live example of this on the Club’s Canvas Starter Site.
- Visit the Canvas Get Started page.
- Click the Claim button.
- Within the Claim Listings popup, search for listings on the platform.
When you perform the search in step 3, a code snippet is what makes that possible.
If you don’t want to mess with the code snippet, you can download the Claim Listing popup, which already includes the snippet and the functionality you saw in step 3.
Recreate the Claim Listings Popup
- Create and design your pop-up.
- Generate your MyListing Quick Search shortcode (Theme Tools > Shortcodes > Quick Search).
- Add Elementor’s Shortcode widget and paste your shortcode into it.
- Add Elementor’s HTML widget anywhere within your popup (it won’t show on the front end).
- Paste the code snippet below into the HTML widget.
- Save changes.
jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
jQuery(function ($) {
$('.quick-search-instance').each(function (i, el) {
var instance = {};
instance.el = $(this);
instance.input = instance.el.find('input[name="search_keywords"]');
instance.default = instance.el.find('.default-results');
instance.results = instance.el.find('.ajax-results');
instance.spinner = instance.el.find('.loader-bg');
instance.view_all = instance.el.find('.all-results');
instance.no_results = instance.el.find('.no-results');
instance.last_request = null;
instance.input.on('input', MyListing.Helpers.debounce(function (e) {
quicksearch(instance);
}, 250)).trigger('input');
if (instance.el.data('focus') === 'always') {
instance.el.find('.header-search').addClass('is-focused');
} else {
instance.el.on('focusin', function () {
instance.el.find('.header-search').addClass('is-focused');
}).on('focusout', function () {
instance.el.find('.header-search').removeClass('is-focused');
});
}
});
var quicksearch = function quicksearch(instance) {
instance.spinner.hide();
instance.results.hide();
instance.view_all.hide();
instance.no_results.hide(); // Show default categories if no search term is present.
if (!(instance.input.val() && instance.input.val().trim())) {
// If a previous ajax request has been sent, abort it.
if (instance.last_request) {
instance.last_request.abort();
}
instance.last_request = null;
instance.default.show();
return;
} // Show loading animation.
instance.default.hide();
instance.spinner.show(); // Prepare query args.
var params = $.param({
action: 'mylisting_quick_search',
security: CASE27.ajax_nonce,
s: instance.input.val().trim()
}); // Retrieve search results.
$.ajax({
url: CASE27.mylisting_ajax_url,
type: 'GET',
dataType: 'json',
data: params,
beforeSend: function beforeSend(request) {
if (instance.last_request) {
instance.last_request.abort();
}
instance.last_request = request;
},
success: function success(response) {
instance.spinner.hide();
if (!response.content.trim().length) {
return instance.no_results.show();
}
instance.results.html(response.content).show();
instance.view_all.show();
}
});
};
});
});