2

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?

5
  • As both are different module. U have to start div tag in Search & End in Minicart respective .phtml files
    – Jackson
    Dec 19 '16 at 9:30
  • Is that the only way to go about doing it? That feels very hacky :(
    – andy jones
    Dec 19 '16 at 9:47
  • You are going to override those .phtml files in your Custom Theme. So it's don't hacky. U r overriding stuffs as per your need
    – Jackson
    Dec 19 '16 at 10:00
  • Yes, but leaving unclosed div's isn't the best solution as another dev might not know what is going on and break things.
    – andy jones
    Dec 19 '16 at 10:07
  • Definitely hacky and not a good way to do it. Try adding the wrapper xml & move elements somewhere else in your theme.
    – Eamonn
    Dec 19 '16 at 14:43
6

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"/>
5
  • Yes i thought this, but it didn't seem to move them, flushed the cache several times - but just didn't move them. I think this is on the right lines, but im still not sure.
    – andy jones
    Dec 19 '16 at 9:57
  • Maybe a before="-" or after="-" is required on the move elements?
    – Eamonn
    Dec 19 '16 at 10:00
  • Possibly, to put them one after the other. If my understanding is right, creating the container and then moving into it should work. But it doesnt :(
    – andy jones
    Dec 19 '16 at 10:09
  • This worked a treat after i put it into the right file >_< haha thanks for the info. I knew i was on the right lines but this got me there (Y) thanks again.
    – andy jones
    Dec 19 '16 at 14:58
  • This gives me an error. I am not sure if you can move an element inside a container you just created.
    – Metropolis
    Dec 21 '17 at 2:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.