Caricamento laterale componente component-sideloading

Panoramica overview

Il sideload del componente 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 Community non esistono nel modello della pagina, ma vengono aggiunti in modo dinamico in seguito alla selezione di un visitatore del sito.

Poiché il framework dei componenti social (SCF) è presente in modo leggero, 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 "sideload" il componente.

Quando una pagina è progettata per scaricare i componenti di Communities, è possibile memorizzare in cache l’intera pagina.

I passaggi per aggiungere dinamicamente i componenti SCF sono i seguenti:

Aggiungi componente in modo dinamico a DOM dynamically-add-component-to-dom

Che il componente sia incluso dinamicamente o caricato dinamicamente, deve prima essere aggiunto al DOM.

Quando si aggiunge il componente SCF, il tag più comune da utilizzare è il tag DIV, ma è possibile utilizzare anche altri tag. Poiché SCF esamina il DOM solo al caricamento iniziale della pagina, questa aggiunta al DOM passerà inosservata fino a quando SCF non verrà esplicitamente richiamato.

Indipendentemente dal tag utilizzato, l’elemento deve essere conforme almeno al pattern di elemento principale SCF normale, contenente i due attributi seguenti:

Di seguito è riportato un esempio di un componente commenti aggiunto:

<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 secondario richiamando SCF sideload-by-invoking-scf

Inclusione dinamica dynamic-inclusion

L’inclusione dinamica utilizza una richiesta di boostrap che induce l’SCF ad esaminare il DOM e ad avviare 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 segue:

$(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 dell'attributo data-component-id.