Gift template

Description

The gift template renders the static shell of the Gift Widget: column 1 ("To Who") with the user search and recipient display, and column 3 ("Why") with the reason textarea and send button. It contains an empty placeholder element (mambo-ctrl-gift-what) into which the dynamic "For What" column is injected once rewards data has loaded from the server. The dynamic column is rendered by its own sub-template — see the Gift What template page.

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-what	Placeholder element into which the Gift What sub-template is injected when rewards data loads. Must be present in the shell for column 2 to appear	Yes
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
title	The widget title. Either the value of the title render option or the default from the language model	String
prize	Optional prize message displayed below the title. Set via the prize render option. Null when not configured	String | null

Note: data, user, withPoints, withGifts, and isLoading are not available in this template. They are passed to the Gift What sub-template instead — see Gift What template.

Implementation example

This example shows a gift shell template with user search in column 1, a placeholder for the dynamically injected "For What" column, and the reason textarea and send button in column 3. To customise the gifts and points UI in column 2, override the Mambo.Template.giftWhat template separately.

JavaScript

<script type="text/template" id="gift-template">
  <div class="mambo-ctrl-gift">
      <div class="mambo-ctrl-error"></div>
      <div class="mambo-ctrl-success">Thank you!</div>

      <!-- Column 1: To Who -->
      <div>
          <input type="text" class="mambo-ctrl-gift-search" placeholder="Search..."><br>
          <div class="mambo-ctrl-gift-results"></div>
          <div class="mambo-ctrl-gift-pic"></div>
          <div class="mambo-ctrl-gift-name"></div>
      </div>

      <!-- Column 2: For What — injected by the gift-what sub-template -->
      <div class="mambo-ctrl-gift-what"></div>

      <!-- Column 3: Why -->
      <div>
          <textarea class="mambo-ctrl-gift-why"></textarea><br>
          <button class="mambo-ctrl-gift-send">Send</button>
      </div>
  </div>
</script>

<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the shell template
      Mambo.updateTemplate( Mambo.Template.gift, Mambo('#gift-template').html() );
      // To customise column 2 (gifts and points), also override:
      // Mambo.updateTemplate( Mambo.Template.giftWhat, Mambo('#gift-what-template').html() );
  });
</script>

Customisation options

Consider these enhancements:

• Adding autocomplete or typeahead behaviour for the user search field
• Implementing client-side form validation for the search and reason fields
• Adding confirmation steps before sending gifts
• Supporting custom messages with rich text formatting in the reason textarea
• Overriding the Gift What sub-template independently via Mambo.Template.giftWhat to customise how rewards and points are presented without touching the shell layout