Documentation

# Sponsorship Acquisition

# Overview

Rendered script /js/stc-sponsorship.js initializes a Vue.js application which is responsible for all sponsorship acquisition logic of the site, including that which fetches sponsor children from ODS, displays sponsor children and allows sponsorships to be added to the sponsor's basket. This script is compiled from several global assets (/src/js/lib), combo-cart assets (/src/js/combo-cart) and all sponsorship assets (/src/js/sponsorship). See compilation script /gulp-tasks/sponsorship-scripts.js for details.

This resource is scoped to the sponsorship acquisition page (https://[[S29:SECURE_DOMAIN]][[S29:SECURE_PATH]]SPageNavigator/sponsorship.html).

# Luminate ODS Interactions

  • ODS gives Luminate code a list of available children (we believe locked children are excluded here)
  • Available children are rendered on a sponsorship pages
  • When user adds a child to cart, code contacts ODS and requests that a temporary lock is placed on a child
  • There is no interaction between Luminate and ODS on the cart page, the code assumes we have a valid child and doesn't check for anything in ODS, so what was placed into cart remains in the cart
  • There is no interaction between Luminate and ODS on the billing page load, again the code assumes we have a valid child, as only those are allowed to be added
  • On checkout, the ODS is called and a permanent lock is placed on the child profile, again the status is not checked

Note ODS is the one that decides whether the lock on lifeline children is retained

# Globals

  • sponsorshipSetup() - Bootstraps sponsorship app. Called on Window load.

# Key Functionality

# Add Sponsorship To Cart Mixin

src\js\sponsorship\mixins\add-sponsorship-to-cart.js

Exposes functionality for adding a sponsorship to the user's basket. Enforces 10 sponsorships per-basket limit.

src/js/sponsorship/components/featured-sponsor-children.js

Displays array of three featured sponsor children. Each position utilizes its own set of logical conditions, with optional fallbacks, to define the qualifications for that position. As of this writing, the conditions for each featured position are as follows:

  • Position 1
    • Female with birthday between today and one week from today.
    • Any female
  • Position 2
    • Male with daysWaiting > 300
    • Any Male
  • Position 3
    • Female from Featured Country (as defined in childIconDesc global)
    • Female with daysWaiting > 300
    • Any Female

src/js/sponsorship/components/sponsor-children-with-quotes.js

Displays sponsor children from localstorage. If the current page is not a search page then the featured-sponsor-children component is displayed before other results. Provides "show more" pagination functionality.

# Sponsorship Children Vue Component

src/js/sponsorship/components/sponsorship-children.js

Encompasses all sponsorship acquisition landing page functionality. Fetches sponsor children from ODS and sponsor child quotes from the Luminate Quote API then stashes both to local storage. Displays formatted sponsorship array via the sponsor-children-with-quotes component.

# Sponsorship Child Component

src/js/sponsorship/components/sponsorship-child.js

Displays individual child's profile page.

# Sponsorship Matrix Class

src/js/sponsorship/library/sponsorship-matrix.js

Javascript class which accepts an array of sponsor children and orders them per the logic described in the objects schema property. This class allows the Children component to display sponsor children in the desired order (ie. female, female, male, female, male, female, etc...).

# Sponsorship Search Filter Component

src/js/sponsorship/components/sponsorship-search-filter.js

Provides sponsor child search functionality via form at the top of the sponsorship acquisition page.

# Code Structure

  • /src/js/sponsorship/components/*.js - Vue components.
  • /src/js/sponsorship/directives/*.js - Vue directives.
  • /src/js/sponsorship/library/*.js - Misc libraries.
  • /src/js/sponsorship/mixins/*.js - Vue mixins.

← Supporters/Users →