CPG-AIDEL-CONCEPT

/* This is by no means a working script. This is our proposed idea in somewhat of technical document. The following solution is being proposed by CPG.IO in order to make setup, maintenence and iterating easy. The idea is to add an abstract JS snippet to the HEAD of the SiteCore project that can pull in future code which will supply the SiteCore pages with enough eCommerce functionality to produce a stable, minimum viable product. From there, we will either extend the program of explore a larger platform migration.   */

// Hypotehtical steps
// Step 1 - Add the following snippet to the head of the SiteCore project. 
// Note: this is not the official script
// Here is a list of browsers that can support the async feature - possibly need to plan for graceful deg.
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Browser_compatibility

<script async type="text/javascript" id="aidelle_cart_functions" class="aidelle-cart-functions">
  (function() {
    function async_load(){
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      var theUrl = 'http://store.aidelles.com/ecommerce-pkg';
      s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + 'ref=' + encodeURIComponent(window.location.href);
      var embedder = document.getElementById('aidelle-cart-fucntions-5b8cf3a4-b0f0-13e9-3737-d5a159268ae6');
      embedder.parentNode.insertBefore(s, embedder);
    }
    if (window.attachEvent)
      window.attachEvent('onload', async_load);
    else
      window.addEventListener('load', async_load, false);
  })();
</script>

/* Wait until after onload. To prevent us from blocking onload, we wrap everything in a function, and call that once the page has finished loading (in a cross-browser compatible way). Note that we don’t just use window.onload to avoid stomping on any existing onload events on the target page. Wrap the code in a closure, and add a referer parameter onto the url (so we can track who’s embedding our widgets), and we have our final solution. */

/* The above script hits a route on our Magento server and response with some JavaScript. The first iteration of this script will create a hello world div on the SiteCore template page, along with an active function and variable, which will be initialized and set via our API. The return JS will include what it needs to make an authenticated request to our API. A later iteration may include a local authetnication key value pair for sercurity purposes. */

// Step 2 - Handle Response
// This is the response the calling snippet, it gets more JS and CSS and hopefully renders them so everything is in scope

(function (global) {
  // add array index of for old browsers (IE<9)
  if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
      var i, j;
      i = start || 0;
      j = this.length;
      while (i < j) {
        if (this[i] === obj) {
          return i;
        }
        i++;
      }
      return -1;
    };
  }
  // make a global object to store stuff in
  if(!global.CPGIOAIData) { global.CPGIOAIData = {}; };
  var CPGIOAIData = global.CPGIOAIData;
  
  // Boom, @kanthy, this is where we make magic happen
  // Hydrate any magento API connection strings
  // Make test call to API and return product list
  // Read from localStorage
  // Write to localStorage
  // etc

  // To keep track of which embeds we have already processed
  if(!CPGIOAIData.processedScripts) { CPGIOAIData.processedScripts = []; };
  var processedScripts = CPGIOAIData.processedScripts;

  if(!CPGIOAIData.styleTags) { CPGIOAIData.styleTags = []; };
  var styleTags = CPGIOAIData.styleTags;

  var scriptTags = document.getElementsByTagName('script');
  var thisRequestUrl = 'request.url';

  for(var i = 0; i < scriptTags.length; i++) {
    var scriptTag = scriptTags[i];

    // src matches the url of this request, and not processed it yet.
    if (scriptTag.src == thisRequestUrl && processedScripts.indexOf(scriptTag) < 0) {

      processedScripts.push(scriptTag);

      // add the style tag into the head (once only)
      if(styleTags.length == 0) {
        // add a style tag to the head
        var styleTag = document.createElement("link");
        styleTag.rel = "stylesheet";
        styleTag.type = "text/css";
        styleTag.href =  "http://store.aidelles.com/assets/custom-aidelles.css";
        styleTag.media = "all";
        document.getElementsByTagName('head')[0].appendChild(styleTag);
        styleTags.push(styleTag);
      }

      // Create a div
      var div = document.createElement('div');
      div.id = 'WHATEVER';

      // add the cleanslate classs for extreme-CSS reset.
      div.className = 'aidelle-cart-fucntions .dashboard_widget cleanslate';

      scriptTag.parentNode.insertBefore(div, scriptTag);

      div.innerHTML = 'Hello World';

    }
  }
})(this);

// From here, we may namespace objects
// Access local storage and populate a cart object
// Handle the redirect or click events of the buttons
// Can we use global variables if they are very specific and limited? ie. CPGIOAIData
// Strategy will be to send iteration 0.1 of this script over to a SiteCore engineer to test a basic test routine, from our server back to our API