Add option "skinClasses" to uiOptions, fixes #32

README.md

@@ -52,6 +52,7 @@ Application expects to find an object named `sizeme_options` (TODO: rename to `S
   - [addToCartElement] (_String_): DOM-element to listen to for add-to-cart events
   - [addToCartEvent] (_String_): DOM-event for add-to-cart
   - [maxRecommendationDistance] (_Integer_): maximum difference between optimal fit and total fit for SizeMe to consider the size for pre-selection. Default not set, meaning all sizes that are not too small are considered.
+  - [skinClasses] (_String_): contents will be appended to the class-attribute of SizeMe container element. Empty by default.
 
 * [additionalTranslations] (_Object_): Optionally override translations defined under ['i18n'](src/i18n). Example of how to 
 override the Swedish translation for chest:

src/SizeMeApp.jsx

@@ -20,6 +20,8 @@ class SizeMeApp extends React.Component {
         this.state = {
             loginModalOpen: false
         };
+        this.shopType = Optional.ofNullable(uiOptions.shopType).map((s) => `sizeme-${s}`).orElse("");
+        this.skinClasses = uiOptions.skinClasses || "";
     }
 
     componentDidMount () {
@@ -76,7 +78,7 @@ class SizeMeApp extends React.Component {
 
         if (resolved) {
             return (
-                <div className={`${matchState} sizeme-content`}>
+                <div className={`sizeme-content ${this.shopType} ${this.skinClasses} ${matchState}`}>
                     <div className="sizeme-slider-row">                        
                         <SizeSlider match={currentMatch} fitRecommendation={product.item.fitRecommendation || 0}
                                     selectedSize={selectedSize} matchState={matchState}/>

src/api/uiOptions.js

@@ -14,8 +14,7 @@ const shops = {
         addToCartElement: "button.btn-cart",
         addToCartEvent: "click",
         firstRecommendation: true,
-        sizeSelectorType: "default",
-        maxRecommendationDistance: null
+        sizeSelectorType: "default"
     }
 };
 

src/index.js

@@ -17,7 +17,6 @@ import "./scss/index.scss";
 console.log("Initializing SizeMe, version " + VERSION + ", built on " + BUILD_DATE);
 
 const section = document.createElement("div");
-section.setAttribute("class", `sizeme-content-${uiOptions.shopType}`);
 document.querySelector(uiOptions.appendContentTo).appendChild(section);
 
 const { addToCartElement, addToCartEvent } = uiOptions;