Merge pull request #180 from SizeMeCom/add-option-circ-meas

Add UI option to show size guide measurements as circular

README.md

@@ -29,11 +29,11 @@ Application expects to find an object named `sizeme_options` (TODO: rename to `S
 ```
 * [serviceStatus] (_String_): is SizeMe enabled? Default: "on"; other values: "off", "ab".
 
-* [pluginVersion] (_String_): version of the webstore-plugin. Optional.
+* [pluginVersion] (_String_): version of the webstore plugin. Optional.
 
 * [contextAddress] (_String_): URL to the SizeMe backend service.
 
-* [shopType] (_String_): webstore provider (magento|printmotor|pupeshop|woocommerce)
+* [shopType] (_String_): webstore provider (magento|printmotor|pupeshop|woocommerce|shopify)
 
 * [debugState] (_Boolean_): write debugging info to console. Default: false
 
@@ -48,6 +48,7 @@ Application expects to find an object named `sizeme_options` (TODO: rename to `S
   - [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.
   - [toggler] (_Boolean_): enable/disable functionality that can be used to toggle the visibility of SizeMe content
+  - [flatMeasurements] (_Boolean_): show product circumference measurements (chest, waist etc) as measured on a flat surface in the size guide.  Default: true
 
 * [additionalTranslations] (_Object_): Optionally override translations defined under ['i18n'](src/i18n). Example of how to 
 override the Swedish translation for chest:

index1.html

@@ -832,7 +832,8 @@ <h2>Product Tags</h2>
         shopType: "magento",
         debugState: true,
         uiOptions: {
-            toggler: true
+            toggler: true,
+            flatMeasurements: false
         }
     };
 </script>

src/api/ProductModel.js

@@ -1165,6 +1165,7 @@ export default class ProductModel {
         this.arrows = arrows;
         this.itemDrawing = itemDrawing;
         this.essentialMeasurements = getEssentialMeasurements(itemTypeArr);
+        this.pinchedFits = pinchedFits;
 
         this.getItemTypeComponent = index => itemTypeArr[index];
     }
@@ -1263,6 +1264,7 @@ export {
     DEFAULT_OPTIMAL_FIT,
     DEFAULT_OPTIMAL_STRETCH,
     fitLabelsAndColors,
+    pinchedFits
 };
 
 

src/api/uiOptions.js

@@ -1,7 +1,8 @@
 const general = {
     disableSizeGuide: false,
     toggler: false,
-    firstRecommendation: true
+    firstRecommendation: true,
+    flatMeasurements: true
 };
 
 const shops = {

src/sizeguide/SizeGuideItem.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import SizeGuideModel from "../api/ProductModel";
+import uiOptions from "../api/uiOptions";
 import Optional from "optional-js";
 
 const realCanvasWidth = 350;
@@ -313,7 +314,7 @@ function writeItemCanvas (canvas, options) {
     const { model, highlight, matchMap, measurements, selectedSize, isGuide } = options;
     const measurementArrows = model.arrows;
     const itemDrawing = model.itemDrawing;
-    
+
     const c = canvas.getContext("2d");
 
     // Store the current transformation matrix
@@ -351,7 +352,7 @@ function writeItemCanvas (canvas, options) {
     const plotArrows = (selectedMeasurements) => {
         for (const [measurement, value] of Object.entries(selectedMeasurements)) {
             const arrow = Object.assign({
-                style: isGuide ? "line" : "arc",
+                style: (isGuide && uiOptions.flatMeasurements) ? "line" : "arc",
                 color: isGuide ? arrowColorInfo :
                     Optional.ofNullable(SizeGuideModel.getFit(matchMap.get(measurement)))
                         .map(fit => fit.arrowColor)

src/sizeguide/SizeGuideProductInfo.jsx

@@ -6,6 +6,7 @@ import { withTranslation } from "react-i18next";
 import HoverContainer from "./HoverContainer.jsx";
 import CookieHideWrapper, { hideSizeMe } from "../common/CookieHideWrapper.jsx";
 import { openLoginFrame } from "../common/LoginFrame";
+import uiOptions from "../api/uiOptions";
 
 class SizeGuideProductInfo extends React.Component {
 
@@ -20,11 +21,11 @@ class SizeGuideProductInfo extends React.Component {
 
     render () {
         const { t, measurements, onHover, productModel } = this.props;
-        const { measurementOrder, measurementName } = productModel;
+        const { measurementOrder, measurementName, pinchedFits } = productModel;
 
         const measurementCell = (size, measurement) => (
             <HoverContainer measurement={measurement} key={measurement} onHover={onHover}>
-                <td>{(measurements[size][measurement] / 10.0).toFixed(1)} cm</td>
+                <td>{(measurements[size][measurement] / ((!pinchedFits.includes(measurement) || uiOptions.flatMeasurements) ? 10.0 : 5.0)).toFixed(1)} cm</td>
             </HoverContainer>
         );
 
@@ -56,10 +57,12 @@ class SizeGuideProductInfo extends React.Component {
                             ))}
                         </tbody>
                     </table>
-                    {this.isInside() ?
+                    {this.isInside() &&
                         <div className="sizeme-explanation">
                             <div dangerouslySetInnerHTML={{ __html: t("sizeGuide.measurementDisclaimerInside") }}/>
-                        </div> :
+                        </div>
+                    }
+                    {uiOptions.flatMeasurements && !this.isInside() &&
                         <div className="sizeme-explanation">
                             <div dangerouslySetInnerHTML={{ __html: t("sizeGuide.measurementDisclaimer") }}/>
                             {this.hasNeckOpening() &&