À l’heure actuelle, les Oneboxes pour les événements sont un peu décevantes. Essentiellement, elles ne sont pas différentes des Oneboxes de sujets classiques et n’incluent pas la date, l’heure, la description, etc. (sauf si elles sont mises dans le titre du sujet comme solution de contournement).
Voici un exemple d’événement de notre site :
Serait-il possible de s’intégrer aux nouvelles (et brillantes) cartes qui apparaissent au clic dans le calendrier pour les événements, et de les proposer comme oneboxes ? Par exemple :
Cela n’est peut-être pas du tout réalisable, mais je me demande si les métadonnées pourraient être modifiées pour les publications d’événements afin qu’elles se présentent en onebox d’une manière qui mette en évidence les informations critiques de l’événement (surtout en interne).
Je pense qu’un changement fondamental que nous devons apporter ici est d’introduire des URL d’événements appropriées afin que vous puissiez les utiliser pour le onebox et au lieu de oneboxer :
https://SITE/t/slug/123
Nous ferions le onebox de :
https://SITE/event/slug/1234
Cela ouvre un peu la boîte de Pandore (dans le bon sens cependant) :
Comment les gens trouvent-ils le lien vers l’événement ? (Je suppose que nous l’ajoutons au menu contextuel)
Que se passe-t-il s’ils visitent l’événement directement depuis l’URL ? (Je suppose que nous redirigeons vers le post de l’événement pour l’instant)
En jouant avec ce menu contextuel, je me demande si « Ajouter au calendrier » ne serait pas mieux placé directement sur la carte. Toutes les autres options sont assez administratives, mais celle-ci concerne tous les utilisateurs et gagnerait à être mise en évidence dans l’interface utilisateur.
Dans les publications d’événements, je place l’option « Ajouter au calendrier » dans un endroit évident ; vous pouvez ajouter ceci à l’en-tête JavaScript du thème, accessible depuis le menu d’apparence de l’administrateur :
<script>
(() => {
const eventInfoSelector = ".event-header .event-info";
const submenuButtonSelector = "button.fk-d-menu__trigger.discourse-post-event-more-menu-trigger";
const menuContentSelector = ".fk-d-menu__inner-content";
const addToCalendarSelector = "li.add-to-calendar > button";
// Add inline CSS to keep text and icon black on hover
const style = document.createElement("style");
style.innerHTML = `
.btn.btn-icon-text.custom-add-to-calendar-btn,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover {
color: black !important;
}
.btn.btn-icon-text.custom-add-to-calendar-btn svg,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover svg {
fill: black !important;
}
`;
document.head.appendChild(style);
// Helper to wait for an element in the DOM
const waitForElement = (selector, timeout = 3000) => {
return new Promise((resolve, reject) => {
const el = document.querySelector(selector);
if (el) return resolve(el);
const observer = new MutationObserver(() => {
const found = document.querySelector(selector);
if (found) {
observer.disconnect();
resolve(found);
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
observer.disconnect();
reject();
}, timeout);
});
};
const createAddToCalendarButton = async () => {
const eventInfo = document.querySelector(eventInfoSelector);
if (!eventInfo || eventInfo.querySelector(".custom-add-to-calendar-btn")) return;
const button = document.createElement("button");
button.className = "btn btn-icon-text custom-add-to-calendar-btn";
button.title = "Add to calendar";
button.innerHTML = `
<svg class="fa d-icon d-icon-file svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="#file">
</svg>
<span class="d-button-label">Add to calendar</span>
`;
// Inline styles for left alignment
button.style.display = "inline-flex";
button.style.justifyContent = "flex-start";
button.style.marginLeft = "0";
button.style.marginBottom = "4px";
button.style.backgroundColor = "#f0f0f0";
button.style.borderRadius = "6px";
button.style.transition = "transform 0.2s";
button.style.cursor = "pointer";
// Click logic: open menu and trigger original Add to Calendar
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // open menu
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// Insert into event-info
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// Observe DOM changes (Ember-safe)
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// Initial attempt
createAddToCalendarButton();
})();
</script>
, cela ferait vraiment briller la promotion de l’événement.
