';
+
+ // Title
+ if (card.title) {
+ html += `
${card.title}
`;
+ }
+
+ // Subtext
+ if (card.subtextHtml) {
+ html += `
${card.subtextHtml}
`;
+ } else if (card.subtext) {
+ html += `
${card.subtext}
`;
+ }
+
+ // Tags
+ if (config.showTags && card.tags && card.tags.length > 0) {
+ html += '
';
+ card.tags.forEach((tag) => {
+ html += `${tag}`;
+ });
+ html += '
';
+ }
+
+ // CTA Button
+ const ctaLabel = card.ctaText || config.ctaButtonLabel || 'Learn More';
+ const ctaVariant = getCtaVariant(config);
+ if (card.ctaLink) {
+ html += `
${ctaLabel}
`;
+ } else {
+ html += `
${ctaLabel}
`;
+ }
+
+ html += '
Try adjusting your search criteria.
+ `;
+ container.appendChild(noResults);
+ return;
+ }
+
+ cards.forEach((card) => {
+ container.appendChild(createFragmentCard(card, config));
+ });
+}
+
+function filterCards(cards, filters) {
+ return cards.filter((card) => {
+ // Full-text search
+ if (filters.textSearch && filters.textSearch.length >= 2) {
+ const query = filters.textSearch.toLowerCase();
+ const searchable = [
+ card.title,
+ card.subtext,
+ ...(card.tags || []),
+ ].join(' ').toLowerCase();
+ if (!searchable.includes(query)) return false;
+ }
+
+ // Tag filter
+ if (filters.tag && filters.tag !== '') {
+ const hasTag = (card.tags || []).some(
+ (t) => t.toLowerCase() === filters.tag.toLowerCase(),
+ );
+ if (!hasTag) return false;
+ }
+
+ return true;
+ });
+}
+
+function createFilterPanel(config, cards) {
+ const panel = createElement('div', 'fragment-list-filters');
+ const row = createElement('div', 'filter-row');
+
+ // Text search
+ if (config.enableTextSearch) {
+ const group = createElement('div', 'filter-group');
+ const label = createElement('label', '', 'Search');
+ const input = createElement('input');
+ input.type = 'text';
+ input.className = 'text-search-input';
+ input.placeholder = config.searchPlaceholder || 'Search...';
+ group.appendChild(label);
+ group.appendChild(input);
+ row.appendChild(group);
+ }
+
+ // Tag filter
+ if (config.enableTagFilter) {
+ const group = createElement('div', 'filter-group');
+ const label = createElement('label', '', 'Filter by Tag');
+ const select = createElement('select', 'tag-filter-select');
+
+ const defaultOpt = createElement('option');
+ defaultOpt.value = '';
+ defaultOpt.textContent = 'All Tags';
+ select.appendChild(defaultOpt);
+
+ const uniqueTags = getUniqueTags(cards);
+ uniqueTags.forEach((tag) => {
+ const opt = createElement('option');
+ opt.value = tag.toLowerCase();
+ opt.textContent = tag;
+ select.appendChild(opt);
+ });
+
+ group.appendChild(label);
+ group.appendChild(select);
+ row.appendChild(group);
+ }
+
+ panel.appendChild(row);
+ return panel;
+}
+
+// --- Carousel Navigation ---
+function addCarouselNav(block, resultsContainer) {
+ const nav = createElement('div', 'carousel-nav');
+ const prevBtn = createElement('button', 'carousel-nav-btn', '←');
+ prevBtn.setAttribute('aria-label', 'Previous');
+ prevBtn.type = 'button';
+ const nextBtn = createElement('button', 'carousel-nav-btn', '→');
+ nextBtn.setAttribute('aria-label', 'Next');
+ nextBtn.type = 'button';
+
+ prevBtn.addEventListener('click', () => {
+ resultsContainer.scrollBy({ left: -320, behavior: 'smooth' });
+ });
+ nextBtn.addEventListener('click', () => {
+ resultsContainer.scrollBy({ left: 320, behavior: 'smooth' });
+ });
+
+ nav.appendChild(prevBtn);
+ nav.appendChild(nextBtn);
+ block.appendChild(nav);
+}
+
+// --- Main Decorate Function ---
+export default async function decorate(block) {
+ // Parse config from block key-value structure
+ let title = '';
+ let subtitle = '';
+ let layout = 'grid';
+ let dataSourceType = 'content-fragments';
+ let contentFragmentFolder = '';
+ let modelName = '';
+ let apiUrl = '';
+ let enableFilters = false;
+ let enableTextSearch = true;
+ let enableTagFilter = true;
+ let searchPlaceholder = 'Search...';
+ let showTags = false;
+ let ctaButtonLabel = '';
+ let ctaStyle = '';
+ let noResultsMessage = '';
+ let customClass = '';
+
+ const rows = Array.from(block.querySelectorAll(':scope > div'));
+ rows.forEach((row) => {
+ const cells = row.querySelectorAll(':scope > div');
+ if (cells.length < 2) return;
+
+ const key = cells[0].textContent?.trim()?.toLowerCase();
+ const valueCell = cells[1];
+ const link = valueCell.querySelector('a');
+ const value = (link?.getAttribute('title') || link?.textContent || valueCell.textContent || '').trim();
+
+ if (!key || !value) return;
+
+ switch (key) {
+ case 'title': title = value; break;
+ case 'subtitle': subtitle = value; break;
+ case 'layout':
+ case 'layout style': layout = value; break;
+ case 'data source type':
+ case 'datasourcetype': dataSourceType = value; break;
+ case 'content fragment folder':
+ case 'contentfragmentfolder': contentFragmentFolder = value; break;
+ case 'content fragment model name':
+ case 'modelname': modelName = value; break;
+ case 'api url':
+ case 'apiurl': apiUrl = value; break;
+ case 'enable filters':
+ case 'enablefilters': enableFilters = value === 'true'; break;
+ case 'enable text search':
+ case 'enabletextsearch': enableTextSearch = value !== 'false'; break;
+ case 'enable tag filter':
+ case 'enabletagfilter': enableTagFilter = value !== 'false'; break;
+ case 'search placeholder':
+ case 'searchplaceholder': searchPlaceholder = value; break;
+ case 'show tags':
+ case 'showtags': showTags = value === 'true'; break;
+ case 'cta button label':
+ case 'ctabuttonlabel': ctaButtonLabel = value; break;
+ case 'cta style':
+ case 'ctastyle': ctaStyle = value; break;
+ case 'no results message':
+ case 'noresultsmessage': noResultsMessage = value; break;
+ case 'custom class':
+ case 'custom-class': customClass = value; break;
+ default: break;
+ }
+ });
+
+ // Hide config rows
+ Array.from(block.children).forEach((row) => { row.style.display = 'none'; });
+
+ // Apply classes
+ block.classList.add('fragment-list');
+ if (layout) block.classList.add(layout);
+ if (customClass) {
+ customClass.split(/\s+/).filter(Boolean).forEach((cls) => block.classList.add(cls));
+ }
+
+ // Build config object
+ const config = {
+ title,
+ subtitle,
+ layout,
+ dataSourceType,
+ contentFragmentFolder,
+ modelName,
+ apiUrl,
+ enableFilters,
+ enableTextSearch,
+ enableTagFilter,
+ searchPlaceholder,
+ showTags,
+ ctaButtonLabel,
+ ctaStyle,
+ noResultsMessage,
+ };
+
+ // --- Build UI ---
+ // Header
+ const header = createElement('div', 'fragment-list-header');
+ header.innerHTML = `
+ Loading...
';
+ block.appendChild(resultsContainer);
+
+ // Fetch data
+ let cards = await fetchFragmentData(config);
+
+ // Filter out disabled items
+ cards = cards.filter((card) => card.enabled !== false);
+
+ // Filter panel (if enabled)
+ if (enableFilters && (enableTextSearch || enableTagFilter)) {
+ const filterPanel = createFilterPanel(config, cards);
+ block.insertBefore(filterPanel, resultsContainer);
+
+ // Wire up filter listeners
+ const filters = { textSearch: '', tag: '' };
+ const performFilter = debounce(() => {
+ const filtered = filterCards(cards, filters);
+ renderResults(filtered, resultsContainer, config);
+ }, 300);
+
+ const textInput = block.querySelector('.text-search-input');
+ if (textInput) {
+ textInput.addEventListener('input', (e) => {
+ filters.textSearch = e.target.value;
+ performFilter();
+ });
+ }
+
+ const tagSelect = block.querySelector('.tag-filter-select');
+ if (tagSelect) {
+ tagSelect.addEventListener('change', (e) => {
+ filters.tag = e.target.value;
+ performFilter();
+ });
+ }
+ }
+
+ // Render cards
+ renderResults(cards, resultsContainer, config);
+
+ // Add carousel navigation if layout is carousel
+ if (layout === 'carousel') {
+ addCarouselNav(block, resultsContainer);
+ }
+
+ // Universal Editor auto-reload support
+ const blockResource = block.getAttribute('data-aue-resource');
+ if (blockResource) {
+ const handleUEEvent = (event) => {
+ const eventResource = event.detail?.request?.target?.resource;
+ if (eventResource === blockResource) {
+ setTimeout(() => window.location.reload(), 1000);
+ }
+ };
+ if (!block._ueListenerAdded) {
+ document.querySelector('main')?.addEventListener('aue:content-patch', handleUEEvent);
+ document.querySelector('main')?.addEventListener('aue:content-update', handleUEEvent);
+ block._ueListenerAdded = true;
+ }
+ }
+}
\ No newline at end of file
diff --git a/component-definition.json b/component-definition.json
index 8f4edd3..6fccd28 100644
--- a/component-definition.json
+++ b/component-definition.json
@@ -962,6 +962,22 @@
}
}
},
+ {
+ "title": "Fragment List",
+ "id": "fragment-list",
+ "plugins": {
+ "xwalk": {
+ "page": {
+ "resourceType": "core/franklin/components/block/v1/block",
+ "template": {
+ "name": "Fragment List",
+ "model": "fragment-list",
+ "key-value": true
+ }
+ }
+ }
+ }
+ },
{
"...": "../blocks/*/_*.json#/definitions"
}
diff --git a/component-filters.json b/component-filters.json
index e877ffa..13802ba 100644
--- a/component-filters.json
+++ b/component-filters.json
@@ -35,7 +35,8 @@
"form",
"forex",
"embed-adaptive-form",
- "find-a-doctor"
+ "find-a-doctor",
+ "fragment-list"
]
},
{
diff --git a/component-models.json b/component-models.json
index 724eb16..151f42b 100644
--- a/component-models.json
+++ b/component-models.json
@@ -7078,5 +7078,160 @@
"condition": { "==": [{ "var": "enableSubmitAction" }, true] }
}
]
+ },
+ {
+ "id": "fragment-list",
+ "fields": [
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "title",
+ "label": "Title",
+ "value": ""
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "subtitle",
+ "label": "Subtitle",
+ "value": ""
+ },
+ {
+ "component": "select",
+ "name": "layout",
+ "label": "Layout Style",
+ "valueType": "string",
+ "value": "grid",
+ "options": [
+ { "name": "Grid", "value": "grid" },
+ { "name": "List", "value": "list" },
+ { "name": "Compact", "value": "compact" },
+ { "name": "Masonry", "value": "masonry" },
+ { "name": "Carousel", "value": "carousel" },
+ { "name": "Articles", "value": "articles" }
+ ]
+ },
+ {
+ "component": "select",
+ "name": "dataSourceType",
+ "label": "Data Source Type",
+ "valueType": "string",
+ "value": "content-fragments",
+ "options": [
+ { "name": "Content Fragments", "value": "content-fragments" },
+ { "name": "External API", "value": "api" }
+ ]
+ },
+ {
+ "component": "aem-content",
+ "name": "contentFragmentFolder",
+ "label": "Content Fragment Folder",
+ "description": "Select folder containing Content Fragments",
+ "valueType": "string",
+ "validation": { "rootPath": "/content/dam" },
+ "condition": { "==": [{ "var": "dataSourceType" }, "content-fragments"] }
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "modelName",
+ "label": "Content Fragment Model Name",
+ "description": "Target CF model name to filter by (e.g. content-card)",
+ "condition": { "==": [{ "var": "dataSourceType" }, "content-fragments"] }
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "apiUrl",
+ "label": "API URL",
+ "description": "External API endpoint for data",
+ "condition": { "==": [{ "var": "dataSourceType" }, "api"] }
+ },
+ {
+ "component": "boolean",
+ "name": "enableFilters",
+ "label": "Enable Filters",
+ "description": "Show the search and filter panel",
+ "value": false,
+ "valueType": "boolean"
+ },
+ {
+ "component": "boolean",
+ "name": "enableTextSearch",
+ "label": "Enable Text Search",
+ "description": "Show full-text search input",
+ "value": true,
+ "valueType": "boolean",
+ "condition": { "==": [{ "var": "enableFilters" }, true] }
+ },
+ {
+ "component": "boolean",
+ "name": "enableTagFilter",
+ "label": "Enable Tag Filter",
+ "description": "Show tag-based filter dropdown",
+ "value": true,
+ "valueType": "boolean",
+ "condition": { "==": [{ "var": "enableFilters" }, true] }
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "searchPlaceholder",
+ "label": "Search Placeholder",
+ "value": "Search...",
+ "description": "Placeholder text for the search input",
+ "condition": { "==": [{ "var": "enableFilters" }, true] }
+ },
+ {
+ "component": "boolean",
+ "name": "showTags",
+ "label": "Show Tags",
+ "description": "Show content fragment tags on each card",
+ "value": false,
+ "valueType": "boolean",
+ "condition": { "==": [{ "var": "dataSourceType" }, "content-fragments"] }
+ },
+ {
+ "component": "select",
+ "name": "ctastyle",
+ "label": "CTA Style",
+ "valueType": "string",
+ "value": "button",
+ "options": [
+ {
+ "name": "Primary Button",
+ "value": "button"
+ },
+ {
+ "name": "Secondary Button",
+ "value": "button-secondary"
+ },
+ {
+ "name": "Dark Button",
+ "value": "button-dark"
+ },
+ {
+ "name": "Link",
+ "value": "link"
+ }
+ ]
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "noResultsMessage",
+ "label": "No Results Message",
+ "value": "No items found",
+ "description": "Message displayed when no content fragments match"
+ },
+ {
+ "component": "text",
+ "name": "custom-class",
+ "label": "Custom class",
+ "value": "",
+ "valueType": "string",
+ "description": "Space-separated class names to add to the block"
+ }
+ ]
}
]
diff --git a/models/_component-filters.json b/models/_component-filters.json
index 7e23a69..f05f931 100644
--- a/models/_component-filters.json
+++ b/models/_component-filters.json
@@ -35,7 +35,8 @@
"text",
"title",
"title-block",
- "video"
+ "video",
+ "fragment-list"
]
},
{
diff --git a/models/_component-models.json b/models/_component-models.json
index 31459e8..27efbb5 100644
--- a/models/_component-models.json
+++ b/models/_component-models.json
@@ -266,6 +266,161 @@
}
]
},
+ {
+ "id": "fragment-list",
+ "fields": [
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "title",
+ "label": "Title",
+ "value": ""
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "subtitle",
+ "label": "Subtitle",
+ "value": ""
+ },
+ {
+ "component": "select",
+ "name": "layout",
+ "label": "Layout Style",
+ "valueType": "string",
+ "value": "grid",
+ "options": [
+ { "name": "Grid", "value": "grid" },
+ { "name": "List", "value": "list" },
+ { "name": "Compact", "value": "compact" },
+ { "name": "Masonry", "value": "masonry" },
+ { "name": "Carousel", "value": "carousel" },
+ { "name": "Articles", "value": "articles" }
+ ]
+ },
+ {
+ "component": "select",
+ "name": "dataSourceType",
+ "label": "Data Source Type",
+ "valueType": "string",
+ "value": "content-fragments",
+ "options": [
+ { "name": "Content Fragments", "value": "content-fragments" },
+ { "name": "External API", "value": "api" }
+ ]
+ },
+ {
+ "component": "aem-content",
+ "name": "contentFragmentFolder",
+ "label": "Content Fragment Folder",
+ "description": "Select folder containing Content Fragments",
+ "valueType": "string",
+ "validation": { "rootPath": "/content/dam" },
+ "condition": { "==": [{ "var": "dataSourceType" }, "content-fragments"] }
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "modelName",
+ "label": "Content Fragment Model Name",
+ "description": "Target CF model name to filter by (e.g. content-card)",
+ "condition": { "==": [{ "var": "dataSourceType" }, "content-fragments"] }
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "apiUrl",
+ "label": "API URL",
+ "description": "External API endpoint for data",
+ "condition": { "==": [{ "var": "dataSourceType" }, "api"] }
+ },
+ {
+ "component": "boolean",
+ "name": "enableFilters",
+ "label": "Enable Filters",
+ "description": "Show the search and filter panel",
+ "value": false,
+ "valueType": "boolean"
+ },
+ {
+ "component": "boolean",
+ "name": "enableTextSearch",
+ "label": "Enable Text Search",
+ "description": "Show full-text search input",
+ "value": true,
+ "valueType": "boolean",
+ "condition": { "==": [{ "var": "enableFilters" }, true] }
+ },
+ {
+ "component": "boolean",
+ "name": "enableTagFilter",
+ "label": "Enable Tag Filter",
+ "description": "Show tag-based filter dropdown",
+ "value": true,
+ "valueType": "boolean",
+ "condition": { "==": [{ "var": "enableFilters" }, true] }
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "searchPlaceholder",
+ "label": "Search Placeholder",
+ "value": "Search...",
+ "description": "Placeholder text for the search input",
+ "condition": { "==": [{ "var": "enableFilters" }, true] }
+ },
+ {
+ "component": "boolean",
+ "name": "showTags",
+ "label": "Show Tags",
+ "description": "Show content fragment tags on each card",
+ "value": false,
+ "valueType": "boolean",
+ "condition": { "==": [{ "var": "dataSourceType" }, "content-fragments"] }
+ },
+ {
+ "component": "select",
+ "name": "ctastyle",
+ "label": "CTA Style",
+ "valueType": "string",
+ "value": "button",
+ "options": [
+ {
+ "name": "Primary Button",
+ "value": "button"
+ },
+ {
+ "name": "Secondary Button",
+ "value": "button-secondary"
+ },
+ {
+ "name": "Dark Button",
+ "value": "button-dark"
+ },
+ {
+ "name": "Link",
+ "value": "link"
+ }
+ ]
+ },
+ {
+ "component": "text",
+ "valueType": "string",
+ "name": "noResultsMessage",
+ "label": "No Results Message",
+ "value": "No items found",
+ "description": "Message displayed when no content fragments match"
+ },
+ {
+ "component": "text",
+ "name": "custom-class",
+ "label": "Custom class",
+ "value": "",
+ "valueType": "string",
+ "description": "Space-separated class names to add to the block"
+ }
+ ]
+ },
{
"...": "../blocks/*/_*.json#/models"
}
diff --git a/scripts/utils.js b/scripts/utils.js
index 3ba8e56..f736a69 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -476,3 +476,76 @@ export function dynamicMediaAssetProcess(pictureElement, qParam) {
});
}
}
+/**
+ * Resolves an image URL from a Content Fragment image field.
+ * Handles:
+ * - Plain string URLs (passthrough)
+ * - RemoteRef (connected Assets / Polaris DAM) → DM delivery URL
+ * - ImageRef (local AEM DAM) → _dynamicUrl / _publishUrl / _authorUrl
+ * - Open API responses (no __typename, field-presence fallback)
+ *
+ * @param {string|object} imageField - The image field from CF response
+ * @param {boolean} [isAuthorEnv] - Whether running on author environment
+ * @returns {string} Resolved image URL or empty string
+ */
+export function resolveImageUrl(imageField, isAuthorEnv = false) {
+ if (!imageField) return '';
+ if (typeof imageField === 'string') return imageField;
+
+ // eslint-disable-next-line no-underscore-dangle
+ const typename = imageField.__typename;
+
+ // Primary: __typename-based routing (GraphQL responses)
+ switch (typename) {
+ case 'RemoteRef': {
+ const repositoryId = (imageField.repositoryId || '').trim();
+ const assetId = (imageField.assetId || '').trim();
+ const fileName = 'remoteRefAsset.png';
+
+ if (!repositoryId || !assetId || !fileName) return '';
+
+ const host = repositoryId.startsWith('http://') || repositoryId.startsWith('https://')
+ ? repositoryId.replace(/\/$/, '')
+ : `https://${repositoryId}`;
+
+ return `${host}/adobe/dynamicmedia/deliver/${assetId}/${fileName}`;
+ }
+ case 'ImageRef': {
+ if (isAuthorEnv) {
+ // eslint-disable-next-line no-underscore-dangle
+ return imageField._authorUrl || imageField._publishUrl || imageField._dynamicUrl || '';
+ }
+ // eslint-disable-next-line no-underscore-dangle
+ return imageField._dynamicUrl || imageField._publishUrl || imageField._authorUrl || '';
+ }
+ default:
+ break;
+ }
+
+ // Fallback: field-presence detection (Open API / legacy responses without __typename)
+ if (imageField.repositoryId && imageField.assetId) {
+ const repositoryId = (imageField.repositoryId || '').trim();
+ const assetId = (imageField.assetId || '').trim();
+ const fileName = 'asset.png';
+
+ if (!repositoryId || !assetId || !fileName) return '';
+
+ const host = repositoryId.startsWith('http://') || repositoryId.startsWith('https://')
+ ? repositoryId.replace(/\/$/, '')
+ : `https://${repositoryId}`;
+
+ return `${host}/adobe/dynamicmedia/deliver/${assetId}/${fileName}`;
+ }
+
+ // eslint-disable-next-line no-underscore-dangle
+ if (imageField._dynamicUrl || imageField._publishUrl || imageField._authorUrl) {
+ if (isAuthorEnv) {
+ // eslint-disable-next-line no-underscore-dangle
+ return imageField._authorUrl || imageField._publishUrl || imageField._dynamicUrl || '';
+ }
+ // eslint-disable-next-line no-underscore-dangle
+ return imageField._dynamicUrl || imageField._publishUrl || imageField._authorUrl || '';
+ }
+
+ return '';
+}
\ No newline at end of file