How to move top link into container magento2 năm 2024
|
I know this is old, but I landed while searching for the same issue, so figured my solution might help someone else. This is for 2.4.1. Show In our custom theme, I had to move top.search into the custom header block (in app/design/frontend/[theme_name]/default/Magento_Theme/layout/default.xml): That custom.header block had it's own .phtml template file (app/design/frontend/[theme_name]/default/Magento_Theme/templates/html/custom-header.phtml) where I added this code to get it to show up in the right place. Note that we have to use topSearch here, and not top.search (I have no idea why the name changes from top.search): This article features a step-by-step illustration of how a real-life layout customization task is performed. Namely, it illustrates how to change the layout of customer account links in a store page header. Move customer account linksIn their Orange theme, ExampleCorp wants to transform the header links block to a drop-down, the way it is done in the Luma theme: To do this, they need to wrap the list of header links with a container and add a greeting with a drop-down arrow before the list. The Orange theme inherits from Blank, so by default the rendered header links look like following: Copied to your clipboard The markup required for the drop-down is the following: Copied to your clipboard Step 1: Define the layout blocksExampleCorp applies the Luma theme. Using the approach described in Locate templates, layouts, and styles they find out that the original block responsible for displaying the header links is defined in
Copied to your clipboard
(See on GitHub). Other modules use this block to add their specific links to the header using the instruction. For example, see how links are added in the Customer module: The Luma theme the Copied to your clipboard 0 block to the new Copied to your clipboard 1 block in the extending layout file. Copied to your clipboard 2 Copied to your clipboard
... ... The links that should be in header, but outside the drop-down menu are added in the new Copied to your clipboard 3 block ( Copied to your clipboard 4): Copied to your clipboard
Step 2: Define the templatesSimilar to the way they defined the layout on the previous step, ExampleCorp defines the template which is used as the drop-down container : Copied to your clipboard 5. Copied to your clipboard customerLoggedIn()): ?> Step 3: Extend the base layout to add a blockExampleCorp needs to create a new block, say, Copied to your clipboard 3, in the Copied to your clipboard 7 container, to move the links there. As the links can be added to this list by different modules, it is better to add this block to the Copied to your clipboard 8 page configuration of the Copied to your clipboard 9 module. So the following extending layout is added in the Orange theme: Copied to your clipboard
0 Copied to your clipboard
Step 4: Move linksTo move the links to the Copied to your clipboard 3 block, ExampleCorp adds an extending layout: Copied to your clipboard
2 Copied to your clipboard
Now the customer links look like following: Copied to your clipboard
3 CSS class: To add quick basic styling and visual behavior to the "dropdown" menu, ExampleCorp added _extend.less to their theme with the following customizations:
Step 3: Flush cache and test your Top link result.. From the configuration menu, select General -> Web :. Open the secure and unsecure dropdown sections from the page:. Now, insert the correct URL configuration in the base_url input box and click on Save Config.. Go to System > Configuration.. In the left menu pane under “General” select “Design”.. Click on the “Footer” section in the center of your browser screen to open it.. Under the “Copyright” section type in your new custom copyright information.. |
