Override template magento 2 / mengubah template bawaan

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.

Tampilan sebelum kita melakukan Override template magento
tampilan awal

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.

Tampilan setelah kita mengubah form newsletter dengan override template magento
setelah di pindah

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:

Layout magento
(disini saya copas dari template default dan menambahkan kata “subscribe to our newsletter” )

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;
}
Mengubah tampilan magento newsletter

Jangan lupa untuk melakukan cache:flush setelah melakukan perubahan.

Demikian artikel tentang cara untuk melakukan override template magento. Semoga bermanfaat dan terus semangat belajar.

Leave a Reply

%d bloggers like this: