0

I'm trying to get the header to look a little like this: enter image description here

I'm having a hard time with the search and mini cart buttons, it seems they're nested within header-wrapper by default and I can't seem to separate them from that container and move them around individually.

This is where I'm up to: enter image description here

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>
        <referenceContainer name="header.container">
            <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
                <container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
                    <block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
                        <arguments>
                            <argument name="target" xsi:type="string">contentarea</argument>
                            <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
                        </arguments>
                    </block>
                    </block>
                    <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercontact.phtml" name="headercontact"/>
                </container>
            </container>
            <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
            <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn1.phtml" name="headercolumn1"/>
            <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn2.phtml" name="headercolumn2"/>
            <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn3.phtml" name="headercolumn3"/>
          </container>
        </referenceContainer>
</body>
</page>

So - I created 3 columns inside the header-wrapper container, and then moved the top search and mini cart with CSS. Ideally I would be able to get them both into columns 1 and 3 so that I can put them in DIVS and style them but adding this to headercolumn1.phtml doesn't seem to work 

<?php echo $this->getChildHtml('topSearch'); ?>

so they're both currently sitting below the columns from the header-wrapper container.

Any ideas how I can achieve this?

Improve this question

1 Answer 1

Reset to default
1

I think $this->getChildHtml('topSearch') would only work in the headercolumn1.phtml if you had a block called "topSearch" nested inside of the headercolumn1 block. You could maybe move topSearch inside of it, or make a new block within headercolumn1 in the XML with topSearch's class and template, but different name, and then use that new block name in the getChildHtml method.

Perhaps like:

<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn1.phtml" name="headercolumn1">
  <block class="Magento\Framework\View\Element\Template" name="newSearch" template="Magento_Search::form.mini.phtml" />
</block>

and then $this->getChildHtml('newSearch') in the template?

Improve this answer
4
  • thanks for the suggestion! How would I go about doing both of those? Where do I find topSearch's template or how would I nest topSearch into the column block?
    – iwfabric
    Jan 6, 2020 at 15:16
  • Hey @iwfabric, no prob -- check my updated answer for the suggested XML
    – brackfost
    Jan 6, 2020 at 15:20
  • That worked perfectly, thanks a lot! I tried doing the same for minicart in headercolumn3 <block class="Magento\Checkout\Block\Cart\Sidebar" name="newMiniCart" template="Magento_Checkout::minicart.phtml" /> But it dosn't work? Do I have the wrong template? Developer mode dosn't work for me so I'm having to do a lot of guess work with template paths..
    – iwfabric
    Jan 6, 2020 at 15:45
  • Maybe for that one it'd be better to move the existing block inside the headercolumn3 block (<move element="minicart" destination="headercolumn3"/> and then use getChildHtml('minicart') in headercolumn3.phtml
    – brackfost
    Jan 6, 2020 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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