Migration

Migration

The mySHOEFITTER Shop Integration was split into two parts: A light wight JavaScript Library and nice customizable Banner that will loaded through the JavaScript Library in an iFrame. This results in a faster, safer integration for our customers!

Improvements

  • Reduced the File Size from 285 KB to 3 KB
  • Reduced from 9078 to 174 Lines of Code
  • Moved whole Banner to a hosted iFrame
  • More possibilities to customize the Banner
  • Encapsulated Code that won't conflict with your website anymore
  • Better analytics and trackable user behaviour
  • Full refactoring in typescript for better scalability, maintainability, and type safety in the codebase

Migration Process

The migration process should'nt take longer than two minutes.

Replace the Script

Replace the following script before your </body> tag

index.html
-<script src="https://cdn.myshoefitter.com/script.js" defer></script>

with the new initialization method:

index.html
<!-- Load the mySHOEFITTER Script -->
<script src="https://js.myshoefitter.com/v1/script.js"></script>
 
<!-- Initialize mySHOEFITTER -->
<script type="application/javascript">
  myshoefitter.init({
    shopId: 'your-shop-id', // <- Replace
    productId: 'custom-product-id' // <- Replace
  });
</script>

Change the Button ID

Change the ID of the Button from mySF_Widget_Button to myshoefitter-button:

index.html
<button id="myshoefitter-button">Find the right size</button>

Remove the Product ID Element

index.html
-<div id="product-id" style="display: none;">ABCXYZ123</div>

That's it. You are ready!