Customize ajax search

[ciaobikeitalyParticipant]

hello guys
i’m testing out your plugin and i’m having some issues customizing it, even if it’s a very flexible and awesome plugin.
but i’d want to edit a lil bit more the layout options but i struggle with finding a solution for what I want. I would be very grateful if you could please help me.

1) i’d like that the main container of the results to be at 100% width (like the main container of the site) like in the first screenshot
i saw there is an inline css code generated for this, but i have no idea how can I manipulate it. OR , could I add instead a .container class and ignore the inline CSS?

2) i’d like to show the WC products in a left floated div (class results) and then in a right floated container the first 6 “keywords” with the “All results” button below (as in the previous screenshot)
i’ve set up as the second source the product tags, but it’s all together like in the second screenshot

how can I find a solution for these changes?
is there a way to edit the file \ajax-search-pro\includes\views\asp.shortcode.results.php without losing them after update? if so, I could in some way create the second container and show there the product tags with the button

PS: can’t attach 2 files in this ticket so there is only 1 image with both screenshots

thanks!
Regards

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

1. The results container in floating mode (default) always follows the search bar width, that to make sure it fits to the screen. It very much depends on the exact situation, but for starters I would try a custom CSS, something like this:

div[id*=ajaxsearchprores] {
    width: 90% !important;
    left: 5% !important;
}

.. or maybe this one:

div[id*=ajaxsearchprores] {
    width: 100% !important;
    left: 0 !important;
}

The results containers parent is always the ‘body’ element, and is positioned absolutely in hovering mode. Therefore these rules will tell it to get a 100% or 90% width, relative to the body width, and give it a left position of half of the remaining body width – 0 in case of 100%, and 5% in case of 90%.

This is just a wild guess, again, this depends on the exact site structure and layout. For manipulation, always use custom CSS, that will make sure it’s not overwritten during updates.

2. This will very likely require a major customization, depending on your situation.

There is actually a way to make changes to some of the layout files as described in this knowledge base article: Results templating

Changing any other files will definitely get lost after an update. I would highly recommend not changing anything in the \ajax-search-pro\includes\views\asp.shortcode.results.php file if possible. If you need to place things in there, either use a javascript along with the Plugin javascript API, or use the action points found in that file.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts