Magento – magento2 frontend layout extending

layoutmagento2

I want to move search textbox and cart image to left side of top links.

For this i have created theme puma and specified parent as luma.
After customer login top links moved to dropdown. Now I want to move search textbox and cart image to left side of top links.

I have identified search textbox is coming from vendor/magento/module-search/view/frontend/templates/form.mini.phtml, and its layout default.xml in vendor/magento/module-search/ and its block name as topSearch.

so i have created Module_Search folder -> layout folder and default.xml file in app/design/frontend/puma.

And i wrote <move element="topSearch" destination="top.links" before="customer"/> but its not working.

Assume i was perfect till identifying block but i could not identify destination value, I have seen Magento_Theme->page_layout->1column.xml but could not identify.

Best Answer

I have reviwed your request Please follow below steps.

You need to create 'Search Module' folder under your puma theme and copy default.xml into layout

(e.g) puma > Magento_CatalogSearch > layout > default.xml

To move top.search you need to write following code in your (puma > Magento_CatalogSearch > layout > default.xml)

<move element="top.search" destination="header.panel" before="header.links"/>

To move minicart you need to write following code in your (puma > Magento_Checkout > layout > default.xml)

where header.panel is <referenceContainer> of header.links please review luma > Magento_Theme > layout > default.xml

<referenceContainer name="header.panel">
        <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
            <arguments>
                <argument name="css_class" xsi:type="string">header links</argument>
            </arguments>
        </block>
</referenceContainer>

or you can also write directly into (puma > Magento_Theme > layout > default.xml)

<move element="top.search" destination="header.panel" before="header.links"/>
<move element="minicart" destination="header.panel" after="top.search"/>

please let me know if it's not working.

Related Solutions

Magento 2 Top Link Position Adjustment

try this it helps you if it work accept the answer it help others

<?xml version="1.0"?>
<body>
  <referenceBlock name="header.links">
        <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link-new"  after="-">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Create an Account</argument>
            </arguments>
        </block>
        <block class="Magento\Framework\View\Element\Html\Link\Current" name="storelocator-link" after="register-link-new">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Title Link</argument>
                <argument name="path" xsi:type="string">link-uri</argument>
            </arguments>
        </block>
    </referenceBlock>
    <referenceBlock name="register-link" remove="true"/>


</body>

Magento 2 – Changing Custom Theme Default Layout

Neither your directory setup nor your code is wrong, the thing is there is no possibility to extend this configuration <page layout="..." on the theme level for now, this possibility may be added in upcoming releases.

So if you want to set 2columns-left layout you need to set it for all pages seperately, what I meant to say is: For Homepage you need to dive into your admin and select the CMS page which is being displayed on the homepage and open Design tab and select your desired layout.Screenshot will be attached

For Category page you have two options to set your desired layout, one is either you dive into admin and set layout from Design tab, but in that case you need to manually set design for each and every category and the other quicker way is that you create a new catalog_category_view.xml file at below path:

\Metal \bronze \Magento_Catalog \layout catalog_category_view.xml

with the code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body/> </page>

Remember to flush your cache, if your cache is enabled from the admin panel. And you will be getting expected output.

Similarly, you can set your desired layout for any page by targeting the xml file, for ex: catalog_product_view.xml in case of product detail page.

And if you are in dilemma, that for setting your desired layout for CMS homepage why we preferred to set up the layout from the admin panel rather then doing changes in the xml file, like we did for category and product then do let me know. Will clearify it for you.

Hope this helps you. If it does, then kindly upvote it. Thanks

Best Answer

Related Solutions

Magento 2 Top Link Position Adjustment

Magento 2 – Changing Custom Theme Default Layout

Related Topic