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”
user_id String “gweg984aqsf” or “-1” (if user is not logged in)
placeholder CSS selector [Placeholder for Easysize button] #product_size or .product-attributes
recommendation_placeholder CSS selector [Placeholder for returning user messages] #product_size or .product-attributes
add_to_cart_btn_selector CSS selector .btn-cart
size_selector CSS selector #size_dropdown
cookies_enabled boolean ‘true’ by default, set to ‘false’ if user denies cookie policy
loaded Function function() { console.log('Easysize is up and running') }
recommendation_placeholder CSS selector #product_size if omitted, size selector will be used

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() );
});