CODEWITHSUNDEEP
laravelthemese-commerce
Mukesh Khatri
Mukesh Khatri

Reputation: 83

Laravel Bagisto custom theme Vite problum (Images not render)

I am trying to create custom theme for my Laravel Bagisto2.0 store, I have followed Bagisto2.0 official Doc for creating custom theme.

I am using Bagisto2.1.2 version.

I have done every thing as they mentioned, the theme has been changed successfully but on home page I am getting this error in console "Uncaught Error: Extension Error: The validator 'all' must be a function."

I think this is Vite error. I am not getting any error in laravel logs file.

I tried to create custom theme in laravel bagisto.

It is my package repository on GitHub ( https://github.com/mukeshkhatri3037/bagisto-laravel-wtshop )

I follow these sources:

https://www.youtube.com/watch?v=K3FdBDsXAH8

https://bagisto.com/en/create-custom-theme-in-bagisto/

I have follow these steps :

Step 1 : I have cloned the Shop package and modify the changes requested for my new one As we have created by the name of WtShop.

Step 2 : The vite setup inside my new package in the vite.config.js file as shown below

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/wtshop-wtshop-vite.hot",
                publicDirectory: "../../../public",
                buildDirectory: "themes/shop/wtshop/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);
                }
            },
        },
    };
});

Step 3 : I have added new theme config in config/themes.php file as below

<?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',
            ],
        ],
        // This is my theme
        'wttheme' => [
            'name'        => 'wttheme',
            'assets_path' => 'public/themes/shop/wtshop',
            'views_path'  => 'resources/themes/wttheme/views',

            'vite'        => [
                'hot_file'                 => 'wtshop-wtshop-vite.hot',
                'build_directory'          => 'themes/shop/wtshop/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',
            ],
        ],
    ],
];

Step 4 : Add package in composer.json file into autoload array :

"Webkul\\WtShop\\": "packages/Webkul/WtShop/src",

Setp 5: Add ModuleServiceProvider into config/concord.php file :

\Webkul\WtShop\Providers\ModuleServiceProvider::class,

Step 6 : Add WtShopServiceProvider in config/app.php file inside providers array :

Webkul\WtShop\Providers\WtShopServiceProvider::class,

Step 7 : Changes in bagisto/packages/Webkul/WtShop/src/Routes/breadcrumbs.php file because when run composer dump-autoload command getting error 'Breadcrumb name "shop.customer.profile.index" has already been registered' :

<?php

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step 8 : Override the view files inside new package by WtShopServiceProvider ::

<?php

namespace Webkul\WtShop\Providers;

use Illuminate\Pagination\Paginator;
use Illuminate\Routing\Router;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\ServiceProvider;
use Webkul\Core\Tree;
use Webkul\Shop\Http\Middleware\AuthenticateCustomer;
use Webkul\Shop\Http\Middleware\Currency;
use Webkul\Shop\Http\Middleware\Locale;
use Webkul\Shop\Http\Middleware\Theme;

class WtShopServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot(Router $router)
    {
        /* loaders */
        Route::middleware('web')->group(__DIR__.'/../Routes/web.php');
        Route::middleware('web')->group(__DIR__.'/../Routes/api.php');

        $this->loadMigrationsFrom(__DIR__.'/../Database/Migrations');
        // I have changed from shop to wtshop this
        $this->loadTranslationsFrom(__DIR__.'/../Resources/lang', 'wtshop');
        $this->loadViewsFrom(__DIR__.'/../Resources/views', 'wtshop');

        /* aliases */
        $router->aliasMiddleware('currency', Currency::class);
        $router->aliasMiddleware('locale', Locale::class);
        $router->aliasMiddleware('customer', AuthenticateCustomer::class);
        $router->aliasMiddleware('theme', Theme::class);

        $this->publishes([
            dirname(__DIR__).'/Config/imagecache.php' => config_path('imagecache.php'),
        ]);

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

        /* View Composers */
        $this->composeView();

        /* Paginator */
        Paginator::defaultView('shop::partials.pagination');
        Paginator::defaultSimpleView('shop::partials.pagination');

        Blade::anonymousComponentPath(__DIR__.'/../Resources/views/components', 'shop');

        /* Breadcrumbs */
        require __DIR__.'/../Routes/breadcrumbs.php';

        $this->app->register(EventServiceProvider::class);
    }

    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        $this->registerConfig();
    }

    /**
     * Bind the the data to the views.
     *
     * @return void
     */
    protected function composeView()
    {
        view()->composer('shop::customers.account.partials.sidemenu', function ($view) {
            $tree = Tree::create();

            foreach (config('menu.customer') as $item) {
                $tree->add($item, 'menu');
            }

            $tree->items = core()->sortItems($tree->items);

            $view->with('menu', $tree);
        });
    }

    /**
     * Register package config.
     *
     * @return void
     */
    protected function registerConfig()
    {
        $this->mergeConfigFrom(
            dirname(__DIR__).'/Config/menu.php',
            'menu.customer'
        );
    }
}

Step 9 : Run npm Commands

1. npm install

Output is : enter image description here

2. npm run build

Output is :

enter image description here

Step 10 : Run php artisan vendor:publish --force command output :

enter image description here

Step 11 : Select theme in Channel and save changes :

enter image description here

The theme is saved successfully, but when I hit base url I am getting this error in console :

Step 11 : Hit base url on browser :

I am getting js error in console

Uncaught Error: Extension Error: The validator 'all' must be a function.
    guardExtend vee-validate.esm.js:100
    defineRule vee-validate.esm.js:84
    install vee-validate.js:45
    install vee-validate.js:44
    use runtime-core.esm-bundler.js:2984
    <anonymous> app.js:91
    <anonymous> app.js:91

enter image description here

I can't found What is missing

Thank you !

Upvotes: 1

Views: 330

Answers (2)

Talip Korkmazer
Talip Korkmazer

Reputation: 160

In your file at packages/Webkul/WtShop/src/Resources/assets/js/app.js (line 18), update the import statement for @vee-validate/rules from:

import * as AllRules from '@vee-validate/rules';

to

import { all as AllRules } from '@vee-validate/rules';

This change correctly imports all the rules under the alias AllRules.

You can find more info on this issue here: GitHub Issue #4833.

Upvotes: 0

Devansh
Devansh

Reputation: 48

In the latest version of vee-validate, there have been some changes. To address this, you have two solutions:

  • Either you can downgrade the vee-validate dependency.

  • Or you can make some code changes to support the latest version, similar to what we did. For reference, you can check this pull request: Bagisto Pull Request #9896.

Upvotes: 0

Related Questions