Easysize instance

Here you will find the documentation about all the required and optional attributes for launching Easysize with your e-shop.

Load the library

Include our library to your pages

<script type="text/javascript" src="https://webapp.easysize.me/web_app_v1.0/js/easysize.js"></script>

Start Easysize

When the Easysize library is loaded, a global Easysize object becomes available on the page. To initiate this Easysize object, create a new instance and pass a configuration object to it. Finally, run the start command:

var easysize = new EasySize(conf);
easysize.start();

The conf object

Key Value Examples
product_id String 123” or “abcde
product_type String jeans” or “sale, men, jeans
product_brand String Solid
product_gender String Male” or “M
product_sku String SOL-TS-WT-002
product_fit String regular
product_model String 16-SUM-STL
image_url String https://www.easysize.me/assets/images/es-logo.svg
sizes_in_stock JSON object { small: 1, medium: 0, large: 2 }
shop_id String qw3rt4u1p0
placeholder CSS selector #product_size or .product-attributes
add_to_cart_btn_selector CSS selector .btn-cart
size_selector CSS selector #size_dropdown
loaded Function function() { console.log('Easysize is up and running') }

Custom size selectors

We know that default size selectors are boring, therefore we took the time to support custom ones. The tricky part about custom made objects is that there usually isn’t a silver bullet that can automatically identify your custom size selector - so we need your help.

In order for Easysize to know how and when your custom size selector is used, please add attributes to the configuration object of Easysize.

How to update your size selector

To update the size selector on your page, pass in a size_update_function key to the Easysize configuration with a function that can update the selected size on your page. The size_update_function must return either true/false in order to signal Easysize whether the size has been successfully selected. Here’s a simple jQuery example for such a function:

...
<ul id="size_selector">
  <li>Small</li>
  <li>Medium</li>
  <li>Large</li>
</ul>
...
var easysize = new EasySize({
  ..,
  size_update_function: function(size) {
    var size_element = $('#size_selector li:contains('+size+')');
    if(size_element) {
      $(size_element).click();
      return true;
    }
    return false;
  },..
});
easysize.start();

If you need assistance with preparing this function, do not hesitate to contact us.

When and how was your size selector updated to

Easysize also needs to know when a user clicks on the size selector and which size they selected.

The simplest way to do this is to add another listener of click event.

var easysize = new EasySize({...});
easysize.start();

$('#size_selector li').on('click', function() {
  easysize.sizeChangedTo( $(this).text() );
});