ASP search duplicate instance and settings issue

[sanmita0957]

Hi Ernest,

Good day to you. I am having some issues with display of search in the header of mobile version. Please see the video attached. It seems to be duplicating or flickering the search header instance and only after scroll we see a second instance that works fine, also issue with settings display. I have shown in the video file youtube link below. Please feel free to make any changes to my website as I have complete backup.

Youtube link : https://youtu.be/0V1BnQsECjk

Many thanks
Sandy

[Ernest Marcinko]

Hi,

Looks like the theme sticky header script is making a duplicate of the search – one for the regular header, and one for the sticky one. That is an extremely bad programming practice – as event handlers are not copied over, and cannot be copied in any way either.

There is a special bypass option in the plugin that you can try to activate, here: https://i.imgur.com/AAeXYHa.png

However that may still not work, this should be resolved from the menu script unfortunately.

[sanmita0957]

Hi Ernest,

I tried to do the recommendation in the the CSS and JS Settings but it did not work.

I contacted the theme help desk Re:Hub, it is one of most popular theme in Envanto Market if not best, but the helpdesk said:
“you are using custom plugin for search. Please, write to author of plugin if you have issues with it. We can help you with regular search of theme, which has no issues”

Please let me know what should be the next step I do not want to leave ASP plugin this is so cool.

Many thanks
Sandy

[Ernest Marcinko]

Hi Sandy,

It’s a shame they don’t help you with that.

Well, I can try to recommed some custom code to somehow force that function – but this would be way better to resolve without the sticky menu duplication, that prevents any event based thing to be placed to the header.

First, use this custom CSS:

.asp_m .asp_sb {
    display: none !important;
}

.search-form-inheader {
    z-index: 1 !important;
}

.sticky-effects.search-form-inheader {
    z-index: 9999999 !important;
}

Then, some custom code might be required. Try adding this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case!

add_action('wp_footer', 'asp_try_fixing');
function asp_try_fixing() {
	?>
	<script>
	jQuery(function($){
		$('.icon-search-onclick').on('click', function(){
			setTimeout(function(){
				ASP.fixClones();
			}, 500);
		});
	});
	</script>
	<?php
}

Please note, that this may not work at all.

[sanmita0957]

Hi Ernest,

You know what, I applied the code and it seems to work almost 🙂 Great news. The search setting dropdown box when clicked does not respond else everything works fine. Can you please fix that too.

Many thanks
Sandy

[sanmita0957]

Hi Ernest,

I followed up again with theme support and they said “Our sticky option doesn’t create copies, it wraps existed code and stick regular menu” , I thought of sharing with you if it makes any sense.

Many thanks
Sandy

[Ernest Marcinko]

I understand, but unfortunately that is not true – a script does make a duplicate of the wrapped code: https://i.imgur.com/89xyiSH.png
The “.asp_m_1_2” selector represents the second instance of the search ID=1. Once I open the menu, and scroll down, there is immediately a copy made within the same wrapper, and that code on the screenshot shows, that there is two of them after that point. I’m not saying it is the theme doing that, but there is certainly a 3rd party script, that creates a carbon copy.

I’m sorry, but this is already way beyond what I can do to correct an implementation issue, that is not caused by the plugin.

[sanmita0957]

Thank You Ernest , you can close this ticket.

[sanmita0957]

Hi Ernest, Just to let you know I am attaching my theme’s sticky header javascript file. I did not find any duplicate creating instance there. Hence I doubt this might be created by ASP.

Many thanks
Sandy

• This reply was modified 5 years, 12 months ago by sanmita0957.

[Ernest Marcinko]

Hi,

There are .wrapAll() and .unwrap() calls in that file, but I don’t think it is the cause either – it can be it, but I cannot say for sure. It can be any of the theme .js files, as well as an inline JS code. All I can see, this is attached to the body “scroll” handler. These two are the duplicated nodes, if that helps: https://i.imgur.com/eZhbDC2.png

[sanmita0957]

Thanks Ernest,

I tried deactivating ASP and reinstall ASL and it seems the duplicate sticky header occurs with both version. Only difference is ASL the top layer sticky header is responsive and ajax works fine while in ASP the top layer sticky header does not respond, hence creates issues for the users.

I do not mind duplicate header if both layers are equally responsive and ajax works fine there.

thanks

[Ernest Marcinko]

Of course it occurs, as the plugin is not causing the problem. You can put anything into there, it will duplicate unfortunately.

The settings probably work with the live version, as that only supports a single search instance, it is much simpler by that way. The live search (when typing) was also working in the Pro version, the issue only was the drop-down search trigger – which is not working because of the duplication unfortunately.

[Author]

Posts