Implémentation de Schema.org dans le rendu personnalisé du fil d’Ariane / Blogs / Perficient

Comme nous l’avons discuté de Schema.org dans Sitecore et de ses avantages dans mon précédent Blog. Nous explorerons l’implémentation de schema.org sur les composants.

Dans ce blog, je prends un scénario dans lequel j’implémenterai Schema.org sur le composant Custom Breadcrumb dans Sitecore.

Conditions préalables:

• Sitecore 9.1 et supérieur
• SXA

Je crée un clone du rendu Breadcrumb (Out of the box) dans SXA et je modifierai le rendu pour y implémenter Schema.org.

Voici les étapes pour cloner et ajouter schema.org dans le rendu Custom Breadcrumb

1. Aller vers /sitecore/layout/Renderings/Feature/Experience Accelerator/Navigation/Breadcrumb
   

2. Faites un clic droit sur le Miette de pain rendu, cliquez sur scripts, puis cliquez sur rendu de clonage
   

3. Une fenêtre contextuelle apparaîtra ; vous pouvez apporter les modifications pour le Nom du rendu, Moduleet Classe CSS de rendu. Conservez les paramètres pour Paramètres, La source de données, et Voir comme indiqué dans les images
   

4. Cliquez sur Procéder pour terminer le processus de clonage
5. Ajouter le rendu à Rendus disponibles afin qu’il soit accessible sur Éditeur d’expérience lors de l’édition. Aller vers /sitecore/content/Tenant-Name/Site-Name/Presentation/Available Renderings/Navigation et cliquez sur Modifier (Rendu)
   
6. Ajouter le donné dans Fil d'Ariane personnalisé.cshtml ou Dans un fichier script pour ajouter le balisage de schéma visible sur le balise du DOM

Note: J'ajoute le script dans le fichier cshtml lui-même à titre d'exemple. Vous pouvez créer un fichier JavaScript distinct dans le thème et l'ajouter en conséquence.

<script type="text/javascript">
    function insertScript(tagToAdd, tags = null, updatedScript, deleteOtherNodes = false) { 
        if (!tagToAdd) return;
    var headElement = document.getElementsByTagName(tagToAdd)[0]; 
        if (tags && tags.length > 0) {
        document.getElementsByTagName(tagToAdd)[0].replaceChild(updatedScript, tags[0]);
    if (!deleteOtherNodes) return;
    for (let i = 1; i < tags.length; i++) {
        headElement.removeChild(tags[i]); 
            } 
        } else {
        headElement.appendChild(updatedScript); 
        } 
    }
    const breadcrumb = document.querySelector(".breadcrumb");
    var breadcrumbItems = breadcrumb.querySelectorAll("nav ol li a");
    var breadcrumbList = []; 
    breadcrumbItems && breadcrumbItems.forEach((items,index) => {
        breadcrumbList.push({ "@@type": "ListItem", "position": index + 1, "name": items.title, "item": items.href }); 
    });
    var schemaBreadcrumb = "[{ \"@@context\": \"https://schema.org/\", \"@@graph\": [{ \"@@type\": \"BreadcrumbList\", \"itemListElement\":" + JSON.stringify(breadcrumbList)  + "}] }]";
    var prevTags = document.getElementsByTagName('head')[0].querySelectorAll("script[type="application/ld+json"");
    prevTags = Array.from(prevTags); 
    prevTags = prevTags.filter((p) => p.innerHTML.indexOf("@@graph") > -1);
    var newScript = document.createElement('script');
    newScript.type="application/ld+json";
    newScript.innerHTML = schemaBreadcrumb;
    insertScript('head', prevTags, newScript, true);
</script>

Le Schéma.org le balisage apparaîtra à l’intérieur du balise à l’intérieur du DOM et ressemblera à ceci Nous avons ajouté avec succès Schema.org au composant Custom Breadcrumb Sitecore.