Magento 2 – Wrapping Search and Cart in Element

blocksheadermagento2xml

I understand that in mage2 the header is generated through xml and knockout js, so all the blocks can be controlled with xml and the node – move

My question is i have the mini cart and search block in the header, they're called in by the fall back theme, the problem is I want to wrap the two separate divs in one container.

So instead of:

<div data-block="minicart" class="minicart-wrapper">
    // content
</div>
<div class="block block-search">
    // content
</div>

I want to generate the following:

<div class="block-wrapper-to-hold-the-items">
    <div data-block="minicart" class="minicart-wrapper">
        // content
    </div>
    <div class="block block-search">
        // content
    </div>
</div>

How do i go about doing this?

Best Answer

I think something like this would work, though I am often wrong :)

<referenceContainer name="header-wrapper">
    <container name="block-wrapper-to-hold-the-items" as="block-wrapper-to-hold-the-items" htmlTag="div" htmlClass="block-wrapper-to-hold-the-items"/>
</referenceContainer>

<move element="minicart" destination="block-wrapper-to-hold-the-items"/>
<move element="top.search" destination="block-wrapper-to-hold-the-items"/>
Related Topic