Ajax Pro Search layout change

[Celin72]

Hi Ernest,

Thank you for the wonderful plugin.
My customer wants changes to the layout as shown below. Can you please help me to achieve this?

Requirement 1 : The layout is as shown in Now.png. I would like to get as Change-required.png.

I want to remove the arrow icon pointing down to show and hide advanced option. Instead I would like to add a text below the search bar like “Advanced Search” to show and hide the category options.

Requirement 2 : I have 9 categories, Now all the categories list one below the other. I like to show the categories Strand A to Strand E in one column under the title “Filter by Strands”. In the second column I want to list all the Year categories from Year 7 to Year 10 with title “Filter by Year”.

All of them are normal WordPress categories. Now I get only ‘Filter by Categories’ title above categories.

The website is private and is hosted with WordPress.com. Looking forward to hearing from you soon.

Kind regards
Celin

[Ernest Marcinko]

Hi,

1. Well, you can try a custom CSS for that:

.prosettings, .prosettings .innericon {
    width: 80px !important;
}

 .prosettings .innericon::after {
    content: "My Text" !important; 
    color: black;
    line-height: 32px !important;
 }

.prosettings .innericon svg {
    display: none !important;
}

The values need to be adjusted of course, but it should be very close to a possible custom solution.

2. I’m afraid this is only possible if the items are in separate taxonomies. Items from the same taxonomy will be displayed in the same fieldset group. This will very likely change in a future release once we finish the rework on the filters interface.

[Celin72]

Thanks you for the quick reply.

Requirement 1: Works fine – even though customer wanted the text outside and below of the search bar, this is also acceptable. Thanks for that.

Requirement 2: I tried to write code as below but doesn’t seem to work. My intention is to add a class to the div with class name asp_option_label and value “Strand E – Morality and Justice”. So I can add a space and then title after that if cannot make in to two column.

Can you please help me to fix this?

var filter = document.getElementsByClassName(“asp_option_label”);
if (‘ Strand E – Morality and Justice’ == filter[0].innerHTML)
{
filter[0].setAttribute(“class”, “new-filter”);
}

Looking forward to hear from you!
Celin

[Ernest Marcinko]

Hi,

2. Sure, that is a great idea. I recommend something like this instead:

  jQuery(function($){
    $('.asp_option_label').each(function(){
		if ( $(this).text().trim() == 'Strand E – Morality and Justice' ) {
			$(this).addClass('new-filter');
		}
	});
  });

Make sure this is added as a footer script so the page is rendered before it is executed.

[Celin72]

Hi Ernest.

Thanks for the response. Unfortunately this doesn’t seem to append Class. Is there anywhere in plugin files I can do changes to make it appear like that. I do manual update for the plugin so I can replace the code for every plugin update until this feature is released.

Thanks

[Ernest Marcinko]

That should work, I was able to test it on our local server. Try this variation maybe placing to the functions.php file in your theme directory:

add_action('wp_footer', 'asp_add_script_to_footer', 999999);
function asp_add_script_to_footer() {
	?>
	<script>
	jQuery(function($){
		$('.asp_option_label').each(function(){
			if ( $(this).text().trim() == 'Strand E – Morality and Justice' ) {
				$(this).addClass('new-filter');
			}
		});
	});
	<script>
	<?php
}

If no luck, then you can try the filters templating feature. That lets you make changes to the filters layout without losing them on plugin updaes.

[Celin72]

Thank you. The custom class is added when code is changed as above. Also I’ll have a look at the filters templating feature for more options.
Thanks for your support and prompt reply as always.

Best wishes
Celin

[Ernest Marcinko]

You are very welcome 🙂

[Author]

Posts