Introduction
You recently made a purchase of Multi Tenant Saas module of Bagisto. Now, you might want to do some tweaks in the theme for a particular tenant but when you directly make changes in some velocity theme files you end up messing it for other tenants also. So today in this tutorial, we’ll see the correct way how one can make changes in front end for a single tenant without messing other tenants. Let’s get started.
Basically there can be two ways to make changes in specific tenants.
- From the Admin End
- From the code it self
From the Admin End
Its a very easy process through which you can make changes on most of your stuff on home front. Let’s see how it works.
Step 1: Go to Admin Panel of your tenant.
Step 2: Go to settings -> Channel -> edit.
Step 3: You can change most of the settings like the logo or the home page content or the themes etc.
From the code
Now comes the real part. Imagine you want to create another theme or want to change the colors used in the current theme i.e velocity.
So in order to understand that, we are taking a situation.
A situation where you want to change the color of header or navbar used in velocity theme.
Step 1: Create a new package and add admin functionalities.
Here, I have created a package with a name webfonts and created the admin settings from where, the admin can change the colors and stuff of front.
If you want to learn how to create admin settings: https://devdocs.bagisto.com/1.x/packages/add_menu_in_admin.html
Step 2: Now in the package, create style.php
Create a style.php file inside:
Package Name -> src -> Resources -> views -> style.php
What will style.php do ?
In this file we will pick the colors of particular places for from end from admin (which we have created recently), and change those colors in css with a condition.
This is my style.php
Here, I have picked the colors from admin with a condition where if the colors from admin are not set, It will take the default colors.
Step 3: Call style.php from event service provider
Next step is to fire an event where your theme will pick up these settings whene the theme will be loaded on server.
Create an EventServiceProvider.php file in the same package:
Package Name -> Providers -> EventServiceProvider.php
In the above code I have rendered an event and called my style.php file.
Step 4: Register your event service provider to service provider
This is one very easy step and most of you have already know how to do that.
You just have to create a service provider and add your event service provider file in it.
And you are done, Now you can change the colors of header and navbar for a single tenant.
Note: While creating the configs and saving it to the database, always use an extra column to store the current company ID, So it will only work for your current tenant.
From Super Admin
The process through which the super admin can make changes in a particular tenant is almost same as shown above for Tenant’s Admins
But need to make some tweaks.
Create Super Admin Credentials same as the Admin.
Create super admin credentials with the fields:
- Tenant ID
- Brand Color
- Link Color
- Header Theme Color.
Well, in this case we have an extra field, in which we have to give an option to select the tenant with tenant’s ID.
Create a migration and database
Now we need to create Migration and Database in order to save our configured theme settings for a particular tenant.
- Migration fields include color codes and Tenant ID.
- Call the credentials to the style.php file ( You can use getSuperConfigData() function)
Fire the Event
- Lastly, fire the event to use style.php in the front end
Let’s check out a live example
We have a domain with the name bagsaas.com
We’ll create sub domains for tenants:
1. site1.bagsaas.com
2. site2.bagsaas.com
Now we’ll just change the color in the first tenant
site1.bagsaas.com
site1.bagsaas.com frontend
At the same time, no changes will be made to site2.bagsaas.com
Check out the screenshot below.
So that’s how you can make changes in one tenant without affecting the another one.
Be the first to comment.