Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › A variety of topics
This topic contains 15 replies, has 2 voices, and was last updated by NaturesLens 5 years, 10 months ago.
- AuthorPosts
- December 21, 2017 at 12:53 pm #15974
How can I change it to close settings on click away from settings panel – it is bad UX to have this remain open over search results
How can I change it to remove “search in comments” from the search options panel – I have comments globally disabled – this setting in the search options panel makes no sense – this is pretty common to not have comments enabled
How can I add arrow so it looks like menus and search panel – I have a CSS arrow at the top of my menus and the search options panel – I cannot get it to apply to the main search panel – can you give any clue on what I should be applying this to? I am CSS competent, but this is causing issues – see screenshot
How can I add a font awesome icon before each title according to Post Type – in the same way that I can add a cost for events (if the cost field is present)
How can I change it to NOT display results when no search text – again this is bad UX – leave the text box empty, change a setting in the search options panel, it executes an empty term search
CPT tagged with tag ‘Past Event’, this is entered into the Exclude terms by ID box, as 1575, but the event still appears in the search list – have I misunderstood how to exclude items from the search?
Attachments:
You must be logged in to view attached files.December 21, 2017 at 1:13 pm #15984Hi,
1. It depends on the viewpoint, most users requested it to be this way by default. You can change that here: https://i.imgur.com/BHiyRkU.png
The settings box (in hovering mode) automatically closes whenever a click is made to the body element, except when the origin is any of the search elements.
Another possibility is to change the settings box z-index to be lower as the results box: https://i.imgur.com/onNUYA0.png2. Here: https://i.imgur.com/u3KcyhK.png
Again, this depends on the viewpoint. A lot of users have requested this, it had been added.3 – 4. Will check on this a bit later on my test environment. I believe a few lines of custom CSS will most likely do the trick. I will have to test it first.
5. Here, by changing the number of characters to trigger the search: https://i.imgur.com/S3fHYFC.png
Again, most of users prefer it to execute an empty search with the settings changed. Initially it was set to 3, but due to the large number of requests, it was changed to 0.6. I believe that is not the box you are looking for. On the <span class=”code”>Advanced Options -> Exclude results</span> panel you can exclude CPT by categories/taxonomyies: Exclude CPT results by terms documentation
I hope this helps!
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
December 21, 2017 at 1:16 pm #159864 – do you want access to my test server to see the CSS i am using?
5 – can it be an option to not run if there are less than X characters in the search box?
6 – I thought I had done that – will check again
December 21, 2017 at 3:38 pm #159941, 2, 5, – sorted thanks
6 – worked your way – but got crowded – so I will set up a taxonomy of my own for this purpose – and then follow your guidelines above – and it will work but be neater
So just some CSS to sort out
December 21, 2017 at 4:16 pm #15996Okays.
Best,
Access to the test environment would help a lot actually. I will have to see the exact icon code to use there, it would help with the arrow as well. Thanks!
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
December 21, 2017 at 4:41 pm #16000You cannot access this content.December 21, 2017 at 4:47 pm #16001You cannot access this content.December 21, 2017 at 4:49 pm #16002Thanks, will look into this tomorrow, as I’m just leaving the office in a few minutes.
Please note that customization requests are not part of the support process, however I will try to help you as much as I can with this. Most of it looks doable within reasonable time and with a few lines of code (possibly).
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
December 21, 2017 at 5:01 pm #16003Cheers – appreciated – I have tried my standard arrow CSS on a number of the containers – and cannot get it to look right – if you can just give me a pointer then that would be awesome
December 22, 2017 at 11:04 am #16008Hi!
I think I may have found a solution for the CSS arrow, at least it seemingly works on my end.
To make it work:
1. Make sure to remove the custom CSS you added for the arrow, it will conflict with this solution. From the browser inspector, this should be removed:#ajaxsearchprores1_1.vertical:before { content: ''; position: absolute; border-style: solid; border-width: 0 9px 9px; border-color: #cccccc transparent; display: block; width: 0; z-index: 0; top: -12px; left: 21px; }
2. Add this custom CSS instead:
.asp_r { overflow: inherit !important; } .asp_r:after, .asp_r:before { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 1; } .asp_r:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 8px; margin-left: -8px; } .asp_r:before { border-color: rgba(204, 204, 204, 0); border-bottom-color: #ccc; border-width: 12px; margin-left: -12px; }
3. Clear your cache if you use any, then reload the page. It should look like this: https://i.imgur.com/xdrJgQJ.png
Let me know how it goes. I’m not yet sure about the icons though, will try to figure out something for that as well.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
December 22, 2017 at 3:05 pm #16017Almost there – I still have slight positioning errors
Attachments:
You must be logged in to view attached files.December 22, 2017 at 4:01 pm #16019Hi,
There appears to be another previous custom code that conflicts, make sure to remove that as well:
Best,#ajaxsearchprores1_1.vertical:after { content: ''; position: absolute; border-style: solid; border-width: 0 7px 7px; border-color: #fff transparent; display: block; width: 0; z-index: 1; top: -7px; left: 23px; }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
December 25, 2017 at 10:31 am #16030All working now – looks great – for adding the icon before the event name – how about – in the class of the href, insert a sanitised name of the custom post type – that way I can identify it in CSS and use a :before statement against it
Do you think that is a valid suggestion?
December 25, 2017 at 10:32 am #16031Oh – and Happy Christmas!
December 28, 2017 at 12:37 pm #16060I hope you had a Happy Christmas too 🙂
That is exactly the solution what I was thinking of, but it is a bit difficult, as you will have to make changes to the result template files.
Before starting, I suggest quickly reading through the Results templating knowledge base article. In short, it’s a similar way of making direct and permanent changes to the HTML output of the results using a template system, similarly to WooCommerce.
Basically, you need to make a new folder in your theme directory, then copy the result template files from the search plugin folder to that, where you can modify them – it is all explained in the article.Then, depending on the result layout you have, you open the corresponding template file. Let’s say, you use the vertical layout, so then:
– Open the vertical.php file
– then scroll to line 49-53, which prints the result heading and the link elements, it looks like this:
– Now, the $r variable holds the result object, and the $r->post_type holds the post type, if this is a post type result, otherwise it is not defined. My solution would be to add the asp_res_{post_type} class to each result, which will result in asp_res_post for posts ‘ asp_res_page for pages etc.. For that, change those lines to:
Now, for each post type, the asp_res_{post_type} class will be added to the link element, so you can target them with CSS rules, like:
a.asp_res_post::before { /* CSS rules for posts here */ } a.asp_res_page::before { /* CSS rules for pages here */ }
That should help you get started with this.
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.