Promotion Widget

About Addon :

The Installation of Spurtcommerce Promotions add-on will enable the feature of creation of various promotions for the admin. When the plugin is installed, the multi-Vendor eCommerce site becomes ready for the admin to post promotions and get them displayed for the visitors to view.

Features

  • You can create promotions such as ‘Hot summer offer’ or ‘Christmas sale’, etc.

  • Easily map certain selected products to the promotions that they create.

  • Also, you may map one whole category for the promotions that they create.

  • provide an attractive title for that promotion. E.g., stylish women deal.

  • Define the position of the promotion for displaying it on the home page.

Frontend Setup – Admin Panel:

Follow these steps to set up the front end for the Promotion Widget addon in Spurtcommerce Admin Panel.

Step 1: Install the Addon:

Locate the Spurtcommerce addon package, typically named admin.addOns.zip.

Extract the zip file and copy the Promotion Widget folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Cms-> Manage Page-> Promotion widget

Once completed, proceed to update the configuration.

Step 2: Update the Configuration

After installing the addon, update the add-ons.constant.ts file to include the necessary plugins:

// ---------------------Promotion Widgets Routes---------------------
import * as promotionWidget from './Cms/manage-page/Promotion Widgets/promotion-widgets.constant';
// components paths
export const promotionWidgetComponents = promotionWidget.promotionWidgetComponents;
// route paths
export const promotionWidgetComponentRoutes = promotionWidget.routePath

If you wish to uninstall or remove the Common Product addon, replace the component paths and route paths with an empty array.

// ---------------------Promotion Widgets Routes---------------------
import * as promotionWidget from './Cms/manage-page/Promotion Widgets/promotion-widgets.constant';
// components paths
export const promotionWidgetComponents = [];
// route paths
export const promotionWidgetComponentRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Promotion Widget addon, use the following command:

$ npm run large-serve

After executing this command, the addon will be available on Spurtcommerce on the designated page.

Step 4: Build the Application

Finally, to prepare the application for deployment, run the build command:

$ npm run large-build

The latest build files will then be ready to deploy to the server.

Store Setup

Follow these steps to set up the Promotional Widgets module on the front-end Next.js web store.

Setup Overview:

  • Install the extension

  • Update configuration

  • Integrate the module

  • Run the application

  • Build the application

Step 1: Install the Extension

Locate the Spurtcommerce addon package, typically named addOns.zip.

Extract the zip file and copy the WidgetsAndProducts folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns -> WidgetsAndProducts

Once completed, proceed to update the configuration.

Step 2: Update the Configuration

After installing the extension, update the configuration in Spurtcommerce’s addonsconfig.js as follows:

  1. Import the required line into addonsconfig.js.

           import PromotionalWidget from './WidgetsAndProducts/widgetServerAction'
  1. Add the PromotionalWidget plugin to the specified object.

        export const AddonsComponent = {                                                                                                                                          PromotionalWidget,
}  

Step 3: Run the Application

Once you have integrated the Promotional Widgets module, run the application using:

$ npm run dev

This command will launch Spurtcommerce with the integrated Promotional Widgets visible on the specified page.

Step 4 Build the Application

To prepare the application for deployment, execute the following command:

$ npm run build

or

$ yarn run build                                                                                                                             

The latest build files will then be ready for server deployment.

Last updated