Gift template

Description

The gift template is used by the Gift Widget.

Control classes

Class	Description	Required
mambo-ctrl-gift	Container for the gift widget. When the popup option is true, this element is wrapped with an outer div for popup display	No
mambo-ctrl-gift-search	Input element for user search. Triggers search from the second character typed	No
mambo-ctrl-gift-results	Container for search results. Hidden when user clicks outside this element	No
mambo-ctrl-gift-select	Wrapper for each search result item. When clicked, selects the user and populates the search field	No
mambo-ctrl-gift-pic	Element where the selected user's picture is displayed (if available)	No
mambo-ctrl-gift-name	Element where the selected user's name is displayed	No
mambo-ctrl-gift-sel-what	Toggles the mambo-ctrl-gift-flip element between front and back. Front needs class mambo-ctrl-show-gifts, back needs class mambo-ctrl-show-pts	No
mambo-ctrl-gift-flip	Wrapper for the front and back card elements	No
mambo-ctrl-show-gifts	Wrapper for elements shown on the front of the card	No
mambo-ctrl-show-pts	Wrapper for elements shown on the back of the card	No
mambo-ctrl-gift-gifts	Select element with gift reward indices. On change, selects the reward and populates mambo-ctrl-gift-badge	No
mambo-ctrl-gift-badge	Element where the selected gift reward's badge is displayed	No
mambo-ctrl-gift-pts	Select element with point type IDs. Used to calculate remaining balance based on quantity	No
mambo-ctrl-gift-qnty	Input for the number of points to give	No
mambo-ctrl-gift-balance	Displays the giver's remaining balance after giving. Updates as quantity changes	No
mambo-ctrl-gift-why	Input for the reason for giving the gift	No
mambo-ctrl-gift-send	Button to submit the gift information	No
mambo-ctrl-error	Element for displaying server error messages	No
mambo-ctrl-success	Element for displaying thank you message after successful gifting	No

Template data

Variable	Description	Type
data	Object containing rewards sorted by type (achievements, levels, gifts, missions)	Object
user	Current user data object	Object
isLoading	Flag indicating whether rewards are still loading	Boolean

Implementation example

This example shows a gift template with user search, gift selection, and point gifting:

JavaScript

<script type="text/template" id="gift-template">
  <% _.forEach( data, function( item, idx ) { %>
      <div class="mambo-ctrl-gift">
          Search:<br>
          <input type="text" class="mambo-ctrl-gift-search"><br>
          <div class="mambo-ctrl-gift-results"></div>
          <div class="mambo-ctrl-gift-pic"></div>
          <div class="mambo-ctrl-gift-name"></div>
          Gift:<br>
          <div class="mambo-ctrl-sel-what"><a href="#">See points</a></div>
          <div class="mambo-ctrl-gift-flip">
              <div class="mambo-ctrl-show-gifts">
                  <select class="mambo-ctrl-gift-gifts">
                  <% if( data.gifts ) { %>
                      <% _.forEach( data.gifts.viewData, function( gft, idx ) { %>
                      <% rwd = Mambo.Util.getRewardObj( gft ); %>
                      <option value="<%= idx %>"><%= rwd.name %></option>
                      <% }); %>
                  <% } %>
                  </select><br>
                  <div class="mambo-ctrl-gift-badge"></div>
              </div>
              <div class="mambo-ctrl-show-pts">
                  <select class="mambo-ctrl-gift-pts">
                      <% _.forEach( user.points, function( pt, idx ) {
                          if( !pt.point ) return;
                          if( !pt.point.giftable ) return;
                      %>
                      <option value="<%= pt.pointId %>"><%= pt.point.name %></option>
                      <% }); %>
                  </select><br>
                  <input type="text" class="mambo-ctrl-gift-qnty"><br>
                  Balance: <strong class="mambo-ctrl-gift-balance"></strong><br>
              </div>
          </div>
          Why:<br>
          <textarea class="mambo-ctrl-gift-why"></textarea><br>
          <button class="mambo-ctrl-gift-send">Send</button><br>
          <div class="mambo-ctrl-error"></div>
          <div class="mambo-ctrl-success"></div>
      </div>
  <% }); %>
</script>

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

Customisation options

Consider these enhancements:

• Adding autocomplete for user search
• Creating visual previews for gift rewards
• Implementing form validation for required fields
• Adding confirmation steps before sending gifts
• Supporting custom messages with rich text formatting