Javascript Library

The Jumpseller Javascript library is included by default into every theme on every store. If you are not confident about what this is about get an overview on Design for Jumpseller. Using this library involves a solid understanding of Javascript.

If you are not a web-designer consider hiring a recommend expert.

Methods

isDefined

• isDefined: function(param)
• checks whether a variable is defined in the current Javascript scope or not.
• param is the name of the variable/method to be checked.
• returns a Boolean value.

requiredAttributesChecker

• requiredAttributesChecker: function(selectors, options)
• checks whether the options object has a callback key defined and if selectors is a valid jQuery selector string that only includes valid DOM objects with the change event (select & radio).
• selectors is the jQuery selectors string.
• options is the Javascript object.
• returns a Boolean value.

paymentMethodListener

depends on requiredAttributesChecker

• paymentMethodListener: function(paymentMethodSelector, options)
• applies the onchange event to the paymentMethodSelector and calls the options.callback method when defined.
• paymentMethodSelector is a jQuery selector string.
• options is the Javascript object.
• calls the callback method defined in the options object. If it fails, returns the Boolean value false.

countryListener

depends on requiredAttributesChecker & isDefined

• countryListener: function(countriesSelector, options)
• applies the onchange event to the countriesSelector and calls the options.callback method when defined.
• countriesSelector is a jQuery selector string.
• options is the Javascript object.

• calls the callback method defined in the options object. If it fails, returns the Boolean value false.

• options.updateRegions is a Boolean value which defaults to false. Otherwise, it will signal the platform to update the Regions’ <select> HTML element. The method will call and depend on getRegions.
• options.regionsSelector is a String value which defaults to countriesSelector.replace(‘_country’,’_region’);. Otherwise, it should be a string referring to the Regions’ <select> HTML element.

regionListener

depends on requiredAttributesChecker & isDefined

• regionListener: function(regionsSelector, options)
• applies the onchange event to the regionsSelector and calls the options.callback method when defined.
• regionsSelector is a jQuery selector string.
• options is the Javascript object.

• calls the callback method defined in the options object. If it fails, returns the Boolean value false.

• options.updateComunas is a Boolean value which defaults to false. Otherwise, it will signal the platform to update the Comunas’ <select> HTML element. The method will call and depend on getComunas.
• options.ComunasSelector is a String value which defaults to regionsSelector.replace(‘_region’,’_comuna’);. Otherwise, it should be a string referring to the Comunas’ <select> HTML element.

Example:

<script type="text/javascript">
  var callbackFunction = function(){ console.log('region changed'); };
  Jumpseller.regionListener("#order_billing_address_region", {callback: callbackFunction()});
</script>

productVariantListener

depends on requiredAttributesChecker & updateProductInfo

• productVariantListener: function(variantSelectors, options)
• applies the onchange event to the variantSelectors and calls the updateProductInfo method.
• variantSelectors is a jQuery selector string.
• options is the Javascript object.
• calls the callback method defined in the options object. If it fails, returns the Boolean value false.

getRegions

• getRegions: function(regionSelectID, countryCode, selectedRegion, lat, lng, options)
• removes all options from the $(regionSelectID) HTML element and fills it with the result from an AJAX call to ‘/checkout/regions?country=’ + countryCode, selecting the selectedRegion if available in the list.
• regionSelectID is a jQuery selector string.
• countryCode is the 2-letter ISO code for the selected Country.
• selectedRegion is the code for the selected Region.
• lat is the latitude of the region
• lng is the longitude of the region
• options is the optional parameter. It is an object where callback can be defined like options.callback, where callback is a function in which we can define our code.
• the Region <select> HTML element will be hidden if no item is returned in the AJAX call.

Example:

<script type="text/javascript">
const options = {};
  options.callback = function(){
        console.log("CALLBACK CALLBACK CALLBACK Regions....")
}
          
Jumpseller.getRegions("#order_shipping_address_region","CL","05","","",options); // with callback
Jumpseller.getRegions("#order_shipping_address_region","CL","05","",""); // without callback
</script>

getMunicipalities

• getMunicipalities: function(comunaSelectID, regionCode, countryCode, selectedComuna, options)
• removes all options from the $(comunaSelectID) HTML element and fills it with the result from an AJAX call to ‘/checkout/comunas?region=’ + regionCode, selecting the selectedComuna if available in the list.
• comunaSelectID is a jQuery selector string.
• regionCode is the code for the selected Region.
• countryCode is the code for the country for which we want municipalities.
• selectedComuna is the code for the selected Comuna.
• options is the optional parameter. It is an object where callback can be defined like options.callback, where callback is a function in which we can define our code.
• the Comuna <select> HTML element will be hidden if no item is returned in the AJAX call.

Example:

<script type="text/javascript">
  const options = {};
  options.callback = function(){
        console.log("CALLBACK CALLBACK CALLBACK MUNICIPALITY....")
  }
          Jumpseller.getMunicipalities("#order_shipping_address_municipality","05","CL","8261213", options); // with callback
          Jumpseller.getMunicipalities("#order_shipping_address_municipality","05","CL","8261213"); // without callback
</script>

updateProductInfo

depends on isDefined

• updateProductInfo: function(event, variantSelectors, options)
• retrieves all selected values from the $(variantSelectors) HTML elements, and calls the options.callback method when defined, with the browser’s event and the Product Variant information as arguments.
• event the HTML element event, will be passed as an argument to the callback method.
• variantSelectors is a jQuery selector string.
• options is the Javascript object.
• options.product is the JSON data for the current product
• calls the callback method defined in the options object. If it fails, returns the Boolean value false.

setCurrency

• setCurrency function(currency)
• saves the newly provided currency code as a variable named global_currency in the browser’s sessionStorage and reloads the page
• currency is the 3-letter ISO code for the desired Currency

multiCurrency

depends on isDefined

• multiCurrency function(options)
• activates the multi Currency selection in the store, and calls the options.callback method when defined. Exchange Rates are provided Open Exchange Rates.
• options is a Javascript object.
• options.token Open Exchange Rates API token, required to use multi Currency in a Jumpseller store
• to avoid rate limits from Opem Exchange Rates API, the currency rates are saved in localStorage for every user, and renewed every 24h.

getCart

• getCart function(options)
• calls the method GET /api/cart.json of the Javascript API.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current cart in session.

To get the cart’s total amount:

<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data.total); }; // outputs the cart's total amount.
  Jumpseller.getCart({callback: callbackFunction})
</script>

updateCart

• updateCart function(order_product_id, qty, options)
• calls the method POST /api/cart.json of the Javascript API.
• updates the quantity of the given product at the order.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current cart in session.

Example:

<script type="text/javascript">
  var callbackFunction = function(){ console.log('cart updated'); };
  Jumpseller.updateCart(12345, 1, {callback: callbackFunction()});
</script>

clearCart

• clearCart function(options)
• calls the method DELETE /api/cart.json of the Javascript API.
• resets all cart values to zero and removes all products and coupons from the cart.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current empty cart in session.

Example:

<script type="text/javascript">
  var callbackFunction = function(){ console.log('cart cleared'); };
  Jumpseller.clearCart({callback: callbackFunction()});
</script>

addProductToCart

• addProductToCart function(product_id, qty, product_options, options)
• calls the method POST /api/cart/add.json of the Javascript API.
• adds a simple product (with product_options = nil) or a product with variants to the cart.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current cart in session.

To add a product with the ID 12345 to the cart use:

Jumpseller.addProductToCart(12345, 1, { }, {callback: callbackFunction})

If the product has variants, the option IDs and the product option value IDs need to be passed:

Jumpseller.addProductToCart(12345, 1, { 555: 123123, 777: 321321, 999: 3213214 }, {callback: callbackFunction})

If is a product option of Type text or input the text is passed on the value field:

Jumpseller.addProductToCart(12345, 1, { 123: 'Example Text' }, {callback: callbackFunction})

To represent a callback function use:

<script type="text/javascript">
  var callbackFunction = function(data){
    console.log(data);
  };
</script>

addMultipleProductsToCart

• addMultipleProductsToCart function(products, options)
• calls the method POST /api/cart/add_multiple.json of the Javascript API.
• adds multiple products to the cart.
• the products argument is an array of products with the same values as addProductToCart, but in an array format: [[prod_1_id, prod_1_qty, prod_1_product_options], [prod_2_id, prod_2_qty, prod_2_product_options]]
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current cart in session.

To add the products with the IDs 12345 and 54321 to the cart use:

Jumpseller.addMultipleProductsToCart([[12345, 1, { }], [54321, 1, { }]], {callback: callbackFunction})

If the product 12345 has variants, the option IDs and the product option value IDs need to be passed:

Jumpseller.addMultipleProductsToCart([[12345, 1, { 555: 123123, 777: 321321, 999: 3213214 }], [54321, 1, { }]], {callback: callbackFunction})

addCouponToCart

• addCouponToCart function(codes, options)
• calls the method POST /api/cart/coupon.json of the Javascript API.
• adds one or more coupon codes to the order in the cart. If successful, discount(s) will be applied to the order.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current cart in session.

Example:

Jumpseller.addCouponToCart("test-coupon", {callback: callbackFunction})
Jumpseller.addCouponToCart(["test-coupon", "test-coupon-1", "test-coupon-2"], {callback: callbackFunction})

removeCouponFromCart

• removeCouponFromCart function(code, options)
• calls the method DELETE /api/cart/coupon.json of the Javascript API.
• remove one or more coupon codes from the order in the cart. If successful, discount(s) will be removed from the order.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current cart in session.

Example:

Jumpseller.removeCouponFromCart("test-coupon", {callback: callbackFunction})
Jumpseller.removeCouponFromCart(["test-coupon", "test-coupon-1", "test-coupon-2"], {callback: callbackFunction})

getCurrentProductInfo

• getCurrentProductInfo function(options)
• calls the method GET /api/products/:permalink.json of the Javascript API.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current product.

Example:

<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data); }; // outputs the product's available data
  Jumpseller.getCurrentProductInfo({callback: callbackFunction})
</script>

getCurrentCategoryInfo

• getCurrentCategoryInfo function(options)
• calls the method GET /api/categories/:permalink.json of the Javascript API.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current category.

Example:

<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data); }; // outputs the category's available data
  Jumpseller.getCurrentCategoryInfo({callback: callbackFunction})
</script>

getCurrentSearchInfo

• getCurrentSearchInfo function(options)
• calls the method GET /api/search/*query of the Javascript API.
• options is a Javascript object. Calls the callback method defined in the options object.
• returns the JSON representation of the current search.

Example:

<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data); }; // outputs the search query result data
  Jumpseller.getCurrentSearchInfo({callback: callbackFunction})
</script>