How to Make a Custom Module in Bagisto (Step by Step Guide)

Bagisto module development is a great way to improve and customize your eCommerce store without modifying the core files.

In this easy to follow guide, you will discover how to create a custom module in Bagisto from the ground up.

The steps are made to be straightforward, even for those just starting, and they follow a modular style so that each feature can work on its own.

In this guide, we will go through every step of Bagisto module development.

Including setting up the module, organizing folders, configuring settings, and basic implementation.

Bagisto Module Development Guide: Step by Step

Here, we will explain step by step how you can create a custom module in Bagisto.

Step 1: Create Package Structure

Inside the packages folder of Bagisto, create a folder of your company namespace and inside it, create a folder with your package name.

Ex : packages/ACME/HelloWorld

Step 2: Create package.json

Inside your package, create a package.json file to define configuration and dependencies.

If you want to do it quickly via terminal, you can also run:

This automatically generates a basic package.json file for you.

Step 3: Create Service Provider

Create an src folder inside HelloWorld. Next, create a Providers folder inside src and add a file named PackageNameServiceProvider.php.

Ex : HelloWorldServiceProvider.php

The HelloWorldServiceProvider.php file mainly contains two methods: boot() and register().

1. Boot
2. Register

Step 4: Register Service Provider

Register your package’s service provider in the bootstrap/providers.php file located in the root directory of your Bagisto application.

Add the following line Webkul\HelloWorld\Providers\RMAServiceProvider::class, just like other Bagisto service providers:

Step 5: Composer Autoload Setup

Next, add your package to the composer.json file in the project root directory for PSR 4 autoloading.

Open the composer.json file and add the following line under the psr 4 section.

Step 6: Routes Setup

Now we are going to add some routing & views to our package.

For routes, create an Http folder inside the src directory of your package. Then, create a routes.php file inside the Http folder.

This file defines your package routes and lets you organize them into admin, shop, or separate folders.

Next, register the route file inside the boot() method of HelloWorldServiceProvider.php.

You can also use the loadRoutesFrom() method to load route files in a cleaner and more structured way.

Step 7: Create View Route

Next, create a route and render a view for it. Inside the routes.php file, add a simple route that loads the helloworld.blade.php view.

This loads a Bagisto Blade view from your module.

Now, open the hello world URL in your browser to view the output.

Step 8: Language Support

Create a lang folder inside Resources and add language folders like en and hi for translations.

For now, create an en folder inside the lang directory and add an app.php file inside it.

Next, register the language files in the service provider, just as you registered the routes earlier.

Now we can write a translation in this file like below.

Add {{ __('helloworld::app.hello world.name') }} in your Blade file to auto translate text based on the selected language.

This enables Bagisto multi language translation support, allowing content to adapt to different languages automatically.

Step 9: Views & Assets Setup (CSS/JS)

Create a Resources folder inside the src directory of your package. Then, create a views folder inside Resources to store your package view files.

Next, create a helloworld folder inside:

Next, add CSS support to your package. For this, create a package.json file and a webpack.mix.js file in the root directory of your package.

Inside the src/Resources directory, create an assets/sass folder and add an app.scss file inside it.

The app.scss file contains the SASS styles for your package, while the package.json file stores the npm dependencies.

Create a webpack.mix.js file to compile your package assets.

The package.json file contains your project dependencies and configuration settings.

The webpack.mix.js file contains the asset compilation configuration for your package.

All dependencies can be updated as per your requirements.

Go to the package root and run npm install to install dependencies. After that, run npm run watch to compile and publish the CSS files

Similarly, you can add JavaScript and images by creating js and images folders inside the Resources/assets directory.

Add the app.js file inside the js folder and store your required images inside the images folder.

Next, publish these files just like the CSS files by adding their configuration to the webpack.mix.js file.

Run npm run watch again to compile the assets.

Next, add an event listener in the service provider to load the CSS in the admin layout.

Then, create a layouts folder inside views and add a style.blade.php file to include the compiled CSS path.

For Event Listener 

Now, extend admin::layouts.master inside your package views to load and apply your package CSS.

Step 10: Database (Migrations)

Next, add database support to your package. Create a Database folder inside the src directory, then create Migrations and Seeders folders inside it.

Create the required tables inside Migrations and add seeders inside the Seeders folder. Then, register the migrations in the service provider.

These are the basic steps to create a custom package in Bagisto.

Step 11: Controllers

For controllers, create a Controllers folder inside the Http directory and add a base Controller.php file.

You can create all your package controllers inside this folder.

Step 12: Admin Menu Integration

Next, add a menu to the admin panel. Create a Config folder inside src and add a menu.php file inside it.

In this file, define the menu name, route, and icon class. Next, create a controller for the specified route.

Inside the Controllers folder, create a HelloWorldController.php file.

For the route, we will create a named route as

After creating the controller and route, merge menu.php into the Bagisto admin menu using mergeConfigFrom().

This adds your module inside the bagisto admin menu.

NOTE:

Once your package is set up, you can start building its functionality.

As this allows you to understand each component registration process step by step – such as routes, views, models, and controllers etc.