Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#30727] - [4.1] mod_breadcrumbs - convert microdata to JSON-LD

? ? Pending

User tests: Successful: Unsuccessful:

avatar hans2103
hans2103
22 Sep 2020

Pull Request for Issue # .

Summary of Changes

With #25117 in mind and the possible adaptation of Spatie\SchemaOrg in mind I would like to prepare current breadcrumbs by converting the Microdata into JSON-LD structure.
But not only with that possible adaptation in mind... The JSON-LD format is the recommended format.
The HTML code will be cleaner when the data is moved to JSON-LD format
Another benefit of this change is that the current page will always be added to the data. This is not the case in the current situation with Hide Last Item is active.

Testing Instructions

  • Install Joomla with Sample Data Blog.
  • Note that there will be a mod_breadcrumbs on every page. example: http://your-joomla-4-site/index.php/blog/article
  • Inspect element and see the markup of mod_breadcrumbs
  • Apply this patch. No npm run something:something is required
  • Refresh the page and note the changed markup.

Actual result BEFORE applying this Pull Request

<nav role="navigation" aria-label="Breadcrumbs">
    <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="mod-breadcrumbs breadcrumb">
        <li class="mod-breadcrumbs__here float-left">You are here: &nbsp;</li>
        <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem" class="mod-breadcrumbs__item breadcrumb-item">
            <a itemprop="item" href="/index.php" class="pathway"><span itemprop="name">Home</span></a>
            <meta itemprop="position" content="1">
        </li>
        <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem" class="mod-breadcrumbs__item breadcrumb-item">
            <a itemprop="item" href="/index.php/blog" class="pathway"><span itemprop="name">Blog</span></a>
            <meta itemprop="position" content="2">
        </li>
        <li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem" class="mod-breadcrumbs__item breadcrumb-item active">
            <span itemprop="name">Article</span>
            <meta itemprop="position" content="3">
        </li>
    </ol>
</nav>

Expected result AFTER applying this Pull Request

<nav role="navigation" aria-label="Breadcrumbs">
    <ol class="mod-breadcrumbs breadcrumb">
        <li class="mod-breadcrumbs__here float-left">You are here: &nbsp;</li>
        <li class="mod-breadcrumbs__item breadcrumb-item"><a href="/index.php" class="pathway"><span>Home</span></a></li>
        <li class="mod-breadcrumbs__item breadcrumb-item"><a href="/index.php/blog" class="pathway"><span>Blog</span></a></li>
        <li class="mod-breadcrumbs__item breadcrumb-item active"><span>Article</span></li>
    </ol>
</nav>

While inspecting the element and scroll to top and inspect element <head>. It should contain the following <script> tag.

    <script type="application/ld+json">
        {
            "@context": "https:\/\/schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "item": {
                        "@id": "http:\/\/joomla4.test\/index.php",
                        "name": "Home"
                    }
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "item": {
                        "@id": "http:\/\/joomla4.test\/index.php\/blog",
                        "name": "Blog"
                    }
                },
                {
                    "@type": "ListItem",
                    "position": 3,
                    "item": {
                        "@id": "http:\/\/joomla4.test\/index.php\/blog\/article",
                        "name": "Article"
                    }
                }
            ]
        }    </script>

Documentation Changes Required

avatar hans2103 hans2103 - open - 22 Sep 2020
avatar hans2103 hans2103 - change - 22 Sep 2020
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 22 Sep 2020
Category ⇒ Modules Front End
avatar hans2103 hans2103 - change - 22 Sep 2020
Title
…
:recycle: convert microdata to JSON-LD
[4.0] mod_breadcrumbs - convert microdata to JSON-LD
avatar hans2103 hans2103 - edited - 22 Sep 2020
avatar HLeithner
HLeithner - comment - 22 Sep 2020

We are in feature freeze for j4 please rebase to j4.1

avatar hans2103
hans2103 - comment - 22 Sep 2020

@HLeithner can you help me how I rebase to 4.1?

avatar HLeithner
HLeithner - comment - 22 Sep 2020

You can try to just target the 4.1-dev branch in github (you can edit this PR and select another target branch).

Depending on how long it takes to merge and if 4.1-dev is uptodate it could work.

Else: https://git-scm.com/book/en/v2/Git-Branching-Rebasing

But it's maybe easier to create a new branch of the 4.1 branch and copy paste.

avatar hans2103
hans2103 - comment - 22 Sep 2020

changed base.... already checked that mod_breadcrumbs/tmpl/default.php J4 = J4.1

avatar richard67
richard67 - comment - 22 Sep 2020

Bad news: Because the 4.1-dev branch is not up to date with latest changes in the 4.0-dev branch, this PR now shows all changes in 4.0-dev since the 4.1-dev was updated to 4.0-dev last time, and not only the changes from this PR.

Maybe that will be fixed by just waiting for the next update of the 4.1-dev branch from 4.0-dev, but I'm not sure about that.

avatar HLeithner
HLeithner - comment - 22 Sep 2020

@zero-24 or @wilsonge can you please update the branch, I'm unable at the moment to do this.

avatar HLeithner
HLeithner - comment - 22 Sep 2020

@hans2103 keep it as it is for the moment.

avatar ceford
ceford - comment - 22 Sep 2020

Using Patchtester I get this:

The file marked for modification does not exist: administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue

Is this to do with the base change?

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30727.
avatar richard67
richard67 - comment - 22 Sep 2020

@ceford Yes, you should wait until the 4.1-dev branch is up to date, and then you can test this PR only on a 4.1 and not on a 4.0 installation.

avatar wilsonge
wilsonge - comment - 22 Sep 2020

Should be good now - pushed it up into 4.1-dev (needed to swap the branches around to make github realise)

avatar richard67
richard67 - comment - 22 Sep 2020

Drone seems to have a problem. I think when adding a change (e.g. those requested by review above) it will be fixed.

avatar hans2103 hans2103 - change - 23 Sep 2020
Title
…
[4.0] mod_breadcrumbs - convert microdata to JSON-LD
[4.1] mod_breadcrumbs - convert microdata to JSON-LD
avatar hans2103 hans2103 - edited - 23 Sep 2020
avatar joomlacorner joomlacorner - test_item - 23 Sep 2020 - Tested successfully
avatar joomlacorner
joomlacorner - comment - 23 Sep 2020

I have tested this item ✅ successfully on 4710faf

Worked as Expected result.

'''

  1. You are here:   
    2. 	<li class="mod-breadcrumbs__item breadcrumb-item"><a href="/index.php" class="pathway"><span>Home</span></a></li><li class="mod-breadcrumbs__item breadcrumb-item"><a href="/index.php/blog" class="pathway"><span>Blog</span></a></li><li class="mod-breadcrumbs__item breadcrumb-item active"><span>Welcome to your blog</span></li>	</ol>
	<script type="application/ld+json">
{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/j4.akarawuth.com\/index.php","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/j4.akarawuth.com\/index.php\/blog","name":"Blog"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/j4.akarawuth.com\/index.php\/blog\/3-welcome-to-your-blog","name":"Welcome to your blog"}}]}	</script>
'''
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30727.
avatar hans2103 hans2103 - change - 1 Oct 2020
Labels Added: ?
avatar hans2103 hans2103 - change - 24 Oct 2020
The description was changed
avatar hans2103 hans2103 - edited - 24 Oct 2020
avatar adj9 adj9 - test_item - 24 Oct 2020 - Tested successfully
avatar adj9
adj9 - comment - 24 Oct 2020

I have tested this item ✅ successfully on fdf12e3

done :)!

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30727.

avatar hans2103
hans2103 - comment - 25 Oct 2020

@gostn hve you checked the 'head' element?

avatar hans2103 hans2103 - change - 25 Oct 2020
The description was changed
avatar hans2103 hans2103 - edited - 25 Oct 2020
avatar hans2103
hans2103 - comment - 25 Oct 2020

@gostn I see...
with commit 2fbe114 I have moved the json block to the <head> of the document. Suggested by @SharkyKZ

Just adjusted the test instructions. Can you test again?

avatar gostn gostn - test_item - 25 Oct 2020 - Tested successfully
avatar richard67 richard67 - change - 25 Oct 2020
Status Pending ⇒ Ready to Commit
avatar richard67
richard67 - comment - 25 Oct 2020

RTC

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30727.

avatar rdeutz rdeutz - close - 27 Oct 2020
avatar rdeutz rdeutz - merge - 27 Oct 2020
avatar rdeutz rdeutz - change - 27 Oct 2020
Status Ready to Commit ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2020-10-27 13:28:22
Closed_By ⇒ rdeutz
Labels Added: ?

Add a Comment

Login with GitHub to post a comment