Customization of Search Page

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Customization of Search Page

This topic contains 10 replies, has 2 voices, and was last updated by

 
Participant
1 year, 11 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #25566

    Participant

    Hi Ernest,

    I would need a suggestion about 2 topics on my Search HomePage.

    FIRST ONE:
    I would like to have a homepage like the one attached, with the dropdown filter on the left and with the search bar on the right, at the same level (height).
    Is it possible to customize it in this way in Ajax Search Pro?
    If not, I know how to do it on Elementor but I don’t know how to associate the filter of Ajax to a widget on Elementor.

    So, just to be more clear, I see two ways:
    1) Customize it in this way through Ajax Search Pro settings (please suggest me how to do)
    2) Customize it in Elementor and link somehow a Dropdown filter set in Ajax with a dropdown menu (or something like that) set in Elementor.

    I hope the linking of point 2) would be possible, because I know that the connection with the results shown in a Search Results Page already works. I mean that I can set the results style on Elementor (in a template for Search Result Pages) while setting the logic on Ajax because it will override the results (logically) but not in the style.
    So, is it possible to create this connection also for Filters?

    SECOND ONE:
    I would also like to have the results of the search displayed like in the screen attached, which means on the same page of the search (not in Results Page) and with a customizable style.
    Also (differently from the screenshot) I would like to show in the Results cards also Time, Author and so on.

    So again, is it possible to reach this kind of customization through Ajax Search Pro Settings? If yes, how?
    If not, how to connect the results of the search with something set on Elementor?

    I tried with Posts widget, setting as Query ID the ID of the Search Instance (like this one: [wd_asp id=1] ) but it doesn’t seem working.

    I also know it is possible to show the results maybe with an Isotopic layout, but it does not seem customizable (for example in showing Time, Author…)

    Thanks in advance,
    Daniele

    Attachments:
    You must be logged in to view attached files.
    #25588

    Hi Danielle,

    1. A very similar example can be seen here. There is a tutorial on how to replicate that layout here.

    You have multiple options here. One is to use the shorcode generator, and another one is to use the elementor blocks, and put the settings shortcode in one, and the search shortcode in the other.
    I would probably recommend using the elementor modules, since you already using it and it might give you some benefits for editing margins/paddings etc..

    2. You are looking for the results shortcode here. It allows you to position the results from below the search bar to a different position on the same page. You can place this shortcode in an elementor module (try text or shortcode module if exists), like the other ones.

    For a similar layout, I would recommend using a search theme with the vertical layout. From the latest release you can also define multiple columns to it.
    You can also display results initially with the auto populate feature.

    Best,
    Ernest Marcinko

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


    #25611

    Participant

    Hi Ernest,

    Thank you very much for your precious hints!

    I reached something like that, however I still have some doubts that I hope you will help me to address.

    1. I am searching CPTs through taxonomy (I mean, I type a taxonomy term in the search bar and as result I get the CPTs which have that term associated).
    When I start typing, I receive in the dropdown box the suggestions of the possible results, but I would like to have the suggestions of the taxonomy terms.
    I saw on your website that this is possible, but I can’t get how.


    2. About this dropdown box, I would like something like the screenshot attached, where search bar and box results are a unique block.
    You can find what I reached on my website idlike.app, would you mind to suggest a CSS to reach the result in the screen attached?


    3. I notice (on my website) that when I start typing, the search bar (and the dropdown box) move a bit to the top, something like a half-centimeter but it is something weird. Do you maybe know why this happens and how to solve it?


    4. As I said in the first post, I would like to have a dropdown filter.
    
I got how to position it at same level of the search bar (thanks!) but how to customize it?
    
I do not find the related section in ‘Theme & Styling’, while I found the section for the result box, search bar and all the rest.


    5. Last one is a bit tricky, I understand if you won’t have the answer.
    I would like to avoid to be redirected to the Result Page on clicking the return button, in the cases when the result is not found! (usually I set To be redirected in Result Page)
    Do you think this is possible?

    I really thank you in advance for your help!
    Regards,
    Daniele

    Attachments:
    You must be logged in to view attached files.
    #25640

    Hi!

    1. I think you are looking for the taxonomy terms as results feature.

    2. Well, this might hive you something close to that:

    .asp_r {
        border: none !important;
        border-left: 1px solid #dfe1e5 !important;
        border-right: 1px solid #dfe1e5 !important;
        border-bottom: 1px solid #dfe1e5 !important;
        margin-top: -12px !important;
        padding: 0 !important;
    }
    
    .asp_m .probox {
        border: none !important;
        box-shadow: none !important;
    }
    
    .asp_m {
        border-radius: 12px !important;
        border: 1px solid #dfe1e5 !important;
    }

    3. I think it is due to the results position is set to “block” instead of the default “hover” mode, and the results container is also part of that block, which is centered overall.

    4. Drop-downs are very hard to customize on cross platforms, so there is only a built in theme that we use. The chosen script drop-down is even more problematic sometimes. You can start off with something like this:

    .chosen-container, 
    .chosen-container .chosen-single {
        background: none !important;
        border-radius: 12px !important;
    }
    
    .chosen-container .chosen-single {
        min-height: 58px !important;
        line-height: 45px !important;
    }

    5. I’m afraid that is not possible. It is not possible to tell before the redirection if there is any results – as the results are parsed after the redirection in that case, in a separate process.

    Best,
    Ernest Marcinko

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


    #25675

    Participant

    Hi Ernest,

    thanks for your reply.

    1. I think you are looking for the taxonomy terms as results feature.
    Well, I think I wrongly explained the situation.
    I actually does NOT want Taxonomy Terms as result, my results must be CPTs.
    I just would like to have, in the dropdown as suggestions, the taxonomy terms but still have CPTs as results.

    Example:
    CPT: Watches
    Taxonomy: Color

    CPT#1: Watch1 -> Taxonomy term associated: Blue
    CPT#2: Watch2 -> Taxonomy term associated: Red

    In the search bar I type ‘Re‘ and, as a suggestion, in the dropdown I see ‘Red‘ -> so I type ‘Red‘ and search.
    In the search result page, I find ‘Watch2

    I got that on your website I misunderstood and it is not present this example.
    How can I reach it (if it is possible to reach)?

    2. Well, this might hive you something close to that:
    .asp_r {
    border: none !important;
    border-left: 1px solid #dfe1e5 !important;
    border-right: 1px solid #dfe1e5 !important;
    border-bottom: 1px solid #dfe1e5 !important;
    margin-top: -12px !important;
    padding: 0 !important;
    }

    .asp_m .probox {
    border: none !important;
    box-shadow: none !important;
    }

    .asp_m {
    border-radius: 12px !important;
    border: 1px solid #dfe1e5 !important;
    }

    This is NOT really working right now because as you can see here -> https://idlike.app I add now some shadow on the focus of the input box, but I’ll come back to this point when the stuff with more priority will be fixed.

    3. I think it is due to the results position is set to “block” instead of the default “hover” mode, and the results container is also part of that block, which is centred overall.
    What I did is that I created a new section on Elementor with 4 column, first and last column are empty (for centring the whole layout), second column there is the dropdown, fourth one there is the search bar. I didn’t change the CSS property of any Div. I did a few tries but really I’m not being able to fix this..

    4. Drop-downs are very hard to customize on cross platforms, so there is only a built in theme that we use. The chosen script drop-down is even more problematic sometimes. You can start off with something like this:
    .chosen-container,
    .chosen-container .chosen-single {
    background: none !important;
    border-radius: 12px !important;
    }

    .chosen-container .chosen-single {
    min-height: 58px !important;
    line-height: 45px !important;
    }

    Ok, now I know which selector to work with thank you. But the problem is that right now, both with this CSS both without any CSS the dropdown is really not clearly visible as you can See from the screenshot here: https://imgur.com/LXc68p8

    5. I’m afraid that is not possible. It is not possible to tell before the redirection if there is any results – as the results are parsed after the redirection in that case, in a separate process.
    Ok thank you.

    Thank you very much in advance,
    Daniele

    #25686

    Hi,

    1. Not as a drop-down, but as the autocomplete or keyword suggestions, you can select a taxonomy as the source.

    3. Make sure that the results layout is the default “hover” and not “block”, here.

    4. There is something wrong with the overflow setting on some parent element there, as it “cuts” off the bottom of that box. The actual size of that section is bigger then the visible area, and a “hidden” overfolw value will clip that (cut it at the end).
    The only way to fix that is to correct the overflow values on the affected elements.
    You can try this custom CSS to see if it makes any difference:

    section {
        overflow: visible !important;
    }

    I still recommend finding the correct selector to apply this to.

    Best,
    Ernest Marcinko

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


    #25711

    Participant

    Hi Ernest,

    thanks a lot, points 3 and 4 are clear!

    About point 1, I knew the chance to use autocomplete and keyword suggestions, but they appear only when there are no results and autocomplete is just one word…that’s why I was looking for a drop drown with all the taxonomy terms suggested.

    Are you maybe thinking to implement this?
    I think it could be very interesting, actually if you give the chance to search CPTs through taxonomy terms, why do not show the possible terms to be used with the drop-down (like Google)? 🙂

    Thanks,
    Daniele

    #25724

    Hi,

    Well, I am not sure yet. It might be implemented in the future, but definitely not within the next releases.

    Best,
    Ernest Marcinko

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


    #25727

    Participant

    Ok Ernest, thank you!

    I would ask you to kindly let me know when (and if) you are going to implement this awesome feature 🙂

    Regards,
    Daniele

    #25730

    Hi Danielle,

    You can subscribe to the update notifications email list if you want to, it will automatically end you a link to the changelog once a major update is released.

    Best,
    Ernest Marcinko

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


    #25732

    Participant
    You cannot access this content.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.