Implementing custom breadcrumbs (PDP & PLP) with BreadcrumbList schema

custom-breadcrumbs.liquid

{% liquid
  if request.page_type == 'product'
    assign breadcrumbs = product.metafields.custom.parent_breadcrumbs.value
    assign title = product.title

  elsif request.page_type == 'collection'
    assign breadcrumbs = collection.metafields.custom.parent_breadcrumbs.value
    assign title = collection.title
  endif
%}

<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="{{ routes.root_url }}" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

  {% if request.page_type == 'product' or request.page_type == 'collection' %}
    <span aria-hidden="true">&rsaquo;</span>
    <a href="{{ shop.url }}/collections/all">Shop All</a>
  {% endif %}

  {% unless breadcrumbs == blank %}
    {% for collection in breadcrumbs %}
      <span aria-hidden="true">&rsaquo;</span>
      <a href="{{ collection.url }}">{{ collection.title }}</a>
    {% endfor %}

  {% else %}
    
    {% if collection.handle and template.name == 'product' %}
      <span aria-hidden="true">&rsaquo;</span>
      {% capture url %}{{ routes.collections_url }}/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
    {% endif %}
  {% endunless %}

  <span aria-hidden="true">&rsaquo;</span>
  <span>{{ title }}</span>
</nav>

<style>
  .breadcrumb { 
    display: flex;
    flex-wrap: wrap; 
  }
  .collection__heading .breadcrumb {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media only screen and (max-width: 767px){
    .collection__heading .breadcrumb {
      margin-top: -20px;
    }
  }
</style>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{- shop.name -}}",
        "item": "{{- shop.url -}}"
      }
      {%- if request.page_type == 'product' -%}
        {%- if product.metafields.custom.parent_breadcrumbs.value != blank -%}
          {%- assign position_total = 2 -%}
          {%- for breadcrumb in product.metafields.custom.parent_breadcrumbs.value -%}
            ,{
              "@type": "ListItem",
              "position": {{ forloop.index | plus: 1 }},
              "name": {{ breadcrumb.title | json }},
              "item": "{{ shop.url }}/collections/{{ breadcrumb.handle }}"
            }
            {%- assign position_total = position_total | plus: 1 -%}
          {%- endfor -%}
          ,{
            "@type": "ListItem",
            "position": {{ position_total }},
            "name": {{ product.title | json }},
            "item": "{{ shop.url }}{{ product.url }}"
          }
        {%- else -%}
          ,{
            "@type": "ListItem",
            "position": 2,
            "name": "Shop All",
            "item": "{{ shop.url }}/collections/all"
          }
          ,{
            "@type": "ListItem",
            "position": 3,
            "name": {{ product.title | json }},
            "item": "{{ shop.url }}{{ product.url }}"
          }
        {%- endif -%}

      {%- elsif request.page_type == 'collection' -%}
        {%- if collection.metafields.custom.parent_breadcrumbs.value -%}
          {%- assign position_total = 2 -%}
          {%- for breadcrumb in collection.metafields.custom.parent_breadcrumbs.value -%}
            ,{
              "@type": "ListItem",
              "position": {{ forloop.index | plus: 1 }},
              "name": {{ breadcrumb.title | json }},
              "item": "{{ shop.url }}/collections/{{ breadcrumb.handle }}"
            }
            {%- assign position_total = position_total | plus: 1 -%}
          {%- endfor -%}
            ,{
              "@type": "ListItem",
              "position": {{ position_total }},
              "name": {{ collection.title | json }},
              "item": "{{ shop.url }}{{ collection.url }}"
            }
        {%- else -%}
          ,{
            "@type": "ListItem",
            "position": 2,
            "name": "Shop All",
            "item": "{{ shop.url }}/collections/all"
          }
          ,{
            "@type": "ListItem",
            "position": 3,
            "name": {{ collection.title | json }},
            "item": "{{ shop.url }}{{ collection.url }}"
          }
        {%- endif -%}
      {%- elsif request.page_type == 'blog' -%}
          ,{
            "@type": "ListItem",
            "position": 2,
            "name": {{ blog.title | json }},
            "item": "{{ shop.url }}{{ blog.url }}"
          }
      {%- elsif request.page_type == 'article' -%}
          ,{
            "@type": "ListItem",
            "position": 2,
            "name": {{ blog.title | json }},
            "item": "{{ shop.url }}{{ blog.url }}"
          }, {
            "@type": "ListItem",
            "position": 3,
            "name": {{ blog.title | json }},
            "item": "{{ shop.url }}{{ article.url }}"
          }
      {%- elsif request.page_type == 'page' -%}
        ,{
            "@type": "ListItem",
            "position": 2,
            "name": {{ page.title | json }},
            "item": "{{ shop.url }}{{ page.url }}"
          }
      {%- endif -%}
    ]
  }
</script>