WPEC Predictive Search

Instillation

To install WP e-Commerce Predictive Search:

  1. Download the WP e-Commerce Compare Products plugin PRO Version Lite Version
  2. Upload the wp-ecommerce-compare-products folder to your /wp-content/plugins/ directory
  3. Activate the ‘WP e-Commerce Compare Products’ from the Plugins menu within WordPress

Features

As soon as you start to type WP e-Commerce Predictive Search starts delivering visually appealing and changing search results for:

  • Product Names
  • Product SKU’s
  • Product Categories
  • Product Tags
  • Posts
  • Pages

WP e-Commerce Predictive Search delivers users instant and changing results as they type in a drop down which shows the product, post or page featured image thumbnail, title and description. Users can click through from the drop down to the ‘All Results Search Page’ that features endless scroll.

Settings Overview

Add WP e-Commerce Predictive Search Via Widgets, Shortcodes or the provided function with parameters. See the info graphic below to see where you find the settings for these on your site.

Image Legend

1. Settings: WP e-Commerce Predictive Search only works when you to have the WP e-Commerce plugin installed. If you have WP e-Commerce installed and activated you will see Products and Settings > Shop have been added to your WordPress Admin dashboard sidebar.

2. Store: The WP e-Commerce Predictive Search plugin auto adds a Predictive Search Tab to the WP e-Commerce  Shop dashboard. You access that by putting your mouse over Settings in the sidebar and clicking on the Shop Link in the pop-out menu.

3. Predictive Search Settings Tab: Click on the Predictive Search tab on the WP e-Commerce admin panel to open it. The function that you do on this tab are – Exclude Specific Content from Predictive Search, Customize the All Serach results page display and generate a global search Function.

4. The Predictive Search Widget. The main way most users activate Predictive Search on their sites is via widgets. To find the Predictive Search Widget go to ‘Appearance’ on your WordPress dashboard sidebar. Put your mouse over ‘Appearance’ and click on ‘Widgets’. The Widgets page will open then find the ‘WPEC Predictive Search’ Widget. Widgets are listed in Alphabetical order and thus you’ll the WPEC Predictive Search widget near the bottom of your widget list.

5. Predictive Search Function: Use the function to place Predictive search anywhere in your theme that is not a widget area. Most commonly people use the function to place and or replace an existing search funtion that is in their themes header. You will find the function generator on the Predictive Search Admin tab.

6. Predictive Search Shortcode – With WP e-Commerce Predictive Search activated you will see that it auto adds a Predictive Search Icon to the top of your Posts and Pages WordPress editor tool bar. Note the shortcode icon is not added to Single Products edit pages.

Go Back to Top

Predictive Search Widgets

You can add the Predictive Search widget to any or every sidebar or widgeted area on your theme.

Image Legend

1. To access the Widgets area on your WordPress admin dashboard click on or put your mouse over ‘Appearance’ is the dashboards sidebar.

2. Click on the Widgets link.

3. Scroll down through your sites available widgets until you find the ‘WPEC Predictive Search’ Widget.

4. Drag and drop the ‘WPEC Predictive Search’ Widget into any ‘Widget’ area in the right hand column of the Widgets dashboard.

Go Back to Top

Widget Settings

All settings for Predictive Search Widgets that you put on your site are on the widget panel. Each widget used can be uniquely customized to suite the area of the site that the search widget will service.

Image Legend

1. Widget Title: Enter the title that you want the search box to show on the front end. Leave empty and no title will show.

2. Activate Search ‘Types’: The 5 available widget search ‘Types’ are – Products, Product Categories, Product Tags*, Posts and Pages. Activate each ‘Type’ of search by assigning a setting the number of that ‘types’ results to show on the Search Box drop down. Leave a field blank to exclude that ‘type’ from this widgets search results.

3. Search Results Order: Set the order in which the ‘Types’ show in the Search box drop down on the front end by using drag and drop. Each lot of results shows in the drop down under the ‘Type’ title. To drag and drop place your mouse over the up/down arrows, depress the left click on your mouse holding it down drag the ‘Type’ to where you want it in the order and drop it by releasing the left mouse clicker.

4. Results description Character Count: Set the number of characters that you want to show with each result. For products, the description is taken from the Products Description. For Post and Pages it shows the first characters of the content text. Note the description also captures paragraph breaks from the product.

5. Search All Products: Select this and this search widget will query everything for each ‘Type’ you have selected.

6. ‘Smart Search’: When activated ‘Smart Search’ delivers search results from the Product Category, Product Tag, Post Category and Post tag that relate to the content the user is currently viewing when they do the search. This delivers user lightning fast and extremely relevant search results.

7. Save: Click the save button to activate the widget settings.

Go Back to Top

Hints and Tips on Widget settings.

The graphic below shows you how those widget setting relate to the Predictive Search Widget placed into a sidebar widget area on the front end of your site.

Image Legend

1. Extract image showing the sidebar widget and how the setting made in it show on the front end of the site.

2. Title – The Widget title that show on the front end.

3. Number of results to show in the drop down. Tip: Change the order that results show in the drop down by using the drag and drop arrows on the widget to drag and drop the search types into the order that you want. The image shows that 2 has been set for the number of ‘Product Name’ results to show in the search drop down. Notice also how each search type shows under the heading of that types name so users know where the result comes from.

4. Number of Product SKU’s to show. Tip: Set any of the search types at ’0′ or leave them blank and that search type is not activated for this widget. SKU results show the SKU’s as a the click-able title, but with the Product Name as the description text for ease of recognition by the user.

5. Product Categories: Tip: When users click on a product category search result link (the category name) in the drop down they are taken to that WP e-Commerce Product category page.

6. Product Category Results: Tip: If you have not uploaded a product category image, the no image place marker will show. To upload a Category image go to Products > Categories and edit each category to upload an image. If you want description text to show with the category results you should enter that in category image while you are editing the category.

7. Product Tags: Tip: When users click on a Tag search result link (the Tag name) in the drop down they are taken to that WP e-Commerce Product Tag page.

8. Product Tag Results: Tip: Unlike Product Categories, Product tags do not have anywhere you can upload a tag image or a Tag description so they will always show the no image place marker and the tag name as a link to the Tag page.

9. Posts: Will always show the post featured thumbnail or if no feature image is set the first image in the post plus the post title and description count that you have set.

10. Pages: Same as posts above

11. See More Results links to search pages: Tip: Any time that a search type has more results than are shown in the drop down a Link is created for that search type in the footer. For example if you have set Product Tags as a search type with 2 results to show in the drop down and there are only 2 results – the link in the footer does not show and no ‘All Search Results Page’ is created. So if your setting is to show 2 results for any search type and 1 Result is found and shows in the drop down = no link, no page, 2 results returned = 2 results in the drop down, no link in footer, and no all results search page is created, 3 results found – the 2 most relevant results show in the drop down and a link is created in the footer as the name of the search type and an ‘All Results Search Page’ is created.

As user search if they click the Search icon on the Search box or hit the enter key they are taken to the all results search pages that have been created for results of their search at that point.

Ready to Go PRO? Click Here!

Go Back to Top

All Results Search Pages

Front End Users – Features

The All Results Search pages are one of the really advanced features of the WP e-Commerce Predictive Search plugin- The all results search pages give your users:

  • An incredibly informative and easy to navigate results format
  • Each page features auto endless scroll – meaning you wow your users with your cutting edge technology and they never have to leave the page while the browser through potentially hundreds of results.
  • Search results are divided in search type pages which are in a Navigation tab type format at the top of the page. Again the user feels like they have never left the page as they switch back and for ward between different search results types ex results by Product Names, Product Categories, Product SKU’s, Product Tags and even Posts and Pages.
  • The full content layout style allows users to very quickly scan each result with as much detail as you want to set, right up to and including allowing them to add items to their cart right from the search page.

Administrators

WP e-Commerce Predictive search gives administrators total flexibility is customizing what information the user see’s in the All results search page – for a detailed description of what they are and how that works see ……

Go Back to Top

How it works! An Explanation.

  • WP e-Commerce Predictive Search auto creates engaging highly customizable All Search Results pages for all search types.
  • All results search pages are created when a users does a search via a search widget, function or shortcode.
  • A search page is created each time a search has more results than the number that is set to display in the drop down
  • All search results pages are accessible by either clicking the search icon on the widget or clicking any of the ‘more results’ links at the bottom of the drop down – or by hitting the enter key during a search. Note if no results are showing in the drop down the All Results search page will show no results, because none have been found.

Image below is a cut down version of a search on a live site – it the results page for the search term ‘s’ which created All Search Results pages for Product Names | Product Categories | Product Tags – in the image we have only shown the first result for each search type.

Image Legend

1. Predictive Search Results Page – Page Title – You can edit this page title to anything you want. To do that go to your Pages > find the page and Edit the title and click update. Note – don’t end the page URL.

2. The open Search Page is shown in Bold text in a line of text telling users where they are. The Plugin auto adopts your themes CSS styling – so the fonts, font colour, size, text links – are auto the same as your theme.

3. Sort Search Results by -We built the plugin like this to make it incredibly easy for users to Sort Search results. Imagine the frustration if all of the results where just mixed together – or worse still listed in the Order set in the widget. If you had Product names or SKU’s first on the list the user may never scroll down far enough through potentially hundreds of results to find Product categories or tags.

4. This is the Hyper-linked Text Nav bar – showing users what other results are available. This format is in accordance with the WordPress Codex. As a results it works on any theme.

5. This is an example to show you how it works. When the user clicks on the Product Categories Tab link (item 3) they will see that Product categories moves up to show as the open page.

6. Products has now auto moved down to the Hyper linked text nav bar. Just an easy click to go back to them

7. This example shows what happens when the user clicks on the Hyper-linked tags. They see that it is now the open page showing all results for product tags.

8. The other 2 search results pages Product Name | Product Categories available from the text link nav bar.

Note users can share entire search results pages via the page URL. This means that if you use any kind of share plugin that it most likely will be able to use the URL to share via email and to social media. Of course you can copy and paste the URL manually and it leads people straight to the page even though you would have closed it some time ago.

Upgrade from the Lite Version to Pro here!

Go Back to Top

Predictive Search Admin Tab

From the Settings > Store > Predictive Search admin tab you can set

  • Page Title of All Results Search page.
  • Exclude From Predictive Search
  • Customize the way results show on the All Search Results pages
  • Config and customize the Predictive Search Function.

See notes and images below on each section.

Customize All Search Results Page Title

By default the All results search page title is Predictive Search

Image Legend

1. Predictive Search Admin Tab – Open this and you will see at the top the Search page. This page is auto created when you install and activate the plugin. The WP e-Commerce Predictive Search shortcode will be on the page.

2. You can use the Drop down to change the Page. If you want to customize the Page Title that shows at the top of the search page (image shows the Predictive Search Page title in the drop down and how it shows on the search page on the front of this site) just change the name of the page (Not the Page URL). Go to Pages in your wp-admin sidebar – Find the Predictive Search page – edit it and change the page Title and update. Come back here to the admin panel and check that is updated correctly. The new page title should be showing as the default page in the search page drop down. If it is not then use the drop down to select it and update the page.

Go Back to Top

Exclude Content From Predictive Search.

A new feature that gives you even more control. Exclude almost any content from being found or displayed by Predictive Search. From the Predictive Search admin panel you will see.

Image Legend

1. Exclude from Predictive Search – To exclude any content from being found our shown in Predictive Search results just enter that content types ID comma separated. example 12, 26, 203

2. Exclude Products – Enter product ID’s here that you want excluded from the search results. Note this will also exclude the product from showing in SKU results.

3. Exclude Product Categories – Place Product Categories ID’s here that you want excluded from search results. Note this setting does not exclude Products Within this category from showing in Product Name, Product SKU or Tag results.

4. Exclude Product Tags – Enter Tag ID’s you want excluded from predictive search. Note this setting does not exclude Products Within this Tag from showing in Product Name, Product SKU or Product Category results.

5. Exclude Posts – Enter Posts ID’s that you want excluded from predictive search results.

6. Exclude Pages – Enter Page ID’s that you want excluded from predictive search results.

Do not forget to ‘Update’ the page to save your settings.


Go Back to Top

Customizing All Search Results Display

WP e-Commerce Predictive Search enables you to completely customize the information that shows with each result on the All Results Search Pages. To do that from your wp_admin dashboard go to  Setting > Store > Predictive Search tab. The image below shows you what that looks like. See the Image legend below for detailed notes on customizing the search pages settings.

Image Legend

1. Predictive Search tab – Open it to customize your All Search Results pages.

2. Search Results page settings – Use the settings to customize how the results show on the All Search Results pages. TIP – Please do not be confused – These setting control what shows with the results – not what results show – that is set from the three places you create a search box – The Widget Control panel, the Shortcode pop-up insert-er or the Global Function.

3. Results – Set the number of search results to load initially when the page is opened and in each subsequent endless scroll content load. Tip: The lower the number of results you set – the faster your pages will load.

4. Description Character Count - Set the amount of Description text you want to show with each search result. This text comes from first sentence / paragraph of the Product description, Product category description or first paragraph of posts and pages. Tip: Some people have got confused thinking that this setting also applies to the widget drop down results. It doesn’t. Each widget has its own independent settings which are on the actual widget.

5. Price- Check this box if you want the Product Prices to show with the listing. It shows specials pricing as well with the RRP crossed out and the Sale price just like the product pages.

6. Product Categories – Check this to show the Product Categories that the results is assigned to under the Product result – just like the product pages. Just another really handy navigation aid for your users. The Product Category names are linked to that Product Category page listing all Products assigned to that Product Category.

7. Product Tags – Check this to show the Product Tags that the results is assigned to under the Product result – just like the product pages. Just another really handy navigation aid for your users. The Product Tags names are linked to that Product Tag page listing all products in assigned to that Tag.

8. Automatic Endless Scroll Feature: The image shows a ‘See more results’ text link – but you don’t actually see that – what you do see is a beautiful pop us that tells you that more results are being loaded. It is a very cool feature.

Go PRO to unlock the true power of Predictive Search? Click Here!

Go Back to Top

Putting Predictive Search into your sites header.

At the bottom of the Predictive Search Tab page you will see the section with the Global Search function. Use this function to place the Predictive Search Box into the header of your theme. You may want to replace the existing WordPress / WP e-Commerce or Theme search widget with Predictive Search – you do that by replacing the search function in your header.php file with the global Predictive Search function.

Image Legend

1. Predictive Search Function – This function is made to make it easy for you to add or replace existing search functions in any area of your site that is not Widgetized. Most commonly this will be your sites header. The way it works is that you just copy and paste the Global Function into your site header.php file. Don’t change the function – you set all of the values for the function in field 4 to 8 in the image.

2. The Global search function. Note settings here only affect the global function – they have no impact on the Search boxes created by Widgets or shortcode.

3. Customize Search function values. Once the Predictive Search function is in place on your site you do not ever have to touch the PHP code again. Anytime you want to change a value or setting you just make the change here and update the page and the changes will automatically show in the Global Search box. Note settings here only affect the global function – they have no impact on the Search boxes created by Widgets or shortcode.

4. Search Type values. – Add a number value for each to activate that search type. Product Name, Product SKU, Product Categories, Product Tags, Posts, Pages. The number you set is how many of that result type will show in the Drop down. Leave a field empty and that Search type will not be activated.

5. Description Characters – Set the number of characters to show from each search types description.

6. Width – the wide of the search box – leave empty and the wide will be 100% of the available container.

7. Padding – set the padding around the search box in px. use this to position your search box.

8. Custom Style – on some themes you will need to know HTML and or PHP to get the Search box to sit right in your theme. You enter that code here. If you do not know how to do this and do not have access to a coder that does we offer a USD $12 ‘On Demand’ service. Just go here and purchase the service and we will do it for you that day.

9. Global Search – Check the box to select Global Search (All) – Unchecked and ‘Smart Search’ is activated. Smart Search means that Predictive Search will query and pull results from the Product category or tag that is being viewed first before it queries and shows results from the rest of the site.

10. “Save All Changes’ – after making any changes you must save them for them to be activated.

This is a Pro Version only Feature! Get it here!
Go Back to Top

Editing the header.php file

To add the Global Predictive Search function to your header go to your wp_admin dashboard > Appearance > Editor > Header (header,php)

Image Legend

1. Appearance – You can access the header.php file right from your WordPress admin dashboard. Find Appearance on the dashboard admin sidebar.

2. Editor – Click on Editor to open your themes file editor.

3. Template Files – These all show in the right hand column on the Editor – they are in alphabetical order – scroll down until you see Header (header.php) and click on that file to open it in your editor.

Yellow Highlight – Try and find the existing search function – if you can replace it with the Predictive Search global function – always copy and paste the function – do not try and type it. If you cannot find a search function paste in the global function just before the last and closing ?php tag.

On Demand USD $12 service. – If you do not know how to do this and do not have access to a coder that does we offer a USD $12 ‘On Demand’ service. Just go here and purchase the service and we will do it for you that day.


Go Back to Top

Using Shortcodes

In this section we will cover how to use the WP e-Commerce Predictive Search Shortcode to insert a search box and configure it into any page or post on your site. See image below and the detailed description and instructions in the Image Legend under the image.

Image Legend

1. Predictive Search Shortcode Icon – When you install and activate WP e-Commerce Predictive Search you will see that the Predictive Search icon has been added to the top of each post and page visual editor. To insert the search box into a post or page, first click in the page where you want the search box to show then click the icon which fires the pop-up.

2. Shortcode Pop-Up window. – Clicking the PS icon opens the ‘Insert WP e-Commerce Predictive Search pop-up box.

3. Customize the Search box settings before you insert.

4. Set search Parameters – Just like the Widget you set the number of results of each search type you want to show in the drop down from the search box. Put 0 or leave empty to deactivate that search type for this shortcode. Unlike the widget – there is no way to be able to sort the order by drag and drop. The pop-up function don’t support this feature.

5. Characters – Set the number of characters from the Product description or post / page content to show with each result.

6. Alignment – Us this feature to horizontally align the search box within the post or page content. Select an alignment from the drop down. the options are

None – like images search box will sit aligned to the left with text above and below it.

Left Wrap – Aligned to the left with text wrapping to the right of the search box.

Left no Wrap – Aligned to the left with text above and below.

Center – Center of the page with text above and below

Right Wrap – Aligned to the right with text wrapped to the left.

Right no Wrap – Aligned to the right with text above and below

7. Search Box Width – set the wide of the search box in px.

8. Padding – Set the padding in px that you want above, below, to the left of the search box and to the right.

9. Insert Shortcode – Click this button to insert the short code into the post or page with the parameters that you have set. When you do the pop up will close and you’ll see the shortcode has been inserted.

Ready now to Go PRO? Click Here!

Go Back to Top

Trouble Shooting

Below is a list of common support request and the solution.

Fatal error: Call to undefined function curl_init()

That Error is telling you that you do not have cURL activated on your hosting environment. Our Pro Version plugins require cURL to connect with our API and validate your Authorization Key and auto plugin updates. cURL is on almost all servers but some hosts do not activate it. If you have Cpanel access sometimes you can activate it yourself. If not please ask your host to activate cURL – if they won’t chnage hosts. Once cURL is activated then you can activate the plugin.

This Authorization Key is not valid

The Pro Version licenses are single domain licenses – you can have the plugin installed on as many locals, sub domains, dev sites and live domains as like – but only active on one at a time – anyone it does not matter. All you have to do to move between any of them is deactivate the plugin on the site its currently activated on and use your Authorization Key to activate it on somewhere else.

5,764 total views, 3 views today

Comments are closed.