Mobile theme and a few other questions

[EpiphoraParticipant]

Hi there, I just bought this plugin recently and I’m loving it so far! I just have a few questions. One, I use WPTouch (CMS child theme) to display a mobile theme. Ideally I would love to get Ajax Search Pro working on the mobile theme. I have it turned on for mobile but it’s not showing up, probably because it’s a whole different theme than my desktop version. Do you have a way for me to set the mobile theme to show the Ajax Search Pro box instead of the default? Would it be possible to show Ajax Search Pro results on the results page but only on mobile?

I’m showing tags and categories as search results as well. They are showing up first, and I limited them to 3 results but is there a way to have them sorted with the rest of the results by relevance, or does it have to show them grouped together? The tags/categories are also not showing images although some of them have images (try searching for “LELO” for example). I’m not sure which “custom field” this would be if it is one.

Results without an image also don’t appear to be using the default image I’ve uploaded.

It looks like I’m not supposed to use the search settings (filter by category, search only in content, etc) when I’m using the index engine, is that true? Is this something that might change in the future?

Thank you so much for your help with these questions!

[EpiphoraParticipant]

Sorry, one more question as I customize the look of my search box: is there a way to display the image under the title of the post in results? I’m using the Simple Grey Vertical theme but I could switch to another if I should.

[Ernest MarcinkoKeymaster]

Hi!

Thank you for your kind words, and the proper details, it helps me a lot!

I just checked the site on a mobile device, but I am seeing the plugin in that view as well: https://i.imgur.com/3KcUhpo.png
I guess you are not using the mobile theme anymore?
If it is a whole different theme, then you might have to replace the search form there manually, I guess because it does not use the default ‘get_search_form()’ method as the desktop version. If you want, I can take a look at it via FTP to see if I can find the file responsible, but right now I’m getting the same layout for mobile devices as well, so I am not sure where to look.

Results without an image also don’t appear to be using the default image I’ve uploaded.
Indeed, it is an issue with the current release. It affects most of the non post-type results. I have added a custom code to the functions.php file via FTP in your theme directory to bypass the issue, until it is resolved in the upcoming release. For future reference, the custom code can be found here.

The tags/categories are also not showing images although some of them have images
It happens, because by default, there is no way to associate images with categoris/terms in WordPress. I checked the ‘LELO’ tag, and I see that there is a custom content editor, which allows adding media attachments to the term descriptions.
Interesting solution, luckily it is not too difficult to get those images. The custom code I added to resolve the previous issue includes a solution for this as well.

Well, the category results are from a separate query, so they are not mixed up with the rest of the results. You can however change their position here: https://i.imgur.com/FAWNZEz.png

It looks like I’m not supposed to use the search settings (filter by category, search only in content, etc) when I’m using the index engine, is that true? Is this something that might change in the future?
That is not true, the filters does work with both engines 🙂

is there a way to display the image under the title of the post in results?
I think so, using a custom CSS code. Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

.asp_content {
    display: flex;
    flex-wrap: wrap;
}

.asp_content h3 {
    order: -1;
}

.asp_content .asp_res_image_url,
.asp_content .asp_image {
    width: 100% !important;
    order: 0;
}

After that, it should look something like this: https://i.imgur.com/0cndb7K.png
I think this is as close as it gets.

I hope this helps!

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

[EpiphoraParticipant]

Hi Ernest,

Awesome! Thank you so much for your help! This is looking good.

I’m not sure what was/is going on with WPTouch (my mobile theme plugin)… you’re right, it was showing the desktop theme, but after deactivating/reactivating plugins I’m now seeing it on mobile. Can you see it too? I’m using the CMS Child theme with it, which is located in /wp-content/wptouch-data/themes/cms-child/default.

So I’ve turned on the search settings filter by category, search only in content etc, but it doesn’t seem to be working correctly. For instance if you search for the word “banana” but only in the “Reviews” category, posts under other categories (such as “Hell Yes”) and pages (such as “Toybox”) show up in the list.

Thanks for that CSS. Is there a way to float the images to the left or right next to the post text? That would be better than having the image on its own line in the center.

Really really appreciate your help, thanks so much!! This plugin is awesome.

[Ernest MarcinkoKeymaster]

Hi,

You are welcome 🙂

Yes, now I see the mobile version, and I was able to replace the search bar. I made a new child theme file within the /wp-content/wptouch-data/themes/cms-child/default directory called header-bottom.php. That file contains the header search form. I replace it with the plugin shortcode.

Images: Actually, it is possible to have the images within the description, but a small modification is required. I have made a custom templating directly within your theme folder, you will find it under the wp-content/themes/suffusion/asp/ directory + added the vertical.php file there. Please make sure to archive that directory.
Long story shortt, this is a method I developed, which makes possible to override the default structure of the search results files. It is sort of like child themes. I have made a modification within the vertical results file to display the title first, then the image.

Now, all you have to do is to remove all the previous custom CSS I suggested, and instead, just use this one:

.asp_content h3 {
    display: block !important;
    width: 100%;
}

These modifications should result in a layout like this: https://i.imgur.com/LMYSNKb.png

The checkbox issue: By default the plugin displays items that does not have any associated term from the filtered taxonomy(ies). Basically it’s to prevent filtering items that should not be filtered. It works as it should for most cases, but depends on the site and structure.
In your case I believe this default configuration is not the best one, so I recommend changing these two options: https://i.imgur.com/99lFL4q.png

You can try experimenting with these two options, but I strongly believe that this is the closest to your expectations.

I hope this helps!

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

[EpiphoraParticipant]

I’m SO excited about how this is all coming together! Thank you so much!

The search on mobile looks great. Is there a way to have the results page display results from Ajax Search Pro? I don’t want it to display those results on desktop, but on mobile it would be nice. Also, is it possible to change the width of the results so they don’t take up the entire screen? I ask because once it takes up the whole width of the screen it is difficult to scroll vertically to the end of the results.

How can I change the width of the results on the desktop version and is there a downside to making it wider?

I also added a bit of CSS myself to space out the results, can you verify that this is correct? Just wanted more space between results, under the post title, and on the right side of the featured image.

div.asp_w.asp_r .results .item {padding-bottom:10px;padding-top:10px;}

#ajaxsearchprores1_1.vertical .results .item .asp_image, #ajaxsearchprores1_2.vertical .results .item .asp_image, div.asp_r.asp_r_1.vertical .results .item .asp_image {margin-right:13px;}

#ajaxsearchprores1_1.vertical .item .asp_content h3, #ajaxsearchprores1_2.vertical .item .asp_content h3, div.asp_r.asp_r_1.vertical .item .asp_content h3 {padding-bottom:5px;}

Thank you!!

[Ernest MarcinkoKeymaster]

You are welcome!

Width on mobile
Sure, by adding a max-width attribute via custom CSS:

.wf-active .asp_r_1 {
    max-width: 80%;
}

This should only apply on mobile devices, as I noticed that the wf-active body class is not present on desktop.

Width on desktop
To make it wider, you need a similar code, but this time changing the min-width attribute instead:

.device-desktop .asp_r_1 {
    min-width: 400px !important;
    margin-left: -200px !important;
}

You can skip the margin-left value here, I only added it to shift the results block to the left, since the width change will push it to the right. You will have to experiment with the values as you like.

There isn’t any downside for this change, the plugin script should still be able to calculate the correct results drop-down location.

Results override
To display the plugin results on the results page, you can enable the results override feature. It works for most themes, unless they have a custom override active. Unfortunately this cannot be set to mobile devices only.

Those custom CSS codes look correct to me, great job!

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

[EpiphoraParticipant]

Yessssss! I’m so happy with how the search is looking. Hopefully this will be my last question! I set “Category/Tag/Term results limit” to 3 but when I search for some terms it will show more. Try “Pure Wand” and you’ll see 4 tags listed. Do you know why?

Thank you SO much!

[Ernest MarcinkoKeymaster]

You are welcome 🙂

I have checked via FTP, and it turns out it is a bug, that appears when using a primary and secondary logic. The script was not counting the previous number of results, so the secondary logic had the same limit as the primary.

I have made a tiny change to the plugin files to prevent that, now it should be all right. I will include this fix of course in the next release, so you don’t have to worry about it anymore.

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

[EpiphoraParticipant]

Wonderful! Thank you so much! You’ve been so helpful. I’m very happy I purchased the pro version!

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[EpiphoraParticipant]

Hi again Ernest! I noticed today that in the search results dropdown, the tags/categories are again not showing images although some of them have images. You had previously added a fix to my functions.php but now it does not seem to be working? Can you look into it? Thank you!

[Ernest MarcinkoKeymaster]

Hi,

I have made a correction on the code, it seems like the image field was not empty in all cases, so it did not execute as it should. I believe it should be working now in most cases.

For future reference, this is the modified version:

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

[EpiphoraParticipant]

Yes, perfect! Thank you!

[Author]

Posts