Addons
DocumentAPI ReferenceAdd-ons

Admin and Vendor Chat Addon

Installation of Spurtcommerce Admin and vendor chat add-on

This document will help you to install Admin and vendor chat add-on to your spurtcommerce server for single vendor as well as multi vendor

Server setup

Include variable 'SOCKET_PORT' in ENV configuration File

Eg: SOCKET_PORT=8001

In apache configuration specify/include below ProxyPass rules inside virtual host in 000-default.conf

Step -1:

$ cd /etc/apache2/sites-available/
$ sudo nano 000-default.conf

Step-2: Add the following rules below

<Location /chat>
ProxyPass http://127.0.0.1:8001
ProxyPassReverse ws://127.0.0.1:8001
</Location>

In general port is set to 8001 - can be customized and make sure that env's 'SOCKET_PORT' number and Proxy's port number are same.

Setup an API (Step By Step)

For setting up the API, you need to execute the following steps:

  • Installing an extension

  • Run the application

  • Make the build

Step -1 : Installing an extension

These are the steps that need to be executed for installation of the extension.

Usually spurcommerce comes packed in a zip, whose name ends in " Admin-and-vendor-chat-addon.zip". Extract the zip file, open api folder and open addon folder within that and copy the content of addon folder into the specified path

Path - <PROJECT_ROOT>/addon

Step-2 : Run the application

After you have completed the installation of the above mentioned steps, you can run the application and also view the changes.

$ npm start serve

Once you execute the above command, add-on file will get integrated into the backend API.

Step-3 : Make the build

These are the steps that need to be followed for generating the build.

To run the below command

 $ npm run build

Then latest built files can be deployed into the server.

Admin Setup

These are the steps that need to be executed for installation of the extension.

  • Installing an extension

  • Update the configuration

  • Module Detail

  • Run the application

  • Make the build

Step-1 : Installing an extension

These are the steps that need to be executed for installation of the extension.

Usually spurcommerce comes packed in a zip, whose name ends in "chat.addOn.zip".

Extract the zip file and copy the content of admin/add-ons folder into the specified path

Path - admin/add-ons

Step 2 : Update the configuration

After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below. 

npm install socket.io-client@4.6.1

npm install uuidv4@6.2.13

  1. Add these component name below the file admin.module.ts

Inside the /src/theme/default/admin/admin.module.ts 

import { ChatconversationComponent } from '../../../../add-ons/chat/chatconversation/chatconversation.component';

declarations: [

ChatconversationComponent

]

Step 3 : Change the routing file(admin-routing.module.ts)

Inside the src/theme/default/admin/admin-routing.module.ts

If the point one already exists in your file, skip point one

  1. Import below line

import * as chatRoutes from'../../../../../../../add-ons/chat/chat.routing';

  1. Add these routes below the appRoutes array

appRoutes[0].children?.push(chatRoutes[0]);

For setting up the tab add this line in

ssrc/theme/default/admin/shared/components/profile-bar/profile.bar.component.html

Below line no=29

<li *ngIf="isShowChat">

<button class="chats" [routerLink]="['/chatconversation']"> <img src="assets/imgs/chats.svg" alt="" > <span>{{getCount()}}</span> </button>

</li>

Step 4 : Run the application

After you have integrated the chat Module into Spurtcommerce, you can use the following command to run the application. 

 npm run large-serve

Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.

Step 5 : Make the build

To run the below command

 npm run large-build

Then the latest built files can be deployed into the server.

Vendor Setup

These are the steps that need to be followed to do the front end vendor setup.

  • Installing an extension

  • Update the configuration

  • Module Detail

  • Run the application

  • Make the build

Step 1 : Installing an extension

Usually spurcommerce comes packed in a zip, whose name ends in "chat-addOn.zip".

Extract the zip file and copy the content of vendor/add-ons folder into the specified path

Path - vendor/add-ons

Step 2 : Update the configuration

After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below. 

npm install socket.io-client@4.6.1

npm install uuidv4@6.2.13

Step 3 : Module Detail

Routing

In /src/app/app-routing.module.ts

  1. Import below line

import { ChatconversationComponent } from '../../add-ons/chat/chatconversation/chatconversation.component';

2. Add these routes below the Routes array

{

path: 'chatconversation',

component: ChatconversationComponent,

}

Add this line to keep the header tab

/src/app/default/shared/components/sidebar/sidebar.component.html

Below line no=61

<li>

<button class="chats" (click)="chatconversation()"> <img src="assets/imgs/chats.svg" alt=""> </button>

</li>

Step 4 : Run the application

After you have integrated the chat Module into Spurtcommerce, you can use the following command to run the application.

 ng serve

Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.

Step 5 : Make the build

To run the below command

 ng build --prod

Then the latest built files can be deployed into the server.

Last updated