Menambahkan static asset (css, js , image) ke plugin magento 2

Pada tutorial sebelumnya, kita membuat block dan menyisipkannya di layout frontend. Akan tetapi pada file template kita kita masih menggunakan inline css. Yang mana tentu saja kurang sedap dipandang dan akan membuat kode kita membingungkan jika sudah banyak. Maka dari itu kali ini kita akan menyisipkan css pada layout kita.

Buat direktori view/frontend/web/css pada module kita(jika belum ada). lalu kita bisa memasukkan file css kita pada direktori tersebut.

Anda juga dapat menggunakan less di direktori ini.

kira kira strukturnya akan jadi seperti ini:

Struktur file css plugin magento

Saya memindahkan style inline dari template saya ke file style.css:

/* app/code/Hprasetyou/InfoTop/view/frontend/web/css/style.css  */


.promo-container{
    background:teal;
    text-align:center;
    color:#fff;
}
.promo-container p{
    margin:0; padding:5px
}

Dan mengubah sedikit file template saya:

<!-- app/code/Hprasetyou/InfoTop/view/frontend/templates/info.phtml -->
<div class="promo-container">
    <p >Limited time offer!!! Shop now!</p>
</div>

Terakhir, jangan lupa kita panggil file css kita pada layout update. Tambahkan line ini pada file layout kita view/frontend/layout/default.xml pada sebelum tag <body/>

<head>
    <css src="Vendor_Plugin::css/style.css" />
</head>

berikut contoh file layout default.xml saya:

<?xml version="1.0"?>
<!--
 app/code/Hprasetyou/InfoTop/view/frontend/layout/default.xml
/**
 * 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">

    <head>
        <css src="Hprasetyou_InfoTop::css/style.css" />
    </head>
    <body>
        <referenceContainer name="page.wrapper">
            <block class="Magento\Framework\View\Element\Template" name="infotop.content" before="-" template="Hprasetyou_InfoTop::info.phtml">
            </block>
        </referenceContainer>
    </body>
</page>

Lalu kita flush cache untuk melihat perubahan terbaru dari plugin kita.

php bin/magento cache:flush

Buka browser dan inspect element (Ctrl+Shift+i pada chrome). Kita lihat bahwa kini magento juga menggunakan css dari plugin kita.

Menambahkan js

Lalu bagaimana jika kita ingin menambahkan file js? Sebenarnya sama seperti menambahkan file css. Hanya saja letaknya dan tag dalam layout yang berbeda.

Kita dapat menambahkan file js di dalam direktori view/frontend/web/js

Struktur file js plugin magento

Lalu didalam file xml layout pada tag <head> kita tambahkan tag untuk memanggil file js

<script src="Vendor_Plugin::js/app.js"/>
Struktur tag magento
contoh

Bagaimana dengan file image?

Untuk file image juga hapir sama, kita masukkan ke dalam view/frontend/web/images. Hanya saja untuk images tentu saja dipanggil/digunakan didalam file template atau file .phtml .

Untuk memanggilnya dalam file phtml tentu kita butuh path atau url dari image tersebut. Kita bisa mendapatkan path dengan script

<?= $this->getViewFileUrl('Vendor_Plugin::images/nama_file.png'); ?>

Demikian artikel ini semoga bermanfaat.

One thought on “Menambahkan static asset (css, js , image) ke plugin magento 2

Leave a Reply

%d bloggers like this: