Override an existing Magento block template
Sometimes you just need to completely override a template, past what is possible with a translation string. Let’s remove our i18n translations completely to give us the default text back for this wish list sidebar.
When we refresh our page, we’ll see the standard “You have no items in your wish list” message. Let’s add a “Browse for items” link that goes to the home page, in the event no items are in the wishlist. To do this we will need to override this wishlist sidebar block template.
Our first step is to copy the file from the other module into our module. We want to be careful with how these files are named though.
Since this sidebar.phtml
file is in the template root of the Wishlist module, let’s go ahead and create a subdirectory under templates named wishlist
. Then within here, we can create our sidebar.phtml
file. If we didn’t do this, this sidebar.phtml
would have some ambiguity to the post/sidebar.phtml
file already in our module.
Next we can copy & paste the contents of the wishlist sidebar over to our new wishlist/sidebar.phtml
file.
Then, we can make our changes to this template. Since I already have this coded up, I’m going to paste the link in here to save some time.
... <!-- ko ifnot: wishlist().counter --> <div class="empty"><?= $block->escapeHtml(__('You have no items in your wish list.')) ?></div> <div> <a href="<?= $block->escapeUrl($this->getBaseUrl()) ?>" title="<?= $block->escapeHtmlAttr(__('Browse for items')) ?>"> <span><?= $block->escapeHtml(__('Browse for items')) ?></span> </a> </div> <!-- /ko -->
This just adds a “Browser for items” link to the page.
We created our template file, but Magento doesn’t yet know it exists. So let’s make our template file apply to this blog post detail view by making updates to our blog_post_detail.xml
file.
view/frontend/layout/blog_post_detail.xml
We’ll start by using referenceBlock
again, and then we will reference the name of the original layout XML block. Looking back at vendor/magento/module-wishlist/view/frontend/layout/default.xml
, we know this is wishlist_sidebar
, so the name
attribute of our referenceBlock
container will be wishlist_sidebar
. Now we just need to override the template for this block, so let’s create a new template
attribute and set it to the location of our new template. The value for this will be Macademy_Blog
, followed by two colons, and then wishlist/sidebar.phtml
.
<referenceBlock name="wishlist_sidebar" template="Macademy_Blog::wishlist/sidebar.phtml"/>
Now when we save & refresh our page, the new template will take effect, and our “Browse for items” link will take us to the home page.