Ajax Search Plugin for Datafeedr and WordPress

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.

1. Datafeedrs search box only searches the Datafeedr products.
2. On top of that, the Datafeedr search box doesn’t search categories – it ONLY searches products forcing your users to think
3. 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:

1. Download the plugin ZIP file
2. Extract the plugin
3. Upload the plugin folder to WordPress
4. Go to WordPress plugins and Activate your plugin
5. 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)

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.

• Author
• Recent Posts

dhilditch

Latest posts by dhilditch (see all)

• 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