Addons
Document API Reference Add-ons

Coupon Add-on

Installation of Spurtcommerce coupon Addon

This document will help you to install coupon add-on to your Spurtcommerce server for single vendor as well as multi vendor

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 "coupon-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 "coupon.addOn.zip".

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

Path - admin/add-ons

Note:

1) In add-ons folder if already a marketing folder exists.

Inside marketing folder paste coupon folder.

In marketing routing file(marketing.routing.ts) paste the below code.

export const couponRoutes = [
 {
 path: 'coupon',
 loadChildren: () => import('../marketing/coupon/coupon.module').then(m =>
 m.CouponModule),
 canActivate: [AuthGuard],
 },
 ];

2) Inside the addon if the marketing folder doesn’t exist.

Paste

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.

Update Reducer Config

1) Import below line into the add-ons/add-ons-reducer.ts

import * as fromCoupon from 
'../add-ons/marketing/coupon/core/reducer/coupon.reducer'

  1. Add the reducer into the below object

	coupon:fromCoupon.reducer

  1. After adding its looks like below

export const AddOnReducers: ActionReducerMap<State> = {
   coupon:fromCoupon.reducer

};

Update State Config

1) Import below line into the add-ons/add-ons-state.ts

import { CouponState } from 
'./marketing/coupon/core/reducer/coupon.state';

  1. Add the state into the below object

coupon:CouponState

  1. After adding its looks like below

export interface AddOnAppState {

coupon:CouponState

}

Step 3 : Change the routing file(manage-promotions.routing.ts)

Inside the /src/theme/default/admin/marketing/components/manage-promotions/manage-promotions.routing.ts

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

  1. Import below line

import * as marketingRouting from '../../../../../../../add-ons/marketing/marketing.routing';

2. Add these routes below the managePromotionRoutes array

managePromotionRoutes.push(marketingRouting.couponRoutes[0]);

For setting up the tab add this line in

/src/theme/default/admin/marketing/components/header/header.component.html

Below line no=11

<input type="checkbox" [checked]="checked" id="check"
 (click)="$event.stopPropagation(); onClick($event)">
 <div class="dd-c"> 
<ul>
 <li > 
                    <a href="#" 
[routerLink]="['/marketing/manage-promotions/coupon']"
 [routerLinkActive]="'active'"> 
{{'Marketing.Coupons'|translate}}
 </a> 
</li> 
</ul> 
</div>

Step 4 : Run the application

After you have integrated the catalog 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 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 ."coupon.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.

Update Reducer Config

  1. Import below line into the add-ons/add-ons-reducer.ts

 import * as fromMarketing from './marketing/core/reducer/marketing.reducer'

  1. Add the reducer into the below object

marketing: fromMarketing.reducer,

  1. After adding its looks like below

export const AddOnReducers: ActionReducerMap<State> = {

marketing: fromMarketing.reducer,

};

Update State Config

  1. Import below line into the add-ons/add-ons-state.ts

     import { MarketingState } from "./marketing/core/reducer/marketing.state";

  1. Add the state into the below object

    marketing: MarketingState;

  1. After adding its looks like below

export interface AddOnAppState {

marketing: MarketingState;

}

  1. Import below line into the add-ons/add-ons-effect.ts

                        import { MarketingEffect } from 
                       "./marketing/core/effects/marketing.effect";

  1. Add the effect into the below object

                   MarketingEffect

After adding its looks like below

export const ADD_ON_EFFECT = [

MarketingEffect,

];

Update Component Config

  1. Import below line into the add-ons/add-ons.shared.ts

import { CouponComponent } from
 "./marketing/template/coupon/coupon.component";

import { CouponTrackingComponent } from "./marketing/template/coupon-tracking/coupon-tracking.component";

import { AddCouponComponent } from "./marketing/template/add-coupon/add-coupon.component";

  1. Add the following components into the below object

AddCouponComponent,

CouponTrackingComponent,

CouponComponent,

  1. After adding its looks like below

export const ADD_ON_COMPONENTS = [

AddCouponComponent,

CouponTrackingComponent,

CouponComponent,

]

Step 3 : Module Detail

AddCouponComponent,

CouponTrackingComponent,

CouponComponent

are listed below. You may use these modules, in any page of Spurtcommerce.

Also, you can find the steps below to use the modules in marketing in Spurtcommerce pages.

In the marketing addon having three component.

  1. AddCouponComponent,

  2. CouponTrackingComponent,

  3. CouponComponent,

Add the below steps to configure routing

In /src/app/default/pages/component/marketing/manage-promotions/manage-promotions.module.ts

  1. Import below line

import { AddCouponComponent } from '../../../../../../../add-ons/marketing/template/add-coupon/add-coupon.component';

import { CouponComponent } from '../../../../../../../add-ons/marketing/template/coupon/coupon.component';

import { CouponTrackingComponent } from '../../../../../../../add-ons/marketing/template/coupon-tracking/coupon-tracking.component';

2) Add these routes below the Routes array

                           
                  { path: 'coupon', 
component: CouponComponent, 
data: { title: 'coupons', urls: [
{ title: 'Home' , url: '/dashboard'},
 { title: 'marketing', url: 'marketing/manage-promotions' },
{ title: 'manage promotions', url: 'marketing/manage-promotions' }, 
{ title: 'Coupons' }] 
} 
},


{ path: 'add-coupon', 
component: AddCouponComponent, 
data: { title: 'Add Coupon', urls: [
{ title: 'Home', url: '/dashboard' },
{ title: 'Marketing', url: '/marketing/manage-promotions/' }, 
{ title: 'Manage-promotions', url: '/marketing/manage-promotions/' },
 { title: 'Add Coupon' }] 
} 
},


{ path: 'coupon-tracking', 
component: CouponTrackingComponent, 
data: { title: 'Settings', urls: [
{ title: 'Home', url: '/dashboard' },
{ title: 'Marketing', url: '/marketing/manage-promotions/' }, 
{ title: 'Manage-promotions', url: '/marketing/manage-promotions/' }, 
{ title: 'Coupon Tracking' }] 
}
 },

For setting up the tab add this line in

/src/app/default/pages/component/marketing/layout/products.component.html

Below line = 17

   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
                             <a href="javascript:void(0)" [routerLink]="['/marketing/manage-promotions/coupon']" class="">
{{'Marketing.nav.Coupons'|translate}}
</a>
 </div>

Step 4 : Run the application

After you have integrated the marketing 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.

PreviousQuotation Request Add-on NextSEO

Last updated