Cheetah CES Docs Portal

Navigation
Home
GitHub
Email
Corporate Site

JS SDK
Introduction
Getting Started
Cheetah Elements
Cheetah API Calls
Branding (Template Sets)
SSO
Visitor Token
Override UI Templates
JS SDK CDN

<p>
  <div class="stellar-login"></div>
  <div class="stellar-summary"></div>
  <div class="stellar-profile"></div>
  <div class="stellar-activities"></div>
  <div class="stellar-activity-table"></div>
</p>

<p>
  <div class="stellar-rewards"></div>
  <div class="stellar-offers"></div>
  <div class="stellar-newsfeed"></div>
  <div class="stellar-gallery"></div>
</p>

<p>
  <div class="stl_token_first_name"></div>
  <div class="stl_token_point_balance"></div>
</p>

<div class="stellar-login"></div>

<div class="stellar-login" mode="signup"></div>

<div class="stellar-login" data-mode="signup">
  <form id="stellar-register-form">
     <div class="stellar-signup-notification"></div>
     <label>First Name: </label>
       <input type="text" name="first_name" sl-validation="required" />
       <label>Last Name: </label>
       <input type="text" name="last_name" sl-validation="requied" />
       <label>Email: </label>
       <input type="text" name="email" sl-validation="required,email" />
       <label>Password: </label>
       <input type="password" name="password" sl-validation="required" />
       <label>Confirm Password: </label>
       <input type="password" name="password_confirmation" sl-validation="equalTo[password]"/>
       <label>Age</label>
       <input type="text" name="age" sl-validation="required"/>
    <div>
     <label><input type="checkbox" value="1" name="receive_email_offers" />Receive Email Offers</label>
  </div>
  <div> 
    <label>Gender:</label>
        <label><span><input type="radio" value="m" name="gender" sl-validation="required" />Male</span></label>
        <label><span><input type="radio" value="f" name="gender" sl-validation="required" />Female</span></label>
  </div>
    <button id="stellar-btn-signup">SIGN UP</button>
    <p>Already Have an account?</p>
    <button id="stellar-btn-show-signin">SIGN IN</button>
    </form>
 </div>

    <input type="text" name="first_name" 
           sl-validation="required,minLength[2],maxLength[3]"
           sl-message-requied="This field is required"
           sl-message-minLength="Minimum of 2 characters allowed!"
           sl-message-maxLength="Maximum of 3 characters allowed!" />

<div id="stellar-signup-captcha"></div>

<form id="stellar-register-form">
  <div class="stellar-signup-notification"></div>
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <input type="text" name="email" />
  <input type="password" name="password" />
  <input type="password" name="password_confirmation" />
  <button id="stellar-btn-signup">SIGN UP</button>
  <button id="stellar-btn-show-signin">SIGN IN</button>
</form>

<div class="stellar-visitor"></div>

<div class="stellar-gate" data-member="true"></div>

<div class="stellar-summary"></div>

<div class="stellar-preferences"></div>

<div class="stellar-profile"></div>

<div class="stellar-profile" data-fields="memberProfileFields"></div>

<script>
function memberProfileFields() {
  var fields = [];
  fields.push({ attrib: "address", source: "profile", label: "Your Address", editable: true, 
      fields: [
        { attrib: "mailing_street", source: "profile", label: "Mailing Street: ", type: 'text'},
        { attrib: "mailing_city", source: "profile", label: "Mailing City: ", type: 'text'},
        { attrib: "mailing_state", source: "profile", label: "Mailing State: ", type: 'text'},
        { attrib: "mailing_postal_code", source: "profile", label: "Postal Code: ", type: 'text'},
        { attrib: "mailing_country", source: "profile", label: "Mailing Country: ", type: 'text' }
      ]});
  return fields;
}
</script>

<div class="stellar-activities"></div>

<div class="stellar-activities"  
   data-activity-type="sl_reward" 
   data-template="customActivitiesTemplate" 
   data-limit="200"></div>
   
<script>
function customActivitiesTemplate(item) {
return '<div class="stl_content">'+
          '<span class="col-1">'+item.created_at+'</span>'+
          '<span class="col-2">'+item.type+'<br></span>'+
       '</div>';
}
</script>

<div class="stellar-offers"></div>

<div class="stellar-offers" data-layout="medium_rectangle" data-category="electronics" data-limit="100"></div>

<div class="stellar-challenges"></div>

<div class="stellar-challenges"
   data-template="customChallengeTemplate"
   data-category="students"
   data-limit="100"
   data-customHandler="customChallengeHandler">
</div>
<script>
function customChallengeTemplate(item) {
  return '<div class="stl_content">'+
            '<span class="col-1">' + item.heading +'</span>'+
            '<span class="col-2">' + item.details +'<br></span>'+
         '</div>';
}
function customChallengHandler() {
// used by generic challenge to redirect to a certain path
}
</script>

<div class="stellar-challenges-responses"></div>

<div class="stellar-challenges-responses"
   data-template="customChallengeResponseTemplate"
   data-limit="100">
</div>
<script>
function customChallengeResponseTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.challenge.heading +'</span>'+
              '<span class="col-2">' + item.challenge.details +'<br></span>'+
           '</div>';
}
</script>

<div class="stellar-rewards"
     data-layout="medium_rectangle" 
     data-category="certificates" 
     data-limit="100"
     data-sort_by="points"
     data-sort_dir="asc"
     data-template="customRewardsTemplate">
</div>
<script>
function customRewardsTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.heading +'</span>'+
              '<span class="col-2">' + item.details +'<br></span>'+
           '</div>';
}
</script>

<div class="stellar-rewards-responses"
     data-layout="medium_rectangle"
     data-limit="100"
     data-template="customRewardResponsesTemplate">
</div>
<script>
function customRewardResponsesTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.reward.heading +'</span>'+
              '<span class="col-2">' + item.reward.details +'<br></span>'+
           '</div>';
}
</script>

<div class="stellar-newsfeed"
     data-layout="medium_rectangle"
     data-limit="100"
     data-feed-name="twitter"
     data-template="customNewsfeedTemplate"></div>
<script>
function customNewsfeedTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.heading +'</span>'+
              '<span class="col-2">' + item..details +'<br></span>'+
           '</div>';
}
</script>

<div class="stellar-gallery"
     data-template="customGalleryTemplate"></div>
<script>
function customGalleryTemplate(item) {
  // return html string
}
</script>

<div class="stellar-leaderboard"
     data-limit="50"
     data-template="customLeaderboardTemplate"
     data-datakey="region"
     data-name="all_time"
     data-endpoint="group_mates"></div>

<div class="stellar-leaderboard" 
     data-name="all_time" 
     data-region-group-mates="true" 
     data-template="myRankTemplate" 
     data-datakey="region_group_mates"></div>
<script>

<script>
function myRankTemplate(item) {
  // return html string
}
</script>

<div class="stellar-static-page"></div>

<div class="stellar-content-block"></div>

<div class="stellar-content-page"></div>

<div class="stellar-frame"></div>

<div class="stellar-progress-bar" 
     data-goal="10000"
     data-reward-text="10,000 POINTS = $5 VOUCHER"></div>

<div class="stellar-giftcards"></div>

<div class="stellar-giftcards" data-widget="carousel"></div>

<div class="stellar-giftcards-lookup"
     data-placeholder="xxxx-xxxx-xxxx"
     data-keymask="SSS-999-aaa"></div>

<div class="stellar-documents"></div>

<div class="stellar-punchcards"></div>

<div class="stellar-punchcards" 
    data-template="punchcardsTemplate"
    data-category="minitours"
    data-sort_by="expiration_date"
    data-limit="100"></div>
<script>

// Cheetah Ready Function
window.stellarReady = function() {
    console.log("JS SDK Ready")

    // Punchcards loaded event binding to initialize punchcard image
    Stellar.events.bind('punchcards.loaded', function(response) {
        initializePunches();
    });
}

// Loop thgrough all the .punch-container and add active class to color the image
function initializePunches() {
    const punchContainers = document.querySelectorAll('.punch-container');
    punchContainers.forEach(punchContainer => {
        const punches = punchContainer.querySelectorAll('.punch');
        
        punches.forEach(punch => {
            let images = punch.querySelectorAll('img');
            let punchCount = parseInt(punch.getAttribute('data-punch'));
            let totalPunch = parseInt(punch.getAttribute('data-total-punch'));
                
            images.forEach((image, index) => {
                if (punchCount > 0) {
                    image.classList.add('active');
                    punchCount--;
                }
            });
        });
    });
}

function generateImageList() {
    let image = `<img src="https://docs.cheetahces.com/img/sdk/js/getting_started/punches-logo.jpeg" alt="punches">`;
    let punches = '';

    for (let i = 5 - 1; i >= 0; i--) {
        punches += image
    }
    return punches
}

// Punchcard template override
// Display x number of image based on the required_punches.
// Display description, number of punches and expiration data
function punchcardsTemplate (item) {
    let description = item.heading || item.label;
    let expires = `<p class="item-expiration">Expires ${Stellar.ui.formatters.USDateFormat(item.punchcard_type.expiration_date)}</p>`
    let expiration = item.punchcard_type.expiration_type == "none" ? "" : expires;

    // Temporary image.
    // We can also retrieve the image in the extra json of the punchcard definition.
    let punches = generateImageList()

    return `<div class="stl_content punch-container">
            <div class="punch" data-punch="${item.current_punches}" data-total-punch="${item.required_punches}">${punches}</div>
            <div class="punch-content">
                <div class="required-punches">${item.current_punches}/${item.required_punches}</div>
                <div class="content-description">${description}</div>
                <div class="expiration">${expiration}</div>
            </div>
        </div>`
}
</script>