jPack Site Demo

Javascript class for storing and interacting with a website's data in a multi-tenant application

by Shane Stebner

HTML

<script src="https://htmlguyllc.github.io/jPack/dist/jpack.bundled.min.js"></script>
<script>
  const $site = {
    id: 1, //pretend these came from your server and it's being output in your HTML's <head> section
    name: 'Bob\'s whitelabel store',
    config: JSON.parse(JSON.stringify({ //your server will need to provide JSON to JS to parse
    	allow_promo_codes: false
    })),
  };
</script>

<h1>
<sitename></sitename> Checkout
</h1>
Your total is $1,000,000
<input placeholder="enter a promo code">
<a href="#">Pay now</a>

JavaScript

/**
jPack Site Demo
https://htmlguyllc.github.io/jPack/#site

Created for multi-tenant applications where you need to potentially do things based on a specific tenant (or site/website).
*/

//instantiate the Site with all values provided from your server
const CurSite = new jpack.Site($site);

//replace the sitename elemnt with the site's name
jpack.dom.getElement('sitename').innerText = CurSite.getName();

//if promo codes are disabled, hide the field
if( !CurSite.getConfigItem('allow_promo_codes') ){
    jpack.dom.getElement('input').style.display = "none";
}

//wait 5 seconds
window.setTimeout(function(){
  //now enable them
  CurSite.setConfigItem('allow_promo_codes', true);

  //if promo codes are disabled, hide the field
  if( CurSite.getConfigItem('allow_promo_codes') ){
      jpack.dom.getElement('input').style.display = "inline-block";
  }
}, 5000);