I'm trying to create a modifier for breadcrumb OpenCart 3 - where did I screw up?

Question

opencart

Good day!
I'm trying to create my first modifier for breadcrumb in OpenCart 3. And it even works, but with a small error.
The template has code

<div class="breadcrumbs">
  <div class="container">
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
</div>

I change it with this code

<?xml version="1.0" encoding="UTF-8"?>
<modification>
  <code>microdata_breadcrumblist</code>
  <name><![CDATA[Microdata BreadcrumbList OC 3.0.x]]></name>
  <version><![CDATA[1.0]]></version>
  <author><![CDATA[AlexSF]]></author>
  <date><![CDATA[2018.02.01]]></date>
  <file path='catalog/language/ru-ru/ru-ru.php'>
    <operation info='Fix for Font Awesome'>
      <search><![CDATA[
        <i class="fa fa-home"></i>
      ]]></search>
      <add position='replace'><![CDATA[
        <i class="fa fa-home"></i><span style="display:none">Главная</span>
      ]]></add>
    </operation>
  </file>
  <file path='catalog/view/theme/*/template/{product,information,checkout,account}/*.twig'>
    <operation error="skip">
      <search><![CDATA[
        <ul class="breadcrumb">
        	]]></search>
      <add position="replace" offset="12"><![CDATA[
        <ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
          {% for key,breadcrumb in breadcrumbs %} 
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
          <a itemscope itemtype="https://schema.org/Thing" itemprop="item" href="{{ breadcrumb['href'] }}">
            <span itemprop="name">{{ breadcrumb['text'] }}</span>
          </a>
          <meta itemprop="position" content="{{ key+1 }}" />
          </li>
          {% endfor %} 
        </ul>
      ]]></add>
    </operation>
  </file>
</modification>

The modifier does its job = adds schema.org micro-markup. But after it, li from the source code is added that duplicate links to pages.

Where did I go wrong?
Why doesn't the modifier completely replace the source code with its own?

Thank you!

Answer 1

<add position="replace" offset=" количество строк">

Answer 2

Yesterday on Google your version of Microdata BreadcrumbList. The modifier is working, but when analyzing in Webmaster Tools - Rich I get an error. Requires adding a value for @id . After several hours of trying to figure out what Google wants, I'm "blue" - Google wants the same thing, but in ld+json format ! Spent a few more hours. When you didn’t know, but also forgot - it’s normal to spend a few hours. As a result, I got the following Breadcrumb ld+json Modifier for OpenCart 3

<?xml version="1.0" encoding="UTF-8"?>
<modification>
  <code>breadcrumblist_json</code>
  <name><![CDATA[BreadcrumbList ld+json OC 3.0.x]]></name>
  <version><![CDATA[1.0]]></version>
  <author><![CDATA[AlexSF]]></author>
  <date><![CDATA[2020.03.04]]></date>  
  <file path='catalog/language/ru-ru/ru-ru.php'>
    <operation info='Fix for Font Awesome'>
      <search><![CDATA[
        <i class="fa fa-home"></i>
      ]]></search>
      <add position='replace'><![CDATA[<i class="fa fa-home"></i><span style="display:none">Главная</span>]]></add>
    </operation>
  </file>  
  <file path='catalog/view/theme/*/template/{product,information,checkout,account}/*.twig'>
    <operation error="skip">
      <search><![CDATA[
        <ul class="breadcrumb">
        	]]></search>
      <add position="before"><![CDATA[
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{% for key,breadcrumb in breadcrumbs %}
  {
    "@type": "ListItem",
    "position": {{ key+1 }},
    "item":
    {
      "@id": "{{ breadcrumb['href'] }}",
      "name": "{{ breadcrumb['text']|striptags }}"
    }
  {% if loop.last == false %}
  },  
  {% else %}
  }
  {% endif %}
{% endfor %}
 ]
}
</script>
      ]]></add>
    </operation>
  </file>  
</modification>