Εφαρμογή του Schema.org στο Προσαρμοσμένο Breadcrumb Rendering / Blogs / Perficient

Όπως έχουμε συζητήσει για το Schema.org στο Sitecore και τα οφέλη του στο προηγούμενο ιστολόγιό μου. Θα διερευνήσουμε την εφαρμογή του schema.org σε στοιχεία.

Σε αυτό το ιστολόγιο, ακολουθώ ένα σενάριο όπου θα εφαρμόσω το Schema.org στο στοιχείο Custom Breadcrumb στο Sitecore.

Προαπαιτούμενα:

Sitecore 9.1 και νεότερη έκδοση
SXA

Δημιουργώ έναν κλώνο απόδοσης Breadcrumb (Out of the box) στο SXA και θα τροποποιήσω την απόδοση για να εφαρμόσω το Schema.org σε αυτό.

Ακολουθούν τα βήματα για την κλωνοποίηση και την προσθήκη του schema.org στην προσαρμοσμένη απόδοση του Breadcrumb

Πλοηγηθείτε στο /sitecore/layout/Renderings/Feature/Experience Accelerator/Navigation/Breadcrumb
Κάντε δεξί κλικ στο Φρυγανιά απόδοση, κάντε κλικ στα σενάρια και μετά κάντε κλικ στο απόδοση κλώνων
Θα εμφανιστεί ένα αναδυόμενο παράθυρο. μπορείτε να κάνετε τις αλλαγές για το Όνομα απόδοσης, Μονάδα μέτρησηςκαι Απόδοση CSS Class. Διατηρήστε τις ρυθμίσεις για Παράμετροι, Πηγή δεδομένων, και Θέα όπως δίνεται στις Εικόνες
Κάντε κλικ στο Συνέχεια για να ολοκληρώσετε τη διαδικασία κλωνοποίησης
Προσθέστε την απόδοση σε Διαθέσιμες αποδόσεις ώστε να είναι προσβάσιμο στις Επεξεργαστής εμπειρίας κατά την επεξεργασία. Πλοηγηθείτε στο /sitecore/content/Tenant-Name/Site-Name/Presentation/Available Renderings/Navigation και κάντε κλικ στο Επεξεργασία (Αποδόσεις)
Προσθέστε το δεδομένο <σενάριο> σε CustomBreadcrumb.cshtml ή Σε ένα αρχείο σεναρίου για να προσθέσετε τη Σήμανση σχήματος που είναι ορατή στο <κεφάλι> ετικέτα του DOM

Σημείωση: Προσθέτω το σενάριο στο ίδιο το αρχείο cshtml ως παράδειγμα. Μπορείτε να δημιουργήσετε ένα ξεχωριστό αρχείο JavaScript στο θέμα και να το προσθέσετε ανάλογα.

<script>
    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>

ο Schema.org Η σήμανση θα εμφανιστεί μέσα στο <κεφάλι> ετικέτα μέσα στο DOM και θα μοιάζει με αυτό

Βήμα τελικό