Troubleshooting Installation – Outsourse Web / Mobile / E-commerce Design

Troubleshooting Installation

Troubleshooting Installation:

If you don’t see these files:

assets/customproductbuilder.js
assets/customproductbuilder.css

please create them following the next steps:

Click on ‘Add New Asset’
Name the file as customproductbuilder.js and paste the following snippet:

function addToCart(postParams) {
  	
    let data = postParams.productsData;
      
    $.ajax({
      type: 'POST',
      url: '/cart/add.js',
      data: JSON.stringify(data),
      contentType: 'application/json',
      dataType: 'json'
    }).done(function (res) {
        
      var response = {
        type: "addToCart",
        action: "addToCart", 
        message: "addToCart",
        success: true
      };
        
      var iframe = document.getElementsByClassName("user-custom-product-builder")[0];
      iframe.contentWindow.postMessage(JSON.stringify(response), "https://customproductbuilder.buildateam.io");

    }).fail(function(err) {
      console.log(err);
    });
    
  }
  
  function listener(event){
    
    if ( event.origin !== "https://customproductbuilder.buildateam.io" ) {
      return;
   	}
    
    var postParams = JSON.parse(event.data);
    
    if (!postParams.action) {
      return;
    }
    
    switch(postParams.action) {
      case 'addToCart':
        addToCart(postParams);
        break;
      default:
        return;
    }
    
  }
  
  if (window.addEventListener){
  	addEventListener("message", listener, false)
  } else {
  	attachEvent("onmessage", listener)
  }

3. Open Assets/theme.css.liquid. Paste the following snippet in it:

.user-custom-product-builder {
width: 100%;
height: 800px;
position: relative;
border: none;
margin-top: -60px;
}

That’s it!