How can I move an element and wrap it in a tag?

Question

I am trying to move the minicart into the top links area, but I need to wrap it inside an element. I realize I can't use an li, but can I use a div? How can I do this?

• Creating an empty container and trying to move it into it does not work.

• Trying to reference the minicart inside the container does not work.

  <referenceContainer name="top.links">
      <container name="top.links.cart" as="topLinksCart" htmlTag="div" after="-"/>
  </referenceContainer>
  <move element="minicart" destination="top.links.cart" after="-"/>
  

Answer 1

This is the allowed Tags (htmlTag) in Container:

    protected $allowedTags = [
       'aside',
       'dd',
       'div',
       'dl',
       'fieldset',
       'main',
       'nav',
       'header',
       'footer',
       'ol',
       'p',
       'section',
       'table',
       'tfoot',
       'ul',
    ];

You will see it in class Magento\Framework\View\Layout\Container.

So, you can't wrap an element using li tag.

And here, Magento render a container to HTML. You can rewrite it if want to wrap a li in ul tag. (https://github.com/magento/magento2/blob/2.2-develop/lib/internal/Magento/Framework/View/Layout.php#L603)

    protected function _renderContainer($name)
    {
        $html = '';
        $children = $this->getChildNames($name);
        foreach ($children as $child) {
            $html .= $this->renderElement($child);
        }
        if ($html == '' || !$this->structure->getAttribute($name, Element::CONTAINER_OPT_HTML_TAG)) {
            return $html;
        }
        $htmlId = $this->structure->getAttribute($name, Element::CONTAINER_OPT_HTML_ID);
        if ($htmlId) {
            $htmlId = ' id="' . $htmlId . '"';
        }
        $htmlClass = $this->structure->getAttribute($name, Element::CONTAINER_OPT_HTML_CLASS);
        if ($htmlClass) {
            $htmlClass = ' class="' . $htmlClass . '"';
        }
        $htmlTag = $this->structure->getAttribute($name, Element::CONTAINER_OPT_HTML_TAG);
        $html = sprintf('<%1$s%2$s%3$s>%4$s</%1$s>', $htmlTag, $htmlId, $htmlClass, $html);
        return $html;
    }