OptionalNote checkout

by mtenschert

HTML

<div ng-if="alpinCheckoutManager.isVisible('binding')" id="personData" class="person-data__content clearfix checkout-process__container ng-scope">

  <h3>Facilitez-nous les réglages de fixation</h3>

</div>

JavaScript

//var O360G_totalPath = "/fr/payment/checkout"; // "/en/skiverleih/france/tirol/nauders"; window.location.pathname;
var O360G_totalPath = window.location.pathname; // "/en/skiverleih/france/tirol/nauders"; window.location.pathname;
var O360G_paths = O360G_totalPath.split("/"); // string to [en, ski-rental, france, ...]
var O360G_lang = O360G_paths[1]; // extract language string, example: en

//alert(O360G_lang);

// translation-keys collected	
var translations = {
  en: {
    translation1: "optional",
    translation2: ""
  },
  fr: {
    translation1: "optionnelle ",
    translation2: ""
  },
  nl: {
    translation1: "facultatief",
    translation2: ""
  },
  de: {
    translation1: "optional",
    translation2: ""
  },
  it: {
    translation1: "opzionale",
    translation2: ""
  }
};

// create HTML output
var htmlNote = "<span class='important-label' style='transition: all 1s; opacity: 0; margin-left:10px; margin-bottom:2px; vertical-align: middle;'>" + translations[O360G_lang].translation1 + "</span>";
//alert(htmlNote);

// add HTML output
var renderNote = function() {
  $("div#personData>h3").append(htmlNote);
  // .replace("%zeichen%", variable)
};
renderNote();

var effectsNote = function() {
  $("div#personData>h3>span").css({
    "opacity": "1"
  });
};

// set timeout for css effects
setTimeout(function(){ 
effectsNote();
}, 1000);