cube-logo

Documentation CUBE Bikesizing

Documentation for the integration of the "CUBE Bikesizing" form

  1. Setup
  2. Modalbox integration
  3. Iframe integration
1. Setup:
Javascript integration:

For the interaction of the modal box and the correct display of the iframe.

                    <script src="https://bikesizing.cube.eu/assets/js/bikesizing.js" async></script>
2. Dialog integration:

Javascript integration for opening the frame calculator as a modal box.

Markup options:
  • data-cube-sizing required (Reference for JS)
  • data-cube-sizing-product required (CUBE productid)
  • data-cube-sizing-title optional (Producttitle)
  • data-cube-sizing-language optional (Formularlanguage "de|en|es|it|fr|pl" - if empty the browserlanguage is used)
  • data-cube-sizing-color optional (Themecolor) Example: "#a2c617", "red", "blue"

Markup definition:
                    
                        <button
                            data-cube-sizing
                            data-cube-sizing-product="417200"
                            data-cube-sizing-title="CUBE Hyde Race iridium´n´black"
                            data-cube-sizing-language="en"
                            data-cube-sizing-color="#a2c617"
                            >Calculate frame size
                        </button>

Producttitle

Productdescription:
3. Iframe integration:
Parameters:
  • Article number:
    Example: 447300, 447300Z, 448210E

  • Producttitle (optional):
    Example: CUBE Hyde Race iridium´n´black

  • Language (optional):
    Options: "de|en|es|it|fr|pl|nl"

  • Themecolor (optional):
    Options: "%23a2c617", "red", "blue" ! If you use hex values replace the # with the value: "%23" (#a2c617 -> %23a2c617)
Syntax iframecode:
                    <iframe src="https://bikesizing.cube.eu/iframe/{Article number}/{Producttitle}/?language={Language}&color={Themecolor}" data-cube-sizing-iframe allowfullscreen frameborder="0"></iframe>
Iframecode Beispiel:
                    <iframe src="https://bikesizing.cube.eu/iframe/417200/CUBE Hyde Race iridium´n´black/?language=en&color=%23a2c617"  data-cube-sizing-iframe allowfullscreen frameborder="0"></iframe>
Result: