Donation Display¶
The donationDisplay extension shows recent donations, with each donor's message of support, on any page. On a
fundraiser or donation product it can show just that product's donations: a wall of supporters beside the
"Donate" form.
Donors can leave an optional message (up to 200 characters) when they give. It is saved with the donation and shown here; the basket shows it too.
What is shown¶
Each entry shows the donor's name (or "Anonymous"), the amount, a Gift Aid note where the donor made a declaration, the message, and the date.
- A donor who chose to hide their name appears as Anonymous; one who chose to hide the amount appears without an amount.
- A donation where the donor hid both is never listed.
- "for {product}" is only shown when the list isn't already filtered to a single product.
Settings¶
| Setting | Meaning |
|---|---|
title |
Heading above the list (default "Recent Donations") |
useCurrentProduct |
On a product page, show only that product's donations (the fundraiser's own supporters). Takes priority over specificSku |
specificSku |
Show one product's donations on any page. Empty means donations across all products |
maxDonations |
How many donations to fetch, most recent first (default 10) |
showMessages |
Show messages of support (default on) |
showAnonymous |
Include donations where the donor hid their name (default on) |
layoutStyle |
cards (each donation in a bordered card) or wall (avatar list with the donor's initial) |
displayMode |
static (a plain list), or scrolling / rotating (the carousel below; in the Nova and Bootstrap templates the two behave the same) |
visibleCount |
Donations per page in scrolling or rotating mode (default 3; two on phones) |
showCard |
Wrap the list in a card |
Scrolling mode¶
Scrolling (and rotating) mode is a paged carousel. Each page fades in and out in place, and the box is always as tall as its tallest page, so the page below never jumps and nothing is cut off.
- Controls: pause/resume, previous and next buttons, a "1 / 3" counter, and the left and right arrow keys. A thin bar under the list shows the time to the next page.
- Autoplay pauses while the pointer is over it, while it has keyboard focus, in a background tab, and while it is scrolled out of view.
- Reduced motion: visitors who ask their device for reduced motion get no animation and start paused.
- Accessibility: off-screen pages are removed from keyboard and screen-reader access, and changes are only announced when the visitor, not the timer, moves the carousel.
- Without JavaScript the list is a plain static list.
Implementation¶
| Extension | DonationDisplayExtension (commerce-core/.../extensions/social/) |
| Templates | templates/{bootstrap,nova}/extensions/donationDisplay/list.html: identical, theme-agnostic markup |
| Styles / script | themes/shared/css/extensions/donationDisplay/donation-display.css and themes/shared/js/extensions/donationDisplay/donation-display.js (the script only loads in scrolling or rotating mode) |
Colours come from the Nova design tokens, then Bootstrap's, then a fallback, so the list follows each theme's palette. Keep the two template copies identical.
The Hedgerow demo site shows it on every fundraiser page: the thirdPartyFundraiser
stereotype includes it in mainSection with useCurrentProduct, the wall layout and scrolling mode.
The Ridge theme has its own template for this extension and its own rotating ticker (nova/js/donation-ticker.js); it doesn't use the carousel above.