With static blocks, it is possible to add content to pages that you can manage through the Magento backend. There are two ways to add a static block to your page. In this recipe, we will see how to add a static block through layout XML.
To add a static block to a page, you need to know on which page you want this block to be displayed and in what block or container.
This recipe shows you how to add a static block to the footer on all pages, based on the theme created in the Creating a new theme recipe of this chapter:
- Create a new static block through the Magento backend. Go to the Content menu option and select Blocks under the Elements menu. Next, click on the Add New Block button to create a new block. Create the block with the content you want and click on Save Block:
- To add this block to the footer of your theme on all pages, it should be added to the
Magento_Theme default.xmllayout file:app/design/frontend/Genmato/default/Magento_Theme/layout/default.xml<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/genmato.svg</argument> <argument name="logo_img_width" xsi:type="number">372</argument> <argument name="logo_img_height" xsi:type="number">84</argument> </arguments> </referenceBlock> <referenceBlock name="report.bugs" remove="true"/> <referenceContainer name="footer"> <block class="MagentoCmsBlockBlock" name="footer-sample"> <arguments> <argument name="block_id" xsi:type="string">footer-sample</argument> </arguments> </block> </referenceContainer> </body> </page> - After uploading the file to your Magento installation, refresh the cache:
bin/magento cache:clean
- Open your browser and (re)load the website to check whether your content is now visible on the website.
The code in this recipe adds the created block to the referenced footer container; here, we add a new block with the MagentoCmsBlockBlock class and pass an argument with block_id of the created block. The block_id specified must match the Identifier used when creating the block.
To add a block to a single page, for example, before the Contact Us form, create a new file, app/design/frontend/Genmato/default/Magento_Contact/layout/contact_index_index.xml, and add the following content:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="MagentoCmsBlockBlock" name="contact-sample" before="contactForm">
<arguments>
<argument name="block_id" xsi:type="string">[your block identifier]</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>In order to have the created block before the form, we reference the content area and add the block with specifying the before argument.