There are a number of ways in which you can use the Helium.js API to further customize the shopping cart and checkout experience of your store for your customers.
The following methods are available to developers to interact with a user’s shopping cart.
Example: The code below will show the checkout form immediately when the page loads
$(document).ready(function(){ Helium.show(); })
Example
Helium.cart.add('eggs');
Helium.refresh(); // now the cart will show that 'eggs' have been added
Example
var products = Helium.cart.get();
if (products.length == 0){
alert("Your cart is still empty!");
}
Example
if (Helium.cart.count('donut') == 0){
alert("Are you sure you don't want any donuts, Homer?");
}
The following methods are available to add attributes to a customer that can be used later for filtering orders. For example, if you are tracking customer referrals from various sources, you may "tag" each customer with the source from which they have been referred.
Example: The code below demonstrates using the attr method.
Helium.customer.attr("referrer", "blog"); // sets referrer to "blog"
Helium.customer.attr("referrer"); // returns "blog"
Helium.customer.attr("referrer", null); // deletes referrer attribute
Helium.customer.attr("referrer"); // returns undefined
Example: Demonstrates using the get method
Helium.customer.get() // returns {}
Helium.customer.attr("referrer", "blog");
Helium.customer.attr("gender", "female");
Helium.customer.get(); // returns {referrer: "blog", gender: "female"}
The following methods are available to developers to interact with a user’s shopping cart.
Example: The code below will show the checkout form immediately when the page loads
$(document).ready(function(){ Helium.show(); })
There are a number of events you can listen for on the div.#Helium object. Currently, in order for these to be triggered, you must have jQuery installed on your page.
Example
$('#Helium').on('ready', function(e){
console.log('ready to buy');
});
Example
$('#Helium').on('add-to-cart', function(e, sku){
console.log('added '+ sku + ' to cart');
});
Example
$('#Helium').on('remove-from-cart', function(e, sku){
alert("Are you sure you don't want " + sku + "?");
});
Example
$('#Helium').on('order-success', function(e, order){
alert("You bought " + order.items.length + ' things');
});
Example
$('#Helium').on('order-error', function(e, msg){
console.log(msg.errors);
});
Helium.js includes its own namespaced version of jQuery which does not interfere with any other versions of jQuery that you may have on your website. However, especially when using jQuery plugins, there are a couple things to do to ensure that Helium.js and all jQuery/jQuery plugins work smoothly together.
Example: The code below will show the checkout form immediately when the page loads
// Instead of this...
$(document).ready(function(){
// do something
});
// Do this...
$('#Helium').on('ready', function(){
// now do something
});
Use of this site and associated services acknowledges your acceptance of the GDPR / Terms of Service