Easily interact with Sparkart's APIs via Javascript.
In order to use sparkart.js you just need to include the sparkart.js file. Also make sure Handlebars.js and jQuery have been included before sparkart.js.
<!-- Include dependencies -->
<script src="https://github.com/sparkartgroup-archive/sparkart.js/raw/master/jquery.js"></script>
<script src="https://github.com/sparkartgroup-archive/sparkart.js/raw/master/handlebars.js"></script>
<!-- Include sparkart.js -->
<script src="https://github.com/sparkartgroup-archive/sparkart.js/raw/master/sparkart.js"></script>Including this file makes the sparkart variable available. A multitude of utilities can then be used:
Sparkart.js's Fanclub utility enables you to access information about a fanclub and include various fanclub widgets in your website. Every fanclub has a unique API key which grants access to that fanclub's data. This API key can be found under fanclub settings in Sparkart Tools. To work with a specific fanclub, just start a new instance of sparkart.Fanclub using the API key for that fanclub.
var fanclub = new sparkart.Fanclub(API_KEY); // This creates an instance of sparkart.FanclubNow you can utilize your new fanclub object:
fanclub.get( 'plans', function( err, plans ){
if( err ) console.log( err ); // err is null if nothing goes wrong
else console.log( plans );
});
fanclub.draw();The fanclub object provides a set of properties and functions that allow you to access and update fanclub data. Customers can be logged in, customer data can be used, and most importantly, fanclub widgets can be drawn.
If the default fanclub configuration doesn't suffice, it can always be overriden when you instantiate the fanclub. By passing an object of options after the fanclub's API key, you'll override the default values:
var fanclub = new sparkart.Fanclub( API_KEY, {
templates: {
contest: '<div><h1>Contest!</h1></div>'
}
});The following options are available:
development will use those instead of production tracking services.After a fanclub is instantiated, some properties are set by default. The following properties are made available:
null if there is no user session (the user isn't logged in).Most of these properties are not set until after the fanclub finishes loading. In order to wait for that, use the "load" event.
In order to make generating fanclub markup easier, sparkart.js has a widget system which automatically renders fanclub html. The following widgets are available by default:
To use a widget, you need to create a container for that widget with the classes sparkart fanclub and the widget's name (ex: account). Then create the fanclub object or run the draw() method if the fanclub object has already been instantiated:
<!-- fanclub object does not exist -->
<div class="sparkart fanclub account"></div>
<script>
var fanclub = new sparkart.Fanclub(API_KEY);
</script>
<!-- fanclub object already exists -->
<div class="sparkart fanclub subscriptions"></div>
<script>
fanclub.draw();
</script>Custom templates can be defined for fanclub widgets when their markup is not ideal. These templates are all written in Handlebars, and they draw their information from the Sparkart Services API. New templates must be passed as strings or precompiled Handlebars functions when initializing the fanclub object:
var alternate_template = '<div class="account"><h3>{{username}}</h3><span class="email">{{email}}</span></div>';
var fanclub = new sparkart.Fanclub( API_KEY, {
templates: {
account: alternate_template
}
});Note: If a widget relies on the current customer for data, but the user is logged out, it will not make an API request to the Sparkart Services API. These widgets include account, customer, affiliates, order, and orders. These widgets will still be rendered but without receiving any data from the API. This could be used, for example, in the customer widget to prompt the user to login. Other widgets, such as events and plans will still request data from the Sparkart Services API, even if the user is logged out.
Deletes the Mixpanel cookie (if it exists)
fanclub.deleteMixpanelCookie();err.Grabs the distinct_id through the Mixpanel JS API and POSTs it to the server.
* This requires the user to use mixpanel as the variable used to initialize Mixpanel.
This is how it should be initialized:
mixpanel.init("YOUR_MIXPANEL_TOKEN", {
loaded: function(){
fanclub.setMixpanelDistinctId();
}
});err, $widget. err is an array of errors if something went wrong, or null. $widget is the jQuery selection of the widget that was just rendered.Draws a single widget, collection of widgets, or every widget on the page.
fanclub.draw(); // draws/redraws every widget
fanclub.draw( '#events', {
start: 5
}); // draws/redraws the widget at '#events'Gets information from the Fanclubs API.
fanclub.get( 'account', function( err, user ){
if( err ) return err;
console.log( 'The user\'s account information', user );
});Posts information to the Fanclubs API.
fanclub.post( 'account/register', {
email: 'BJFan68@yahoo.com',
birthdate: '1968-01-01',
username: 'BJFan68',
accept_terms: '1',
password: 'BJFan68',
password_confirmation: 'BJFan68'
}, function( err, user ){
if( err ) return err;
console.log( 'User has registered!', user );
});Destroy all markup and bindings created by the fanclub.
fanclub.destroy(); // all markup reverts to pre-fanclub stateBinds a callback function to an event.
fanclub.on( 'render', function(){ console.log('rendered!'); });Unbinds event callbacks. Can unbind a single function, or every function for an event.
fanclub.off('render'); // unbinds all
fanclub.off( 'render', myMethod ); // unbinds "myMethod"Manually trigger an event with the specified arguments.
fanclub.trigger( 'custom', 1, 2, 3 ); // executes the event "custom" with the arguments 1, 2, 3Triggered after the fanclub has finished loading its initial set of data and rendered the first set of widgets. Properties like customer are only available at this point.
fanclub.on( 'load', function(){
console.log( 'The customer\'s name is:', fanclub.customer.first_name, fanclub.customer.last_name );
});Triggered when a widget renders itself. A jQuery object containing the widget that was just rendered is passed to the event callback.
fanclub.on('render', function( $widget ){
var is_my_widget = ( $my_widget === $widget );
if( is_my_widget ) console.log('It\'s my widget!');
});Sparkart.js uses Grunt to build the final script. When in development, make sure you edit the files in /src, then compile the script. To compile the script, run grunt build. To automatically compile the script when anything in /src is changed, run grunt regarde.