1

how should I create a custom layout file , custom container and add custom blocks to containers? I dont know where to place which one. can anybody give an example of adding a block that says "hello" to the container using custom layout I am new to magento. I am learning! please help

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framewrk:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="page.wrapper">

<container name="header.container" as="header.container" label="Pag Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>

<container name="page.top" as="page_top" label="After Page Header" after="header.container"/>


<container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />


</referenceContainer>
</layout>

I created a E:\xampp\htdocs\magento-2\app\design\frontend\vendor\my_new_theme\Magento_Theme\page-layout\test-layout.xml and registered in E:\xampp\htdocs\magento-2\app\design\frontend\vendor\my_new_theme\Magento_Theme\layouts.xml where should my blocks go?

3

After adding your custom theme , you can place your custom code in default.xml

/app/design/frontend/yourvendor/yourtheme/Magento_Theme/layout/default.xml

For Custom container: <container name="test.container" as="testContainer" label="test Container" htmlTag="div" htmlClass="test-container" />

For adding/removing something from test container use referenceContainer :

For example you have some content says " hello" in hello-block.html placed in Magento_Theme module then call the file in your custom container.

<referenceContainer name="test.container">
<block class="Magento\Framework\View\Element\Template" name="hello-block" template="Magento_Theme::hello-block.phtml"/></referenceContainer>

For removing something , for ex Remove whishlist:

<referenceContainer name="wishlist_sidebar" remove="true" />

For adding content through admin block and then calling block in html file use

{{block class="Magento\\Cms\\Block\\Block" block_id="hello-block"}}</div>

For calling static resources , your custom css and js adding bootstrap, call files in default_head_blocks.xml

app/design/frontend/yourvendor/yourtheme/Magento_Theme/layout/default_head_blocks.xml

<css src="css/bootstrap.css" />
<script src="js/bootstrap.js"></script>

Place both files under /app/design/frontend/yourvendor/yourtheme/web/css or js

Remove existing css and js

<remove src="css/styles-m.css" />

I hope these things will help you to some extent

0

Follow this link https://webkul.com/blog/create-hello-module-in-magento2/.. I have learnt from the website and follow each and every step. It works well.

  • this is clear!!! But I wanted to create my own layout design..!! how come i do this?? – learner Jun 27 '17 at 5:06

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.