Product Variant Addon

About Addon:

The Installation of Spurtcommerce Product Variant add-on will enable the feature of adding variant master When the plugin is installed, the multi-Vendor eCommerce site becomes ready for the admin and vendors to add variants under products and get them displayed for the visitors to view different variants in the same product.

Features:

The admin can create a master of variants. E.g., Colour or Size.
The admin can then add different variant values under the variant name. E.g., Under colour, they can add different values like red, green, blue, etc.
When the admin is listing a main product, they can choose different variants available in the masters to list different variants available for the same product.
While listing variants, they can specify different pricing for different variants and also specify the inventory (quantity stock available) for each variant separately.
For each variant under the same product, the SKU prefix followed by a unique number gets allocated. So, each variant under a product will have a unique SKU.
When the Vendor is listing a main product, they can choose different variants available in the variants master list created by the admin, in order to list different variants available for the same product.
While listing variants, they can specify different pricing for different variants and also specify the inventory (quantity stock available) for each variant separately.

Product Variant Addon Setup:

Frontend Setup - Seller Panel:

Follow these steps to set up the front end for the Product Variant addon in Spurtcommerce Seller Panel.

Step 1: Install the Addon:

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

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->marketing -> ProductVariant

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:

// ----------------------Product Variant --------------------------
import * as productVariant from './ProductVariant/template/product-variant.constant'
// components paths
export const productVariantComponents = productVariant.componentLists;
// route paths
export const productVariantRoutes = productVariant.routePath;


// Product Variant State :
import { ProductVariantState } from "./ProductVariant/product-variant/reducer/productVariant.state"

export interface AddOnAppState {

variantList:ProductVariantState;
}

// Product Variant Reducers :

import { ActionReducerMap } from '@ngrx/store';
// import { AddOnAppState as State } from './add-ons-state';

import * as fromProductVariant from '../add-ons/ProductVariant/product-variant/reducer/productVariant.reducer';

export const AddOnReducers: ActionReducerMap<AddOnAppState> = {

variantList: fromProductVariant.reducer,

};

// Product Variant Effect :

import { ProductVariantEffect } from "../add-ons/ProductVariant/product-variant/effect/productVariant.effect";

export const ADD_ON_EFFECT = [

ProductVariantEffect,

];

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

// ----------------------Product Variant --------------------------
import * as productVariant from './ProductVariant/template/product-variant.constant'
// components paths
export const productVariantComponents = [];
// route paths
export const productVariantRoutes = [];
	

// Product Variant State :
import { ProductVariantState } from "./ProductVariant/product-variant/reducer/productVariant.state"

export interface AddOnAppState {

}

// Product Variant Reducers :

import { ActionReducerMap } from '@ngrx/store';
// import { AddOnAppState as State } from './add-ons-state';

import * as fromProductVariant from '../add-ons/ProductVariant/product-variant/reducer/productVariant.reducer';

export const AddOnReducers: ActionReducerMap<AddOnAppState> = {

};

// Product Variant Effect :

import { ProductVariantEffect } from "../add-ons/ProductVariant/product-variant/effect/productVariant.effect";

export const ADD_ON_EFFECT = [

];

Step 3: Run the Application:

To run the application with the integrated Product Variant 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

Variant Inventory Addon Setup:

Frontend Setup - Seller Panel:

Follow these steps to set up the front end for the Variant Inventory addon in Spurtcommerce Seller Panel.

Step 1: Install the Addon:

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

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns -> VarientInventory

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:

// --------------------------- Variant Inventory ----------------------------------------------
import * as VariantInventory from './VarientInventory/template/varient-inventory-list/variant-inventory.constant'
// components paths
export const VariantInventories = VariantInventory.componentLists;
// route paths
export const VariantInventoriesRoutes = VariantInventory.routePath;

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

// --------------------------- Variant Inventory ----------------------------------------------
import * as VariantInventory from './VarientInventory/template/varient-inventory-list/variant-inventory.constant'
// components paths
export const VariantInventories = [];
// route paths
export const VariantInventoriesRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Variant Inventory 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.

Product Variant Addon Setup:

Frontend Setup – Admin Panel:

Follow these steps to set up the front end for the Product Variant 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 Product Variant folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Marketplace->Product Configuration-> Product Variant->Variant

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:

//  ---------------------Settings Variants Routes---------------------
import * as variants from './Marketplace/productConfiguration/productVariant/settings/variant/variant.constant'
// components paths
export const variantsComponents = variants.componentLists;
// route paths
export const variantsRoutes = variants.routePath;

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

//  ---------------------Settings Variants Routes---------------------
import * as variants from './Marketplace/productConfiguration/productVariant/settings/variant/variant.constant'
// components paths
export const variantsComponents = [];
// route paths
export const variantsRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Product Variant 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.

Variant Filter Addon Setup:

Frontend Setup – Admin Panel:

Follow these steps to set up the front end for the Variant Filter 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 Variant Filter folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Marketplace->Product Configuration->Variant Filter->Filter

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:

// ---------------------Product Variant Filter Routes---------------------
import * as variantFilter from './Marketplace/productConfiguration/productVariant/settings/filter/productVariantFilter.constant';
// components paths
export const variantFilterComponents = variantFilter.componentLists;
// route paths
export const variantFilterRoutes = variantFilter.routePath;

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

// ---------------------Product Variant Filter Routes---------------------
import * as variantFilter from './Marketplace/productConfiguration/productVariant/settings/filter/productVariantFilter.constant';
// components paths
export const variantFilterComponents = [];
// route paths 
export const variantFilterRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Variant Filter 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 Product Variants 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 Variant folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns -> Variant

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:

Import the required line into addonsconfig.js.

             import ProductVariant from './Variant/ProductVariant'

Add the ProductVariant plugin to the specified object.

        export const AddonsComponent = {                                                                                                                                   ProductVariant,                                                                                                                     }

Add the following components to the AddonsComponent object:

ProductVariant
VariantFilter

import ProductVariant from './Variant/ProductVariant'                                                  import VariantFilter from './Variant/VariantFilter'

After making these updates, the AddonsComponent object should reflect the new components.

export const AddonsComponent = {
                  ProductVariant,
                  VariantFilter,
             }

Step 3: Module Details

The Product Variants module includes the following components that you can utilize in any page within Spurtcommerce by sending the required product data as props:

VariantFilter Component

{ConnectPlugin.VariantFilter &&                       <ConnectPlugin.VariantFilter params={params?.slug} />}

Note: Use the VariantFilter component by passing the product data as a prop:

         <connectPlugin.VariantFilter params={params.slug} />

Step 4: Run the Application

Once you have integrated the Product Variants module, run the application using:

$ npm run dev

This command will launch Spurtcommerce with the integrated Product Variants module visible on the specified page.

Step 5: Build the Application

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

$ npm run build

$ yarn run build

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

Product Variants Add-On

Follow these below steps are installing Product Variants

App setup

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

· 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.

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

Extract the zip file and copy the Product Variants folder into the addons folder in your project.

projectFolder->lib->module->add-ons

After this step, the structure should look like:

projectFolder->lib->module->add-ons->Productvariant

projectFolder->lib->module->add-ons->Variantfilter

Once completed, proceed to update the configuration.

Step 2 : Update the configuration

After extracting the add on zip file for changing the configurations in addons.dart, you have to follow the steps below:

Go to

projectFolder->lib->module->add-ons->addonsshared.dart

Then inside addonsShared array paste the following content

{"Variant": SpurtProductvariant(), "data": ""},
{"Variantfilter": SpurtVariantfilter(), "data": ""},

After placing the above files it will look like this,

List addonsShared = [

{"Variant": SpurtProductvariant(), "data": ""},

{"Variantfilter": SpurtVariantfilter(), "data": ""},

];

Then give the following imports

import 'package:spurtcommerce/module/add-ons/ProductVariant/Page/productvariant.dart';
import 'package:spurtcommerce/module/add-ons/Variantfilter/variantfilter.dart';

There will be a popup for quick fix

Step 3 : Module details

After executing the above mentioned steps, we have to place these below lines in the module folder to show the Product Variants to the user.

Product variants

Once you finished updating the configuration then in the projectFolder->lib->module->Tab->Product-detailpage->presentation->pages->details.dart

Use this line for view the Product Variants

findMyClass('Variant', {

"Id": {

"id": detail

.details["productId"],

"slug": detail

.details["productSlug"],

"video": detail

.details["productVideo"]

}

})

Variant Filter

you can see in the projectFolder->lib->module->Tab->search_categories->pages->filter.dart

Use this line for view the Variant filter

findMyClass("Variantfilter",

{"filterlist": widget.filterlist}),

After insert the line restart your application

Step 4 : Run the application

After integrating the ProductVariant Module into Spurt Commerce, you can use the following commands to run the application in terminal.

$ flutter run

In Run menu select run without debugging

In case if throws any exception

$ flutter run –no-sound-null-safety

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

Step 5 : Make the build

In order to build, you need to run the following commands. In order to check the application, run the following commands and build the application.

$flutter build

If you want to split the abi then

$flutter build –split-per-abi

For bundle build

$flutter build appbundle

PreviousPayment gateway Add-on NextProduct Attribute Add-on

Last updated 1 month ago