Menambah Theme Baru di Bagisto – Kotak Kode Pemograman

Artikel ini dibuat pada Bagisto versi 2.2.3

Langkah Pertama Copy folder Shop yaitu:

packages\Webkul\Shop

paste menjadi nama folder baru atau nama theme yang mau di buat. mislkan Tokoku

packages\Webkul\Tokoku

2. Kemudian di folder Tokoku ganti semua namespace Webkul\Shop\… menjadi

namespace Webkul\Tokoku\...

Ganti nama file packages\Webkul\Tokoku\src\Providers\ShopServiceProvider.php menjadi packages\Webkul\Tokoku\src\Providers\TokokuServiceProvider.php

dan ganti nama class nya menjadi class TokokuServiceProvider

3. Langkah berikutnya tambahkan di commposer.json pada bagian key “psr-4” yang didalam key “autoload” seperti ini:

"autoload": {
        "psr-4": {
            .....
            "Webkul\\Tokoku\\": "packages/Webkul/Tokoku/src"

        }
    },

4. Pada file config/app.php yang ada di root project ya…! tambahkan kode pada bagian:

 'providers' => ServiceProvider::defaultProviders()->merge([
                .....
                Webkul\Tokoku\Providers\TokokuServiceProvider::class
    ])->toArray(),

5. Tambahkan juga pada file config/concord.php

<?php

return [

    'convention' => Webkul\Core\CoreConvention::class,

    'modules' => [

        ...
        \Webkul\Tokoku\Providers\ModuleServiceProvider::class,
    ],
];

6. Atur vite setting pada file vite.config.js yang ada di folder packages\Webkul\Tokoku menjadi

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig(({ mode }) => {
    const envDir = "../../../";

    Object.assign(process.env, loadEnv(mode, envDir));

    return {
        build: {
            emptyOutDir: true,
        },

        envDir,

        server: {
            host: process.env.VITE_HOST || "localhost",
            port: process.env.VITE_PORT || 5173,
        },

        plugins: [
            vue(),

            laravel({
                hotFile: "../../../public/shop-tokoku-vite.hot",
                publicDirectory: "../../../public",
                buildDirectory: "themes/shop/tokoku/build",
                input: [
                    "src/Resources/assets/css/app.css",
                    "src/Resources/assets/js/app.js",
                ],
                refresh: true,
            }),
        ],

        experimental: {
            renderBuiltUrl(filename, { hostId, hostType, type }) {
                if (hostType === "css") {
                    return path.basename(filename);
                }
            },
        },
    };
});

7. Pada file config/theme.php masih di config root mejadi:

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Shop Theme Configuration
    |--------------------------------------------------------------------------
    |
    | All the configurations are related to the shop themes.
    |
    */

    'shop-default' => 'default',

    'shop' => [
        'default' => [
            'name'        => 'Default',
            'assets_path' => 'public/themes/shop/default',
            'views_path'  => 'resources/themes/default/views',

            'vite'        => [
                'hot_file'                 => 'shop-default-vite.hot',
                'build_directory'          => 'themes/shop/default/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
        'tokoku' => [
            'name'        => 'tokoku',
            'assets_path' => 'public/themes/shop/tokoku',
            'views_path'  => 'resources/themes/tokoku/views',

            'vite'        => [
                'hot_file'                 => 'shop-tokoku-vite.hot',
                'build_directory'          => 'themes/shop/tokoku/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Admin Theme Configuration
    |--------------------------------------------------------------------------
    |
    | All the configurations are related to the admin themes.
    |
    */

    'admin-default' => 'default',

    'admin' => [
        'default' => [
            'name'        => 'Default',
            'assets_path' => 'public/themes/admin/default',
            'views_path'  => 'resources/admin-themes/default/views',

            'vite'        => [
                'hot_file'                 => 'admin-default-vite.hot',
                'build_directory'          => 'themes/admin/default/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
    ],
];

8. Langkah berikutnya pada file packages\Webkul\Tokoku\src\Providers\StoreServiceProvider.php

ubah loader pada bagian komentar /* loaders */

 $this->loadTranslationsFrom(__DIR__.'/../Resources/lang', 'shop');
 $this->loadViewsFrom(__DIR__.'/../Resources/views', 'shop');

menjadi…

 $this->loadTranslationsFrom(__DIR__.'/../Resources/lang', 'tokoku');
 $this->loadViewsFrom(__DIR__.'/../Resources/views', 'tokoku');

kemudian replace semua text yang ada di folder Tokoku @lang('shop:: menjadi @lang('tokoku:: dan replace juga semua text trans('shop:: menjadi trans('tokoku::

tambahkan kode pada bagian alias lihat komentar /* aliases */

        $this->publishes([
            __DIR__ . '/../Resources/views' => resource_path('themes/tokoku/views'),
        ]);

Ketika di jalankan perintah php artisan vendor:publish –force maka akan otomatis dibuat file di resource/views/themes/tokoku/views

9. Pada folder routes packages\Webkul\Tokoku\src\Routes\breadcrumbs.php ganti shop.customer menjadi tokoku.customer, menjadi seperti ini:

<?php

use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

/**
 * Profile routes.
 */
Breadcrumbs::for('tokoku.customer.profile.index', function (BreadcrumbTrail $trail) {
    $trail->push(trans('shop::app.customer.account.profile.index.title'), route('tokoku.customer.profile.index'));
});

Breadcrumbs::for('tokoku.customer.profile.edit', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.profile.index');
});

/**
 * Order routes.
 */
Breadcrumbs::for('tokoku.customer.orders.index', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.profile.index');

    $trail->push(trans('shop::app.customer.account.order.index.page-title'), route('tokoku.customer.orders.index'));
});

Breadcrumbs::for('tokoku.customer.orders.view', function (BreadcrumbTrail $trail, $id) {
    $trail->parent('tokoku.customer.orders.index');
});

/**
 * Downloadable products.
 */
Breadcrumbs::for('tokoku.customer.downloadable_products.index', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.profile.index');

    $trail->push(trans('shop::app.customer.account.downloadable_products.title'), route('tokoku.customer.downloadable_products.index'));
});

/**
 * Wishlists.
 */
Breadcrumbs::for('tokoku.customer.wishlist.index', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.profile.index');

    $trail->push(trans('shop::app.customer.account.wishlist.page-title'), route('tokoku.customer.wishlist.index'));
});

/**
 * Reviews.
 */
Breadcrumbs::for('tokoku.customer.reviews.index', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.profile.index');

    $trail->push(trans('shop::app.customer.account.review.index.page-title'), route('tokoku.customer.reviews.index'));
});

/**
 * Addresses.
 */
Breadcrumbs::for('tokoku.customer.addresses.index', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.profile.index');

    $trail->push(trans('shop::app.customer.account.address.index.page-title'), route('tokoku.customer.addresses.index'));
});

Breadcrumbs::for('tokoku.customer.addresses.create', function (BreadcrumbTrail $trail) {
    $trail->parent('tokoku.customer.addresses.index');

    $trail->push(trans('shop::app.customer.account.address.create.page-title'), route('tokoku.customer.addresses.create'));
});

Breadcrumbs::for('tokoku.customer.addresses.edit', function (BreadcrumbTrail $trail, $id) {
    $trail->parent('tokoku.customer.addresses.index');

    $trail->push(trans('shop::app.customer.account.address.edit.page-title'), route('tokoku.customer.addresses.edit', $id));
});

10. Instal node js dengan perintah npm install pada folder package Tokoku yaitu packages\Webkul\Tokoku\src\ jika sudah ter install bisa jalankan npm run build

dengan run build maka aka di buat folder build di \public\themes\shop\tokoku\build\

Untuk merubah theme masuk di menu admin Settings>>Channels>>Theme pilih Tokoku

Related Posts

Leave a Reply Cancel reply