Demo of Search Widget and WP REST Server for Toolset Types

This search widget can search Toolset Types custom post types by the values of Toolset Types custom fields and taxonomy. In addition this search widget can also specify search criteria for child of/parent of relationships, post content, post excerpt, post title and post author. The widget uses user friendly substitutions for the actual values in the database, e.g. post title is substituted for post id in child/parent fields. In the “Single-Page Application” mode the search widget in the sidebar is used to interactively load the contents of the search results pane below.

Open

Search Results

This pane shows the results of the Search widget in the sidebar.
The shortcode 'stcfw_inline_search_results' is only valid in Backbone.js with Bootstrap mode.

This example uses un-edited auto-generated (available from version 2.2.1) user defined templates to customized the table view.

Single-Page Application vs Traditional WordPress

In traditional WordPress when the user makes a request the browser loads a whole new page even if most of the content is still the same. In the single-page application mode above the browser makes an AJAX request to populate a (Backbone.js) JavaScript model which is then used to instantiate (using a Underscore.js template) a HTML view which refreshes a pane in the page. I think this new paradigm is more efficient, more responsive, more user friendly, more flexible, … than loading a whole new page on every request. This search widget is just an example but much more is possible which is why I am implementing a REST server for Toolset Types custom posts.

The REST Server

This demo is of version 2.2.1.1 which includes support for a WP REST server for Toolset Types custom fields. You can run the curl commands below on this server.

Get by post id:
curl http://magentacuda.com/wp-json/mcst/v1/lakes/141

Search by Toolset Types checkboxes custom field:
curl http://magentacuda.com/wp-json/mcst/v1/lakes?lake-type=glacial
curl -g "http://magentacuda.com/wp-json/mcst/v1/lakes?lake-type[]=glacial&lake-type[]=crater"

Search by Toolset Types checkbox custom field:
curl http://magentacuda.com/wp-json/mcst/v1/lakes?endorheic=true

Search by Toolset Types radio custom field:
curl http://magentacuda.com/wp-json/mcst/v1/mountains?rock-type=igneous

Search by Toolset Types select custom field:
curl http://magentacuda.com/wp-json/mcst/v1/mountains?continent=europe
curl http://magentacuda.com/wp-json/mcst/v1/mountains?continent=north%20america

Search by Toolset Types taxonomy field:
curl http://magentacuda.com/wp-json/mcst/v1/mountains?zone=subtropical

Search by Toolset Types single line custom field:
curl http://magentacuda.com/wp-json/mcst/v1/mountains?nearest-city=naples

Search on compound conditions:
curl -g "http://magentacuda.com/wp-json/mcst/v1/mountains?zone=temperate&rock-type=metamorphic"

Of course you can do the usual WordPress search:
curl http://magentacuda.com/wp-json/mcst/v1/lakes?search=superior

Search on parent/child relationships:
curl http://magentacuda.com/wp-json/mcst/v1/mountains?mcst-childof-country=italy
curl http://magentacuda.com/wp-json/mcst/v1/countries?mcst-parentof-lake=geneva

The JavaScript Client

Version 2.2.1.1 includes a JavaScript client library derived from the WP REST API JavaScript Client Library. This client library makes it easy to fetch a collection of Toolset Types custom posts, e.g.

var collection = new mcst.api.collections.Lakes();
collection.fetch( {
    data: { "lake-type": "salt" },
    success: function( collection, response, options ) {
        console.log( collection );
    },
    error: function( collection, response, options ) {
        alert( "fetch() failed." );
    }
} );

I have written a minimal application using this client library. You can use the search widget above to find appropriate values for the fields. For checkbox fields (e.g., endorheic) the appropriate values are true or false – not the pretty labels. N.B., this uses version 2.2.1.1 of this plugin which can be downloaded from GitHub.

Try it yourself

Version 2.2.1.1 can be downloaded from GitHub. The documentation for this plugin is here.