Fibosearch shortcode not working on mobile

Hi @melanie71

Let’s try the solution that listens to the DOM elements for changes and when the wrong search bars appear, the fixer reinits them.

Open the functions.php in your Child Theme and add the code at the end or install the Code Snippets plugin and apply this code as a snippet.

<?php

add_filter( 'dgwt/wcas/scripts/fixer', function ( $fixer ) {
	$fixer['broken_search_ui_hard'] = true;

	return $fixer;
} );

Regards,
Kris

Hi Kris

Thanks for your reply! Unfortunately that doesn’t appear to have resolved the issue – do you have any other suggestions?

Regards

Melanie

Hi Kris – really hoping to get a resolution to this issue. Do you have any other ideas about how to fix this major problem?

Regards

Melanie

Hi @melanie71

Sorry for the late reply. Please try this solution:

// FiboSearch mobile fix
add_action( 'wp_footer', function() { ?>
	<div id="fibosearchMobile" style="display: none !important;">
		<?php echo do_shortcode( '[fibosearch]' ); ?>
	</div>
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('body').on('click', '#fibosearchMobileButton', function(e){
				e.preventDefault();
				setTimeout(function() {
					jQuery('#fibosearchMobile .js-dgwt-wcas-enable-mobile-form').click();
				}, 100);
			});
		});

		function checkScreenSize() {
			var windowWidth = jQuery(window).width();
			var $fibosearchButton = jQuery('<div id="fibosearchMobileButton"><i aria-hidden="true" class="icon icon-search11"></i></div>');
			
			var $elementorButton = jQuery('.elementor-element-d5e7bbd #fibosearchMobileButton');

			if (windowWidth < 992 && $elementorButton.length === 0) {
				jQuery(".elementor-element-d5e7bbd .elementor-element-populated").prepend($fibosearchButton);
			} else {
				$elementorButton.detach();
			}
		}

		jQuery(document).ready(function () {
			checkScreenSize();
			jQuery(window).on("resize", checkScreenSize);
		});
	</script>
	<style type="text/css">
		@media(max-width: 992px) {
			.elementor-element-94be38d {
				display: none !important;
			}
			
			#fibosearchMobileButton {
				display: block !important;
			}
		}

		#fibosearchMobileButton {
			display: none;
			width: 25px;
			height: 25px;
		}
	</style>
	<?php
}, 9999 );

You have two ways to add this code to your theme:

1. Open the functions.php in your child theme and add the code at the end.
2. or install the Code Snippets plugin and apply this code as a snippet.

Regards,
Kris