# Member Center Templates

# How They Work

The member center is configured with the Vue.js JavaScript library. Pages are rendered using the templates that the framework creates.

# Template Variables

Template variables must be first defined in the script to be used in templates.

Please see below to identify all variables that are available in your template.

To render a variable in HTML just use syntax to render it.

To render a variable that contains HTML syntax use <p v-html="variableName"></p> to populate the value with rich text.

See Vue.js documentation (opens new window) for more detailed information.

# How to Write Conditional Tags

v-if="condition" and v-else for the else clause can be applied to HTML tags within the template.

The condition within the attribute must be a predefined component variable or a JavaScript expression.

Example:

  <div v-if="consId">
    The user is logged in.
  </div>
  <div v-else>
    The user is logged out.
  </div>

# List of Templates in PageBuilder

# Day Sponsorships

reus_account__day_sponsorships - HTML explaining what Day Sponsorships are and providing information on how to become a day sponsor. Contains timetables listing possible times when a day sponsor will be acknowledged on air. Includes links to online and mail-in day sponsorship sign-up forms. The content of this page appears in the "Day Sponsorships" tab of every member's member center.

For guidance on image dimensions for the images that appear on this page, see the images page.

# Giving Promo

reus_account__giving_promo - HTML for a promotional banner related to philanthropy. This is designed to be a full-width image hyperlinked to a page related to some VPM philanthropy program. The content of this reusable appears at the bottom of a member's "Giving History" page in their member center.

For guidance on image dimensions for the images that appear in this component, see the images page.

# Member Center

member_center - Code necessary for the member center to run. Custom JavaScript controls the content of the page. Users who are not logged in will see a login screen. Users who are logged in will start off seeing their personalized dashboard and will be able to navigate to member center subsections from there.

# Promo Boxes

reus_account__promo_boxes - HTML for three promo boxes letting members know about upcoming special events.

The header for this section appears in an h2 tag that should contain the following classes: <h2 class="app__subtitle c-page__title c-page__title--basic-page">. The promo boxes should appear in an umbrella div as follows: <div class="promo-box">.

Each promo box is heavily stylized to achive the desired custom layout. Sample code for an example promo box:

<div class="promo-box">
  <div class="promo-box__upper">
    <img class="promo-box__image" src="https://donate.vpm.org/images/content/pagebuilder/chioke-lanson.png" alt="The Art of the Interview" />
  </div>
  <div class="promo-box__lower">
    <div class="promo-box__content-inner">
      <div class="promo-box__date-outer">
        <span class="promo-box__date-inner">FEB 24</span>
      </div>
      <div class="promo-box__details">
        <div class="promo-box__type">
          WORKSHOP
        </div>
        <div class="promo-box__name">
          <a class="promo-box__name-link" href="https://vpm.org/events/skill-share-ii-the-art-of-the-interview-with-chioke-ianson-2021-02-24">Skill Share II: The Art of the Interview with Chioke l'Anson</a>
        </div>
        <div class="promo-box__time">
          4:00 pm to 5:30 pm
        </div>
      </div>
    </div>
  </div>
</div>

The content of this reusable appears at the bottom of the dashboard of every member's member center.

For guidance on image dimensions for the images that appear in this component, see the images page.

# Passport Tab Content for Passport Non-Qualifiers

reus_account__passport_non_member - HTML containing text, images, and links to display to people who do not qualify for Passport when they navigate to the Passport tab in the member center. At time of deployment, this contains a stylized bullet list (with empty circle markers rather than solid bullets). To retain this styling, make sure you include the relevant classes (circle-list for the list element and circle-list__item for the list item elements) in the list and list item elements used:

<ul class="circle-list">
  <li class="circle-list__item"><b><a href="https://www.pbs.org/passport/lookup" target="_blank">VPM Passport Lookup Tool</a></b> - You can check the status of your VPM Passport member benefit by using the Passport Lookup Tool above. Enter your contact email address and click the blue "Look up my account" button.</li>
  <li class="circle-list__item"><b>Who is eligible for VPM Passport?</b> VPM members who donate at least $60 a year or $5 ongoing-monthly gifts are eligible for VPM Passport.</li>
  <li class="circle-list__item"><b>What is VPM Passport?</b> VPM Passport is a member benefit that gives eligible supporters extended access to an on-demand, streaming library of select local programming from VPM in addition to over 1,500 episodes from PBS National.</li>
  <li class="circle-list__item"><b>Questions?</b> Please email <a href="mailto:membership@vpm.org">membership@vpm.org</a>.</li>
</ul>

# Passport Tab Content for Passport Qualifiers

reus_account__passport_member - HTML containing text, images, and links to display to people who do qualify for Passport when they navigate to the Passport tab in the member center. At time of deployment, this content is configured to display in two side-by-side container elements (logo on the left, text on the right) that stack vertically on mobile displays. To retain this styling, make sure you have a single outermost container element with the class passport-content__grid and two child elements in this container, each with the class passport-content__grid-cell. See the following for an example:

<div class="passport-content__grid">
  <div class="passport-content__grid-cell">
    <img class="passport-content__logo" src="https://donate.vpm.org/images/content/pagebuilder/passport-icon-200x200.png" alt="VPM Passport" />
  </div>
  <div class="passport-content__grid-cell">
    <h3 class="passport-content__header">You qualify for the VPM Passport member benefit!</h3>

    <p><b>VPM Passport</b> is an added member benefit that provides you with extended access to an on-demand library of quality public television programming. Featuring both PBS and select local programming, VPM Passport allows you to watch even more episodes of your favorite shows, including full seasons of many current and past series. <b>VPM Passport</b> is available on most popular streaming devices in the PBS Video app.</p>

    <p>Ready to get started? Click the link below and follow the prompts to sign in or activate your account.</p>

    <h3>
      <a class="passport-content__link" href="https://pbs.org/passport/videos">Go to VPM Passport</a>
    </h3>
  </div>
</div>

# Quarterly Update

reus_account__quarterly_update - HTML displaying an image, headline, and text explaining VPM's update to members for the current quarter.

The image is designed to be hyperlinked to an appropriate landing page. When the browser width is 768px wide or more, the image will appear to the left of the text. Below that, the image is stacked vertically above the text.

The headline for the section should appear in an h2 tag with the following classes applied: <h2 class="app__subtitle c-page__title c-page__title--basic-page">.

Header text within the description text (the text that appears next to or below the image) should appear in an h3 tag with the following class applied: <h3 class="quarterly-update__header">.

All other text should appear within generic <p> tags.

The content of this reusable appears on the dashboard of every member's member center.

For guidance on image dimensions for the images that appear in this component, see the images page.

← Premiums →