Step 1 - Library Integration

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	type	example
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"
sizes_in_stock	JSON	{ Small: 1, Medium: 0, Large: 2 }
shop_id	String	Your unique ID provided by Easysize
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') }

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
• When and how was your size selector updated to (to what?)

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