Menyisipkan komponen(html) ke storefront magento 2 menggunakan plugin

Untuk kustomisasi website magento kita. Sering kali kita ingin menambahkan fitur di dalam magento, akan tetapi di dalam magento fitur yang kita inginkan tidak tersedia.

Karena itu kita bisa menambahkan sendiri fungsional tersebut dengan plugin.

Untuk tutorial ini, kita akan mencoba menambahkan komponen dibagian paling atas dari website kita.

promo diatas website magento
dari seperti ini
text diatas website magento
menjadi seperti ini

Membuat plugin

Kita buat dulu plugin kita, buat direktori <Nama Vendor>/<Nama plugin> di app/code (misal: app/code/Hprasetyou/InfoTop)

Tambahkan registration.php dan etc/module.xml di dalam plugin kita.

<?php
//registration.php
// sesuaikan Hprasetyou_InfoTop dengan vendor dan plugin anda

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Hprasetyou_InfoTop',
    __DIR__
);
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Hprasetyou_InfoTop" setup_version="0.1.0.2" />
</config>

Buat template untuk komponen kita

Kita membutuhkan template untuk ditampilkan. kita isi template tersebut dengan isi dari komponen kita.

Buat file template di app/code/<Nama Vendor>/<Nama plugin>/view/frontend/templates/html/info.phtml

<div style="background:teal;text-align:center;color:#fff">
    <p style="margin:0; padding:5px">Limited time offer!!! Shop now! 
    </p>
</div>

Lalu untuk menyisipkannya di frontend, kita harus membuat layout update yang mengoverride layout default magento. buat file xml di app/code/<Nama Vendor>/<Nama plugin>/view/frontend/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">
    <update handle="default_head_blocks"/>
    <body>
        <referenceContainer name="page.wrapper">
            <block class="Magento\Framework\View\Element\Template" name="infotop.content" before="-" template="Hprasetyou_InfoTop::html/info.phtml">
            </block>
        </referenceContainer>
        
    </body>
</page>

disini kita memanggil container page.wrapper. yaitu container yang berisi wrapper keseluruhan halaman, didalam container tersebut kita menyisipkan satu blok dengan posisi paling awal (ditunjukkan dengan before=”-“) dan kita memanggil template html/info.phtml dari plugin kita.

setelah selesai, buka terminal/cmd di direktori magento anda, jalankan php bin/magento cache:flush

2 thoughts on “Menyisipkan komponen(html) ke storefront magento 2 menggunakan plugin

Leave a Reply

%d bloggers like this: