# Luminate Session Variables
- Global
- backgroundColor
- fullBackgroundImage
- hideSectionContainer
- showCenterColumn
- mainSiteDomain
- staticAssetsBaseUrl
- alertId
- dontaionId
- eventId
- storeId
- storeCategoryId
- storeCategoryTitle
- storeProductId
- teamraiserId
- metaTitle
- metaDescription
- metaImage
- donationFormTitle
- donationFormName
- donationUrl
- donationTipUpPercentage
- donationTipUpChecked
- Donation Forms
- Apple Pay (Deprecated)
- eCommerce: Session variables and meta tags
# Global
For all images ensure that image resides on the secure server and the path starts with https
# backgroundColor
- Background color options are
red,biscuit,biscuit-medium, andbiscuit-light; use if there is no background image and to override the default white.[[U0:backgroundColor=biscuit-light]] - Color Options are any class that's defined in background.scss, use if there is no background image and to override the default white.
- Set in the Donation Form within the uppermost HTML Caption
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client.
- Used in reus_wrpr_1561, the variable is added to the section class to create the background class that sets the background color properly
- Not limited to the donation pages, can be applied anywhere.
# fullBackgroundImage
- Used in reus_head_1561 to set the background image of the first main section
- If Setting a Background Image, Replace Image URL; Ensure URL is HTTPS
- Set in the Donation Form within the uppermost HTML Caption of the donation form
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client.
- Not limited to the donation pages, can be applied anywhere.
<!-- If Setting a Background Image, Replace Image URL; Ensure URL is HTTPS & ideally comes from cloudfront.net -->
[[U0:fullBackgroundImage=[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/bangladesh-tosmin-ch1224843-donation-form.jpg]]
Note use [[S80:staticAssetsBaseUrl]] instead of https://d290h2g0ajcvb3.cloudfront.net whenever possible to load the images from a secure cached path for optimal page performance.
- The image can span only half width of the page, as well, it can be set as follows.
<!-- An option to set a half-width image,
set |HALF-LEFT for image to align to the leftt
set |HALF-RIGHT for image to align to the right -->
[[U0:fullBackgroundImage=[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/empowerment-tile.jpg|HALF-LEFT]]
[[U0:fullBackgroundImage=[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/empowerment-tile.jpg|HALF-RIGHT]]
# hideSectionContainer
- Created for ease of conditionals in the wrapper code.
- By default set to
Fset toTto hide<div class="section__container>around the content body. - Defined in reus_wrpr_1561.
# showCenterColumn
- By default set to
Fset toTto display a 1/2 width center column<div class="column__row--2 column--center"><div class="column column--padded background--grey-light">around the content body.
# mainSiteDomain
- Based on the referrer the URL of the main site is set to either the URL of the dev site or www.savethechildren.org if referrer is not a dev site.
- This is done to enable STC to easily test dev sites in conjunction with Luminate.
- Defined in reus_wrpr_1561.
# staticAssetsBaseUrl
- Displays the full URL domain for the assets location on a CDN
- The value is different but is set correctly on a different environment
- Defined in reus_assets_path which is set in the wrapper
- When used in body of pages must be used after the reusables is executed, as content within pages is executed before the wrapper code
# alertId
- Value of the action alert id
- Get's set once and stored in a session
- Gets reset when a new alert is visited
- Defined in reus_body_class
# dontaionId
- Value of the donation form id
- Get's set once and stored in a session
- Gets reset when a new donation page is visited
- Defined in reus_body_class
# eventId
- Value of the event id
- Get's set once and stored in a session
- Gets reset when a new event page is visited
- Defined in reus_body_class
# storeId
- Value of the eCommerce store id
- Get's set once and stored in a session
- Gets reset when a new page with
store_idparameter is visited. - Defined in reus_body_class
- Used in reus_body_class to set value as a
<body data-store-id="">attribute.
# storeCategoryId
- Value of the eCommerce store's folder id
- Get's set once and stored in a session
- Gets reset when a new page with
FOLDERparameter is visited. - Defined in reus_body_class.
- Used in reus_body_class to set value as a
<body data-store-category-id="">attribute.
# storeCategoryTitle
- Name of the eCommerce category
- Get's set once and stored in a session
- Gets reset when a new page with
FOLDERparameter is visited. - Defined in reus_head_1561.
- Used in reus_body_class to set value as a
<body data-store-category-name="">attribute.
# storeProductId
- Value of the eCommerce product id
- Get's set once and stored in a session
- Gets reset when a new page with
product_idparameter is visited. - Defined in reus_body_class.
# teamraiserId
- Value of the Teamraiser id
- Get's set once and stored in a session
- Gets reset when a new page with
fr_idorFR_IDparameter is visited. - Defined in reus_body_class.
# metaTitle
- Meta title that appears in
<title>tag and in social media tags - Gets reset to no value after use to prevent the wrong titles from appearing.
- Defined in reus_head_1561.
# metaDescription
- Meta description that appears in social media tags
- Gets reset to no value after use.
- Defined in reus_head_1561.
- Default meta description is set in pagebuilder reusable page reus_meta__description, gets reset to no value after use.
# metaImage
- Meta description that appears in social media tags
- Gets reset to no value after use. Defined in reus_head_1561.
- Default meta images is set in pagebuilder reusable page reus_meta__image.
[[U0:metaImage=https://support.savethechildren.org/images/content/pagebuilder/bangladesh-tosmin-ch1224843-donation-form.jpg]]
# donationFormTitle
- Title of the last visited donation form.
- Defined in reus_head_1561.
- Used in donation confirmation emails, reus_email_tax_receipt, and reus_donation_confirmation__left_column as well as in reus_head_1561
# donationFormName
- Private of the last visited donation form.
- Used on the donation standard & custom thank you pages
- Defined in reus_head_1561.
# donationUrl
- Donation URL that gets set for use with the Social Links on the Thank You page
- Set in the reus_head_1561
- Used in reus_donation_confirmation__social_share to send the donation for URL through for social sharing
# donationTipUpPercentage
- The number of percent the donation should be increased when the tip-up checkbox is checked
- Used on the donaton forms
- Global value is is set in
reus_donation__tip_up.
# donationTipUpChecked
- Should the tip-up checkbox be prechecked?
- Set the value to
trueas following before the inclusion of thereus_donation__tip_up. Example:
[[U0:donationTipUpChecked=true]]
[[U0:donationTipUpPercentage=2.2]]
[[S51:reus_donation__tip_up]]
- Used in
reus_donation__tip_up.
# Donation Forms
# donationFormDesign
- Sets a custom design, the only valid option is
teal. [[U0:donationFormDesign=teal]]
# donorEmployer
- Set in the donation page & on the donation thank you page.
- If the donation page had Donor Employer field, it will be prepopulated and hidden automatically
- The value must be set on the thank you page for analytics
# donationFormAlignment
- Alignment Options are left or right; Alignment refers to positioning of Form Field Container
[[U0:donationFormAlignment=right]] - Set in the Donation Form within the uppermost HTML Caption of the donation form & as the very first line of code on the donation thank you page
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client
- Used in reus_body_class to set class donation-form-right when the variable is set to right
# donationFormStyle
- Style Options are
two-columns,one-column-wide, andone-column; if two columns, refer to alignment note[[U0:donationFormStyle=two-column]] - Set in the Donation Form within the uppermost HTML Caption of the donation form
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client
- Used in reus_body_class, sets body class donation-form-two-columns if variable is set to two-columns
# headerTab
- Set true to make the heading attach to the text block with a tab look, false to have it separate.
[[U0:headerTab=true]] - Set in the Donation Form within the uppermost HTML Caption
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client
- Used in reus_body_class, sets body class donation-form-header-tab if variable is set to true
# paymentType
- Adds an ability to include third party payment types, the only option right now is braintree. The value must be exact.
- Set in the
reus_donation_caption_XXXXwhereXXXXis the id of the donation form or in a donation form caption - Example
[[U0:paymentType=braintree]] - Used in
reus_wrpr_1561to set the additional HTML content & in scriptsreus_scripts_1561
# recurringChecked
- Gift type default state is controlled by variable
recurringChecked; if it is settruethen recurring option will be selected on page load on donation forms with recurring gift option; if it is set tononethen no gift type will be selected and users will be forced to select gift type before submitting the form
[[U0:recurringChecked=true]]
[[U0:recurringChecked=none]] - Recurring checked - if true then the box is auto-checked
- Set in the Donation Form within the uppermost HTML Caption
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client
- Used in reus_body_class, sets body class donation-form-recurring-checked if variable is set to true
# recurringOnly
- Recurring Options are false or true; use true when the form is RECURRING ONLY. Displays paragraph beneath submit button
- Set in the Donation Form within the uppermost HTML Caption
- For the donation thank you page the value is set in reus_donation_confirmation_copy, all values are global as all thank you pages have the same look and feel, edit only when global changes are requested by the client
- Used in reus_body_class, sets body class donation-form-recurring if variable is set to true
# Apple Pay (Deprecated)
# allowRecurring
- Used in reus_donation__caption_####
- If this is set to true, then the apple pay form will display a link back to native form for monthly donations.
# donationFormAlignment
- Alignment Options are left or right; Alignment refers to positioning of Form Field Container
- Used in reus_donation__caption_####
# donationFormStyle
- Style Options are one-columns or two-columns; if two columns, refer to alignment note
- Used in reus_donation__caption_####
# donationFormTitle
- Used in reus_donation__caption_####
# donationUrl
- Donation URL that gets set for use with the Social Links on the Thank You page
- Used in reus_donation__caption_####
# headerTab
- Set true to make the heading attach to the text block with a tab look, false to have it separate.
- Used in reus_donation__caption_####
# recurringChecked
- Recurring checked - if true then the box is auto-checked
- Used in reus_donation__caption_####
# recurringOnly
- Recurring Options are false or true; use true when the form is RECURRING ONLY. Displays paragraph beneath submit button
- Used in reus_donation__caption_####
# eCommerce: Session variables and meta tags
eCommerce session works differently than the normal session, cart tends to time out quickly and all session variables are reset somewhere in the middle. Each eCommerce page needs to reset session variables storeId, storeCategoryId to ensure that conditional elements are rendered properly.
Store title can only be set within the store itself. We extract it in eCommerce with [[S120:cart:name]] tag and set it via [[U5:title]] tag, which makes it available for use in <head> via [[A7]] tag. We store the value in [[S80:storeTitle]]. The store title is set on eCommerce home, catalog and product pages.
Category title cannot be set or extracted within the store itself, so the <title> tag will still render store title, however social media titles will have the category name in their meta tags. Because it can only be reset in the product. However, we can pull up the category name in <head> via [[A14]] tag with some manipulation. The value is stored in [[S80:storeCategoryTitle]] variable and gets reset only when a category page is visited.
Product name cannot be pulled up, we can only pull up the product external id. So on all product pages we display store title.
Store Id, Category Id and Product exteernal id are also set as <body> data attributes: data-store-id, data-store-category-id, data-store-product-ext-id.