API Documentation fashionfitr™


Implementation manual

Depencencies

1. Place the required JavaScript and CSS dependencies on your document

<head>
	<script type="text/javascript" src="https://popup.fashionfitr.com/js/ffb-min.js"></script>
	<link href="https://popup.fashionfitr.com/js/fashion-fitr-button.css" rel="stylesheet"/>
</head>

2. Create a container (div) with an ID. In the specified container we will place the fashionfitr button if available

3. The last step to get a CTA button on the product page is to call the button with the fashionFitrButton.getButton function.

<script type="text/javascript">
	fashionFitrButton.getButton({
		shopid: 99999, // Enter your unique shop ID
		module: 'JC', // Enter module (JC, CLT or CLB). You can also use your category name which will be mapped to the correct module.
		gender: 'W', // Gender ex. M / W
		brand: 'G-star', // Product brand
		label: 'label', //'label' or 'size', or 'combi' e.g. XXL / 40 / XXL-40 (Automaticly filled when using measurement parameters.
		language: 'en-EN', // Button language ex. en-EN / nl-NL
		container: 'button', // Div ID where the button will be placed
		name: 'G-start%20Sprijkerbroek', // Product name used to determine module
		addToCart: false, // Add to cart button if set to false "Close" will be shown
		selectSize: false, // Select size some shops prefer not to add to cart directly but select the size in the shop.
		measurement: 'W30/L32', // One random measurement available from the product (used to determine label)
		callback: function(item){
			console.log(item); // When using addToCart or selectSize.
		}
	});
</script>

When calling the function a call to our platform will be made, we will analyze all the given parameters and map them with our data. When all parameters are correct and present in our API we return the button in the specified container, if there’s no button available nothing will be displayed.

Parameter

Field Type Required Description
Shopid INT Yes

Shop ID provided by fashionfitr

Module String Yes

Module type. ‘jc’ (jeans), ‘clt’ (casual leasure top), or ‘clb’ (casual leasure bottom). Or enter the full category name which makes sense to the product for example:
Product product is jeans, give us the category “Jeans” we will map those parameters to the correct module

Gender String Yes

Gender type. ‘w’ or ‘m’ (woman or man)

Brand String Yes

Brand name product, used to compare the sizespecs

Label String Yes

Label type, required for showing the right sizebar
‘label’: shows label, e.g. S, M, X, XL..
‘size’: shows size, e.g. 32, 34, 36, 38..
‘combi’: shows combi e.g. S-32, M-34, X-36..

Measurement String Yes

One random measurement which is available for the given product we will use this to return a size bar in the same label and override the given label when different (used for mapping) and not all shop owners know the label for each product, so when using this label is still required but can set static to “label”

Language String No

Language code for the language to be used in the popup, default will be showing the language set for the shopID but if you have a multi-language shop this might be handy.

Available codes:
‘en-EN’: English
‘nl-NL’: Dutch
‘de-DE’: German

Container String Yes

Container div ID will be used to place the button

Name String Yes

Productname, used to make sure or determine if the right module is given for the product

AddToCart Boolean Yes

‘true’ or ‘false’ if set to true we will show “Add to cart” button on the result page instead of close or select size. Use the callback to handle events

selectSize Boolean Yes

‘true’ or ‘false’ if set to true addToCart must be ‘false’ will show “Select size” Used to select the size in your shop. If both are set to false we will show a “Close“ button