Membuat theme magento 2

Untuk mengkustomisasi tampilan magento agar sesuai keinginan dan kebutuhan kita, bisa kita lakukan dengan membuat tema baru pada aplikasi magento kita.

Selain itu, tema juga berguna untuk menyeragamkan tampilan dari modul modul bawaan maupun external yang mungkin kita install di magento kita.

buat folder di app/design/frontend/<nama_vendor>/<nama_tema>
contoh: app/design/frontend/Hpu/restaurant

setelah itu buat file theme.xml didalam folder themes kita

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Restaurant theme</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

pada tag title kita masukkan judul kita, lalu pada tag parent kita isi dengan tema yang ingin kita inherit, disini saya isi dengan magento/blank. jadi nanti tema kita sudah memiliki style dan pengaturan layout dari magento blank theme. Jika tidak ingin inherit dari tema lain, kita kosongi saja.

Untuk preview image jangan lupa kita juga tambahkan di folder media (gambar apa saja)

tambahkan juga file registration.php

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Hpu/restaurant',
    __DIR__
);

dan juga composer.json

{
    "name": "hpu/restaurant",
    "description": "N/A",
    "require": {
        "php": "~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.1.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

nantinya struktur folder kita akan seperti ini:

Untuk mengecek tema kita, masuk ke halaman admin, content -> design -> themes

Untuk mengaplikasikan tema kita kita masuk ke halaman content -> design -> configuration, lalu pilih storeview mana yang ingin diubah temanya.

tema kita tentunya masih sama dengan tema magento blank, karena kita belum menambahkan layout update, css, js, dsb.

3 thoughts on “Membuat theme magento 2

Leave a Reply

%d bloggers like this: