How to Load Contents from A Custom Phtml File for Magento 2.4?

First, we create the .phtml file, say footer_menu.phtml, and place it under add/design/Young/goggles/Magento_Theme/templates/. Add the following code:

<style>

* {
  box-sizing: border-box;
}
.category-swimming-goggles{
  background:#f4f4f4;
  margin-top:auto;
  padding-bottom:25px
 }

/* Container for flexboxes */
.row {
      display: flex;
      flex-wrap: wrap;
}

/* Create four equal columns */
.column ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.column li {
  padding: 0;
  margin-bottom: 7px;
  color: #000;

}

@media screen and (max-width: 900px) {
  .row {
    flex-direction: column;
  }

}


@media screen and (max-width: 1920px) {
 .footer.content .links {
   width:100%;
 }
.footer.content .block {
    float: inherit;
}
  .column {
    flex: 33%;
  }
}
 
  </style>
<div>
<div class="row">
<div class="column">
<h3><a href="https://www.perfectgoggles.com/">Goggles</a></h3>
<ul>
<li><a href="https://www.perfectgoggles.com/">Prescription Goggles</a></li>
</ul>
</div>
<div class="column">
<h3><a href="https://www.perfectgoggles.com/prescription-ski-goggles">Ski Goggles</a></h3>
<ul>
<li><a href="https://www.perfectgoggles.com/prescription-ski-goggles/">Prescription Ski Goggles</a></li>
</ul>
</div>
<div class="column">
<h3><a href="https://www.perfectgoggles.com/prescription-swimming-goggles">Swimming Goggles</a></h3>
<ul>
<li><a href="https://www.perfectgoggles.com/prescription-swimming-goggles/">Prescription Swimming Goggles</a></li>
</ul>
</div>

</div>
</div>

Next, edit default.xml, which is under add/design/Young/goggles/Magento_Theme/layout/. Add the following code to a proper place.

           <referenceContainer name="footer">
             <container name="goggles.container" as="gogglesContainer" label="Goggles Container" htmlTag="div" htmlClass="some-container">
               <block class="Magento\Framework\View\Element\Template" name="goggles_menu" template="Magento_Theme::footer_menu.phtml"></block>
             </container>
           </referenceContainer>

Run bin/magento c:f

Besides the basic html code we can add in a .phtml file, we also can add php code, say:

<?php echo '<a href="https://www.perfectgoggles.com/">Prescription Goggles</a>' ?>

We also can get the contents of a block, add the following code at your .phtml file:

  <?php
      echo $this->getLayout()
          ->createBlock(\Magento\Cms\Block\Block::class)
          ->setBlockId('footer_menu') 
          ->toHtml();
  ?>

Here, footer_menu is the Identifier of the block, which you plan to load the contens from.

Published
Categorized as PHP