Profile template

Description

The profile template is used by the Profile Widget.

Control classes

Class	Description	Required
mambo-ctrl-earn	Displays the "How do I earn points?" popup when clicked	No
mambo-ctrl-gift	Displays the Gift Widget in a popup when clicked	No
mambo-ctrl-point	Displays the points tooltip with the current points description when clicked	No
mambo-ctrl-prog-*	Element where tab progress (completed/total items) is injected. The * is replaced with: levels, missions, achievements, coupons, or a custom value derived from tab tags (joined with underscores)	No
mambo-ctrl-prog-bar-*	Element where progress percentage style is applied (width: xx% !important) to create progress bars. The _ follows the same pattern as mambo-ctrl-prog-_	No
mambo-ctrl-tab	Identifies individual tab items. Should be on the same element using the mambo-ctrl-tab-* class	No
mambo-ctrl-tab-*	When clicked, renders the grid template into the mambo-ctrl-tab-content element. The _ follows the same pattern as mambo-ctrl-prog-_	No
mambo-ctrl-selected	Applied to the last clicked mambo-ctrl-tab-* element. Default is mambo-ctrl-tab-missions	No
mambo-ctrl-tab-content	Element where missions, levels, achievements and coupons templates are injected. Default contains the missions slider template	Yes
mambo-ctrl-mission-details	Element where the mission details template is injected when a mission item is clicked	No

Template data

Variable	Description	Type
user	User data object with basic user information. For complete details, refer to the User API documentation	Object
isLoading	Flag indicating whether user data is still loading. If true, the template will re-render once loading completes	Boolean
tabs	List of tabs to render in the profile. Each tab contains ID, title, tags, data, and progress information	Array
points	List of points unlocked by the current user	Array

Implementation example

This example shows a basic profile template with tabs and points display:

JavaScript

<script type="text/template" id="profile-template">
  <%= ( !isLoading ) ? user.firstName : '' %>
  <% _.forEach( points, function( pt, idx ) { %>
      <div class="mambo-ctrl-point"><%= pt.pts %> <%= pt.units %></div>
  <% } %>
  <div class="mambo-ctrl-earn">How do I earn points?</div>
  
  <% _.forEach( tabs, function( tab, idx ) { %>
      <div class="mambo-ctrl-tab mambo-ctrl-tab-<%= tab.id %>">
          <%= tab.title %> 
          (<span class="mambo-ctrl-prog-<%= tab.id %>">
              <%= tab.progress %>
          </span>)
      </div>
  <% }); %>
  
  <div class="mambo-ctrl-tab-content"></div>
  <div class="mambo-ctrl-mission-details"></div>
</script>

<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the default Profile template
      Mambo.updateTemplate( Mambo.Template.profile, Mambo('#profile-template').html() );
  });
</script>

Customisation options

Consider these enhancements:

• Adding profile images and personal information
• Implementing custom tab styles based on completion status
• Creating interactive progress bars with animations
• Adding filtering options for rewards and achievements
• Incorporating social sharing functionality