Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Ajax Pro Search layout change
This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko 3 years, 3 months ago.
- AuthorPosts
- May 10, 2021 at 5:56 am #33141
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
CelinAttachments:
You must be logged in to view attached files.May 10, 2021 at 1:15 pm #33157Hi,
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.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
May 11, 2021 at 4:44 am #33166Thanks 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!
CelinMay 11, 2021 at 9:41 am #33170Hi,
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.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
May 12, 2021 at 7:17 am #33178Hi 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
May 12, 2021 at 7:25 am #33179That 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.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
May 13, 2021 at 1:40 pm #33226Thank 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
CelinMay 14, 2021 at 11:48 am #33230You are very welcome 🙂
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.