Dalam templating, tentu terkadang kita ingin menggunakan struktur html sesuai keinginan untuk membuat tampilan yang kita inginkan. Karena itu kita perlu melakukan override template magento.
Override layout xml
Tiap halaman atau controller di magento biasanya memiliki layout update xml mereka sendiri. selain itu mereka juga menggunakan layout default.xml. kita akan mencoba menggunakan layout default.xml untuk mengubah tata letak dan html dari block subscribe newsletter yang berada di footer.
kita akan agak menaikkan posisi blok newsletter subscribe. Kita lakukan dengan menambahkan file layout default.xml di template kita.
Pertama, kita tentu saja butuh tema. Anda bisa membuatnya jika anda belum memiliki tema anda sendiri: https://blog.hprasetyou.com/membuat-theme-magento-2/ (jangan mengedit langsung tema bawaan magento yang ada di vendor, jika ada update, perubahan anda bisa hilang. Lebih baik membuat tema sendiri).
Block newsletter subscribe bawaan magento di kelola oleh plugin Magento Newsletter. Jika kita jelajahi, plugin ini berada di vendor/magento/magento-newsletter.(jangan mengubah file file di direktori ini). Kita bisa menemukan file layout dan template di direktori ini sebagai referensi.
Buat file layout di app/design/frontend/{Vendor_anda}/{Nama_tema}/Magento_Newsletter/layout/default.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<move element="form.subscribe" destination="main.content" after="-" />
</body>
</page>Kita bisa lihat kita menambahkan tag move yang berarti pindahkan. Dengan tag ini kita memindahkan block dengan nama form.subscribe yang sebelumnya berada di footer ke dalam block main.content. after=”-“ menandakan bahwa kita ingin menaruhnya di paling bawah.
Mengubah template block
Jika kita menjelajahi plugin magento-newsletter dan melihat layoutnya, kita dapati bahwa template yang mereka gunakan untuk block newsletter adalah Magento_Newsletter::subscribe.phtml. Kita bisa melakukan override dengan membuat file yang sama di template kita.
maka file kita akan berada di: app/design/frontend/{Vendor_anda}/{Nama_tema}/Magento_Newsletter/templates/subscribe.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var \Magento\Newsletter\Block\Subscribe $block */
?>
<div class="block newsletter">
<div class="content">
<h4><?= $block->escapeHtml(__('Subscribe to our newsletter')) ?></strong></h4>
<form class="form subscribe"
novalidate
action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"
method="post"
data-mage-init='{"validation": {"errorClass": "mage-error"}}'
id="newsletter-validate-detail">
<div class="field newsletter">
<label class="label" for="newsletter"><span><?= $block->escapeHtml(__('Sign Up for Our Newsletter:')) ?></span></label>
<div class="control">
<input name="email" type="email" id="newsletter"
placeholder="<?= $block->escapeHtml(__('Enter your email address')) ?>"
data-mage-init='{"mage/trim-input":{}}'
data-validate="{required:true, 'validate-email':true}"/>
</div>
</div>
<div class="actions">
<button class="action subscribe primary" title="<?= $block->escapeHtmlAttr(__('Subscribe')) ?>" type="submit">
<span><?= $block->escapeHtml(__('Subscribe')) ?></span>
</button>
</div>
</form>
</div>
</div>
Setelah mengubah template:
Anda juga bisa menambahkan css atau file less:
.newsletter.block{
background-image: url('../images/bg-newsletter.jpg');
background-size: cover;
width: 100% !important;
margin-bottom: 0;
padding: 20px 0;
}
.newsletter.block .content{
max-width: 500px;
margin: auto;
text-align: center;
color: #fff;
}
Jangan lupa untuk melakukan cache:flush setelah melakukan perubahan.
Demikian artikel tentang cara untuk melakukan override template magento. Semoga bermanfaat dan terus semangat belajar.