Adding a Datafeedr store to your WordPress blog is great for monetizing traffic but then you run into the issue of allowing your users to search both your shop and your posts.
- Datafeedrs search box only searches the Datafeedr products.
- On top of that, the Datafeedr search box doesn’t search categories – it ONLY searches products forcing your users to think
- Finally, Datafeedr’s search box requires the user to hit enter and then wait for the search page to open (it doesn’t use ajax).
I’ve fixed all these problems by creating an Ajax Search Plugin for Datafeedr. NOTE: This plugin is for the Datafeedr Factory version, not the Datafeedr WooCommerce version – there will soon be a WooCommerce Ajax search available in our shop.
Features
This ajax search plugin will search Datafeedr categories, Sale Items, Products AND your WordPress Posts, Pages and Comments as the user types.
It presents the results in a floating 3 column panel like this (although you can change how it looks using CSS):
It’s incredibly fast since it’s only accessing the database and doesn’t need an entire new page to load, so it helps your users find what they want far more quickly.
No longer do you need to have two different search boxes on your page – now 1 single search box will allow your users to search EVERYTHING on your website.
Installation
To install is easy and starts in the same way as other WordPress plugins:
- Download the plugin ZIP file
- Extract the plugin
- Upload the plugin folder to WordPress
- Go to WordPress plugins and Activate your plugin
- Run a full Datafeedr Product Update (IMPORTANT – the plugin won’t work until a Datafeedr Product Update has completed as it builds the indexes it requires after the product list has been updated)
Download the Plugin here:
[level-premium]
Download AWD Ajax Search Plugin ZIP
- Extract the files locally.
- Upload the awd-ajax-search folder to your plugins directory using FTP.
- Active the plugin and then follow the usage instructions below
[/level-premium]
Usage
The ‘Ajax Search Plugin for Datafeedr’ doesn’t replace your existing Datafeedr search box by default, but here is the code you need to place on the page where you wish your new Ajax search box to appear:
NOTE: If you have your store located somewhere other than /store/ then ensure you modify the action command above. e.g. if your store is located at /uk/ then change the action to action=”/uk/search”.
You can paste that code wherever you wish your search box to appear. Since it covers both Datafeedr AND WordPress search, I suggest you put your new search box somewhere it will be available to both, although if you wish you can just paste it into your Datafeedr shop code using the Datafeedr factory.
To start with, replace your existing Datafeedr search code with the code above.
Styling
It comes with some nice styling but you can adjust this if you like. Here is the CSS file it uses – if you need help styling, post a comment and I’ll help you out but it’s basic CSS:
#awdpossiblecategories {
display: none;
border:1px solid #aaa;
position:absolute;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
z-index:1000;
top:45px;
-moz-box-shadow: 2px 2px 10px black;
-webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
background-color: #ffffff;
padding:5px;
margin-left: 5px;
}
#awdpossiblecategories a {
width:350px;
display: block;
padding: 2px!important;
text-decoration: none;
color: #000;
background-color: #ffffff;
text-align: left;
margin-left:50px!important;
margin-right:5px!important;
}
#awdpossiblecategories a:hover{
color: white;
background-color: blue;
background-image: none;
}
.dditem {
width:404px;
display: block;
padding: 2px;
text-decoration: none;
color: #000;
background-color: #ffffff;
text-align: left;
}
.ddimage {
max-width:40px;
max-height:40px;
float:left;
padding-right:10px;
clear:left;
}
.dditemname {
font-weight:bold;
height:20px;
overflow:hidden;
}
.ddsaleprice {
text-decoration:line-through;
}
.ddprice {
}
.ddheader {
color: #aaa;
width:404px;
display: block;
padding: 2px;
text-decoration: none;
background-color: #ffffff;
text-align: left;
font-weight:bold;
font-size:small;
}
#awdpossiblecategories div.ddnumitemsincat, .ddsnippet, .ddprice {
font-size:small!important;
color: #aaa!important;
}
.ddfloatleft {
float:left;
}
.ddfloatright {
float:left;
}
#awdpossiblecategories .ddfloatright a {
width:250px;
}
.ddfloatright .dditem {
width:300px;
}
.ddfloatright .ddheader {
width:300px;
}
Customising the Images Used
The images for the categories come from the Datafeedr Category image field whilst the images for the products obviously come from the product thumbnail.
That leaves the images for the posts, questions, whatever else you have installed on WordPress that counts as a post. To customise is fairly straightforward if you know how to use FTP.
Inside the plugin folder you’ll find a folder called ‘dropdownimages’. There is an image for each post ‘type’. You can modify these images however you like or add new ones if you have post types I have not covered in the plugin. By default there are images to cover: post, page, question, reply, forum, answer, topic. In most WordPress installs you’ll only be dealing with ‘post’ and ‘reply’.
I welcome any comments, questions or suggestions for upgrades.
- How to create a tree of categories from a custom taxonomy - September 22, 2014
- Managing postcodes and locations with WPAllImport - September 22, 2014
- Why do affiliate merchants reject your website? - August 20, 2014
April 6, 2015 @ 7:41 am
“Ajax Search Plugin for Datafeedr and WordPress”
Please send the code to me because in the “USAGE” part I can’t find it..
I have downloaded, activated the plugin but I don’t know how to use it exactly.
Could you explain it a little bit further if possible?
Thanks in advance,
Rezso Kovacs
May 20, 2015 @ 5:55 pm
Hi – if you go to the settings page it tells you the shortcode you need to use. You put that shortcode in your sidebar to display the search box or in your header.
June 17, 2017 @ 3:35 pm
Hi, looks like a great plugin. Is it free to use?
One question: I can’t find the shortcode anywhere, on the page above is the search formitself. Where can I find the the Shortcode? Thanks!
September 14, 2017 @ 3:52 pm
Hi – this plugin was deprecated as I moved to using Datafeedr API instead of the factory. You can find the new version here: https://www.wpintense.com/product/auto-infinite-scroll-plugin/