Caricamento laterale componente component-sideloading

Panoramica overview

Il sideloading dei componenti di Communities è utile quando una pagina web è progettata come una semplice app a pagina singola che modifica dinamicamente ciò che viene visualizzato a seconda di ciò che è selezionato dal visitatore del sito.

Questa operazione viene eseguita quando i componenti di Communities non esistono nel modello di pagina, ma vengono aggiunti in modo dinamico dopo la selezione di un visitatore del sito.

Poiché il framework dei componenti social (SCF) ha una presenza leggera, vengono registrati solo i componenti SCF esistenti al momento del caricamento iniziale della pagina. Affinché un componente SCF aggiunto in modo dinamico possa essere registrato dopo il caricamento della pagina, è necessario richiamare SCF per "effettuare il caricamento in parallelo" del componente.

Quando una pagina è progettata per effettuare il sideload dei componenti di Communities, è possibile memorizzare nella cache l’intera pagina.

I passaggi per aggiungere in modo dinamico componenti SCF sono i seguenti:

Aggiungi dinamicamente un componente a DOM dynamically-add-component-to-dom

Che il componente sia incluso in modo dinamico o caricato in modo dinamico, deve prima essere aggiunto al DOM.

Quando si aggiunge il componente SCF, il tag più comune da utilizzare è il tag DIV, ma possono essere utilizzati anche altri tag. Poiché SCF esamina il DOM solo quando la pagina viene inizialmente caricata, questa aggiunta al DOM passerà inosservata fino a quando SCF non viene esplicitamente richiamato.

Qualsiasi tag viene utilizzato, come minimo, l’elemento deve essere conforme al normale pattern dell’elemento principale SCF, contenente questi due attributi:

Di seguito è riportato un esempio di componente per commenti aggiunti:

<div
    class="scf-commentsystem scf translation-commentsystem"
    data-component-id="<%= currentPage.getPath()%>/jcr:content/content-left/comments"
    data-scf-component="social/commons/components/hbs/comments"
>
</div>

Caricamento a margine richiamando SCF sideload-by-invoking-scf

Inclusione dinamica dynamic-inclusion

L’inclusione dinamica utilizza una richiesta boostrap che si traduce in SCF che esamina il DOM e avvia il rapping di tutti i componenti SCF presenti nella pagina.

Per inizializzare i componenti SCF in qualsiasi momento dopo il caricamento della pagina, è sufficiente attivare un evento JQuery come riportato di seguito:

$(document).trigger(SCF.events.BOOTSTRAP_REQUEST);

Caricamento dinamico dynamic-loading

Il caricamento dinamico consente di controllare il caricamento dei componenti SCF.

Invece di avviare tutti i componenti SCF presenti nel DOM, è possibile specificare un componente SCF specifico da caricare utilizzando questo metodo JavaScript:

SCF.addComponent(document.getElementById(someId);

Dove someId è il valore del data-component-id attributo.