Customization

CSS

Size Matters styling can be changed by adding CSS to your store's theme.

The following CSS selectors can be used to style Size Matters:

• div.esc-size-guide
• h5.esc-size-guide--title
• div.esc-size-guide--table-wrap
• p.esc-size-guide--description
• table.esc-size-guide--table
• tr.esc-size-guide--row
• th.esc-size-guide--heading

Javascript

Getting started

Add the following code before your scripts (this will expose Size Matter's configuration options):

!function(a){a._empty=a._empty||[],a._beforeRender=a._beforeRender||[],a._afterRender=a._afterRender||[],a._renderedAll=a._renderedAll||[],a._overrideContent=a._overrideContent||function(a){return a.content},a.onEmpty=function(b){b&&a._empty.push(b)},a.onBeforeRender=function(b){b&&a._beforeRender.push(b)},a.onAfterRender=function(b){b&&a._afterRender.push(b)},a.onRenderedAll=function(b){b&&a._renderedAll.push(b)},a.overrideCellContent=function(b){a._overrideContent=b}}(window.eastsideco_sizeGuides||(window.eastsideco_sizeGuides={}));

Get a callback before a chart is rendered

The onBeforeRender method allows you to register a callback which can modify the data in the chart.

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.onBeforeRender(function(data) {
	// data: { guideData, container }
	return data.guideData;
});

Get a callback after a chart is rendered

The onAfterRender method allows you to register a callback which is called after a chart is rendered. This callback cannot modify the chart.

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.onAfterRender(function(data) {	
    // data: { guideData, container, element }
    console.log(data);
});

Get a callback after all charts are rendered

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.onRenderedAll(function(data) {	
    // data: { container }
    console.log(data);
});

Provide a callback which modifies cell contents

The overrideCellContent method allows you to register a function that will be used to transform cell contents. The function should accept a string and return the modified content (as HTML).

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.overrideCellContent(function(value) {
    if (value == 'logo') {
        return '<img src="foo.png">';
    }

    return value;
});

-