// JS Variables

FWP

The FWP object gets passed to the server on each refresh. It contains all the necessary information for generating the template, facets, pagination, etc.

var FWP = {
    facets: {
        make: ['audi'],
        vehicle_type: ['car'],
        base_msrp: ['40100.00','106100.00']
    },
    extras: {
        pager: true, // load pager HTML
        selections: true, // load selections HTML
        sort: 'default' // sort the results
    },
    template: 'cars',
    auto_refresh: true, // set to FALSE to disable automatic refreshes
    soft_refresh: false, // used when sorting / paging to prevent a full refresh
    loaded: true, // this is TRUE after the first refresh
    paged: 1
};

Browse to our Cars demo, open your browser console, and type FWP to see actual data.

FWP Methods

// Reset all facets to their default state
FWP.reset()

// Force a refresh (use only when FWP.auto_refresh = false)
FWP.refresh()

// Parse the URL hash to populate FWP.facets
FWP.load_from_hash()

// Parse the facet HTML values to populate FWP.facets
FWP.parse_facets()

// Update the URL hash based on the values in FWP.facets
FWP.set_hash()

// Get the URL variable string
var str = FWP.build_query_string();

FWP_HTTP

All requests happen via AJAX. In order for URI and GET variables to be available, they are passed using FWP_HTTP. Use $this->http_params within your FacetWP template to access.

/*
Example URL:
http://yoursite.com/places/virginia/?county=loudoun&city=leesburg
*/
var FWP_HTTP = {
    'uri': 'places/virginia',
    'get': {
        'county': 'loudoun',
        'city': 'leesburg'
    }
};