SEO and Blogs Add-on

Product SEO Addon Setup:

About Add-on

The SpurtCommerce SEO Plugin enables store administrators and sellers to optimize their eCommerce site for search engines by setting SEO attributes for products, pages, categories, and blogs. This plugin helps improve site visibility in search engine results, making it easier for customers to find products and content online.

Features:

SEO for Products: Add SEO titles, meta descriptions, and keywords to individual product pages, improving their search engine ranking.
SEO for Pages: Configure SEO elements for custom pages, allowing for better indexing and visibility of important site information.
SEO for Categories: Optimize category pages with relevant keywords and meta information to attract targeted traffic for specific product groups.
SEO for Blog Posts: Improve blog post reach by adding SEO titles, descriptions, and keywords, enhancing engagement with valuable content.

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Cms->Manage-SEO-> Product

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 Seo---------------------
import * as ManageSeo from './Cms/manage-seo/Product/product.contant';
// components paths
export const ProductSeoComponents = ManageSeo.componentLists;

// route paths
export const ProductSeoRoutes = ManageSeo.routePath;

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

// ---------------------Product Seo---------------------
import * as ManageSeo from './Cms/manage-seo/Product/product.contant';
// components paths
export const ProductSeoComponents = [];
// route paths
export const ProductSeoRoutes = [];

Step 3: Run the Application:

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

Category SEO Addon Setup:

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Cms->Manage-SEO-> Category

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:

// ---------------------category Seo---------------------
import * as categorySeo from './Cms/manage-seo/Category/category.constant';
// components paths
export const CategorySeoComponents = categorySeo.componentLists;
// route paths
export const CategorySeoRoutes = categorySeo.routePath;

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

// ---------------------category Seo---------------------
import * as categorySeo from './Cms/manage-seo/Category/category.constant';
// components paths
export const CategorySeoComponents = [];
// route paths
export const CategorySeoRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Category SEO 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.

Page SEO Addon Setup:

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Cms->Manage-SEO-> Page

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:

// ---------------------Page Seo---------------------
import * as pageSeo from './Cms/manage-seo/page/page.contant';
// components paths
export const PageSeoComponents = pageSeo.componentLists;
// route paths
export const PageSeoRoutes = pageSeo.routePath;

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

// ---------------------Page Seo---------------------
import * as pageSeo from './Cms/manage-seo/page/page.contant';
// components paths
export const PageSeoComponents = [];
// route paths
export const PageSeoRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Page SEO 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.

Blog SEO Addon Setup:

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Cms->Manage-SEO-> Blog

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:

// ---------------------Blog Seo---------------------
import * as BlogSeo from './Cms/manage-seo/blog/blog.contant';
// components paths
export const BlogSeoComponents = BlogSeo.componentLists;
// route paths
export const BlogSeoRoutes = BlogSeo.routePath;

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

// ---------------------Blog Seo---------------------
import * as BlogSeo from './Cms/manage-seo/blog/blog.contant';
// components paths
export const BlogSeoComponents = [];
// route paths
export const BlogSeoRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Blog SEO 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.

Site Map Addon Setup:

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Cms->Manage-SEO-> Site Map

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

// ---------------------Site map---------------------
import * as SiteMap from './Cms/manage-seo/site-map/site-map.contant';
// components paths
export const SiteSeoComponents = SiteMap.componentLists;
// route paths
export const SiteSeoRoutes = SiteMap.routePath;

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

// ---------------------Site map---------------------
import * as SiteMap from './Cms/manage-seo/site-map/site-map.contant';
// components paths
export const SiteSeoComponents = [];
// route paths
export const SiteSeoRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Site Map 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.

Blog Post Addon Setup:

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->CMS->Manage Blog -> Post

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:

// ---------------------- Posts --------------------------
import * as posts from './Cms/Manage Blog/posts/posts-constant'
// components paths
export const postsComponents = posts.componentLists;
// route paths
export const postsComponentRoutes=posts.routePath;

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

// ---------------------- Posts --------------------------
import * as posts from './Cms/Manage Blog/posts/posts-constant'
// components paths
export const postsComponents = [];
// route paths
export const postsComponentRoutes= [];

Step 3: Run the Application:

To run the application with the integrated Blog Post 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.

Blog Category Addon Setup:

Frontend Setup – Admin Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->CMS->Manage Blog -> Category

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:

// ---------------------- Categories --------------------------
import * as categories from './Cms/Manage Blog/categories/categories-constant'
// components paths
export const categoriesComponents = categories.componentLists;
// route paths
export const categoriesComponentRoutes = categories.routePath;

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

// ---------------------- Categories --------------------------
import * as categories from './Cms/Manage Blog/categories/categories-constant'
// components paths
export const categoriesComponents = [];
// route paths
export const categoriesComponentRoutes = [];

Step 3: Run the Application:

To run the application with the integrated Blog Category 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 Seo Addon Setup:

Frontend Setup - Seller Panel:

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

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->catalog -> seo

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:

// ----------------------SEO--------------------------
import * as ProductSeo from './catalog/seo/Seo.contants'
// components paths
export const ProductSeoComponents = ProductSeo.componentLists;
// route paths
export const ProductSeoRoutes = ProductSeo.routePath;

export const ProductSeoServices = ProductSeo.componentServices

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

// ----------------------SEO--------------------------
import * as ProductSeo from './catalog/seo/Seo.contants'
// components paths
export const ProductSeoComponents =[];
// route paths
export const ProductSeoRoutes = [];

export const ProductSeoServices = [];

Step 3: Run the Application:

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

Blogs Store Setup

Follow these steps to set up the Blogs 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 Blogs folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns -> Blogs

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 Blogslist from './Blogs/BlogsList'

Add the Blogslist plugin to the specified object.

export const AddonsComponent = {                                                                                                                                   Blogslist,

Add the following components to the AddonsComponent object:
Blogslist
Blogsdetails

import Blogslist from './Blogs/BlogsList'                                                                                                               import Blogsdetails from './Blogs/BlogsDetails'

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

            export const AddonsComponent = {
                  Blogslist,
                  Blogsdetails,
             }

Step 3: Module Details

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

Blogsdetails Component

{ConnectPlugin.Blogsdetails &&                        <ConnectPlugin.Blogsdetails params={params} />}

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

         <connectPlugin.Blogsdetails params={params.id} />

Step 4: Run the Application

Once you have integrated the Blogs module, run the application using:

$ npm run dev

This command will launch Spurtcommerce with the integrated Blogs 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.

Blogs Add-On

Follow these below steps are installing blogs addon

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 Blogs 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->Blogs

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

{"Blog": SpurtBlog(), "data": ""},

After placing the above files it will look like this,

List addonsShared = [

{"Blog": SpurtBlog(), "data": ""},

];

Then give the following imports

import 'package:spurtcommerce/module/add-ons/Blogs/pages/blog.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 blogs to the user.

Blogs

Once you finished updating the configuration then in the projectFolder->lib->module->Tab->myaccount.dart

Use this line for view the blogs

findMyClass("Blog", ""),

After insert the line restart your application

Step 4 : Run the application

After integrating the blogs 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

PreviousAssign Product Price Add-on NextAbandoned Cart Add-on

Last updated 1 month ago