Coupons template

Description

The coupons template displays a user's awarded coupons in the Profile Widget. This template renders containers for available, buyable, redeemed, and expired coupons, but not the actual coupon content (for coupon rendering, see the coupon template section).

Control classes

Class	Description	Required
mambo-ctrl-btn-available	Makes the mambo-ctrl-available element visible when clicked	No
mambo-ctrl-btn-buy	Makes the mambo-ctrl-buyable element visible when clicked	No
mambo-ctrl-btn-used	Makes the mambo-ctrl-used element visible when clicked	No
mambo-ctrl-btn-expired	Makes the mambo-ctrl-expired element visible when clicked	No
mambo-ctrl-selected	Applied to the currently selected mambo-ctrl-btn-* element	No
mambo-ctrl-available	Container where available coupons are injected	Yes
mambo-ctrl-buyable	Container where buyable coupons are injected	Yes
mambo-ctrl-used	Container where used coupons are injected	Yes
mambo-ctrl-expired	Container where expired coupons are injected	Yes
mambo-ctrl-scroll	Enables scrolling for coupon containers. Must be nested within the container elements and have an explicit height set	No

Template data

Variable	Description	Type
isLoading	Flag indicating whether user coupons are still loading	Boolean
available	Array of coupons awarded to the user that are still available for use	Array
buyable	Array of coupons that the user may exchange points for	Array
redeemed	Array of coupons awarded to the user that have been redeemed	Array
expired	Array of coupons awarded to the user that have expired	Array

Implementation example

This example shows a basic coupons template with tabs for different coupon states:

JavaScript

<style type="text/css">
  .scroll {
      height: 280px;
      width: 600px;
  }
</style>

<script type="text/template" id="coupons-template">
  <% if( isLoading ) { %>
      <div>Loading!</div>
  <% } else { %>
      <div class="mambo-ctrl-btn-available">Available: <%= available.length %></div>
      <div class="mambo-ctrl-btn-buy">Buyable: <%= buyable.length %></div>
      <div class="mambo-ctrl-btn-used">Redeemed: <%= redeemed.length %></div>
      <div class="mambo-ctrl-btn-expired">Expired: <%= expired.length %></div>
      <div class="mambo-ctrl-available">
          <div class="mambo-ctrl-scroll scroll"></div>
      </div>
      <div class="mambo-ctrl-buyable">
          <div class="mambo-ctrl-scroll scroll"></div>
      </div>
      <div class="mambo-ctrl-used">
          <div class="mambo-ctrl-scroll scroll"></div>
      </div>
      <div class="mambo-ctrl-expired">
          <div class="mambo-ctrl-scroll scroll"></div>
      </div>
  <% } %>
</script>

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

Customisation options

Consider these enhancements:

• Adding tab styling for better visual indication of selected coupon type
• Implementing search or filter functionality for large coupon collections
• Adding coupon sorting options (by date, value, etc.)
• Creating animations for tab transitions