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: |
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 |
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. |
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 |