Marketplace

A ready-to-use marketplace component with Lucene.Net search, faceted filtering, and analytics tracking.

Installation

npm install authscape-marketplace

Azure Setup

The marketplace requires Azure Blob Storage for search indexes.

1. Create Storage Account

1. Go to Azure Portal
2. Navigate to Storage Accounts → Create
3. Configure:
   • Storage Account Name: Choose unique name (e.g., authscapemarketplace)
   • Region: Your preferred region
   • Performance: Standard
   • Redundancy: LRS or higher
4. Click Review + Create → Create

2. Create Container

1. Open your storage account
2. Go to Containers under Data storage
3. Click + Container
4. Name: lucene-indexes
5. Access level: Private
6. Click Create

3. Get Connection String

1. Go to Access keys under Security + networking
2. Copy the Connection string from key1 or key2

Configuration

Add to your appsettings.json:

{
  "AppSettings": {
    "LuceneSearch": {
      "StorageConnectionString": "DefaultEndpointsProtocol=https;AccountName=youraccountname;AccountKey=yourkey;EndpointSuffix=core.windows.net",
      "Container": "lucene-indexes"
    }
  }
}

Or use environment variables:

AppSettings__LuceneSearch__StorageConnectionString=DefaultEndpointsProtocol=https;...
AppSettings__LuceneSearch__Container=lucene-indexes

Usage

Basic Implementation

import Marketplace from 'authscape-marketplace';

export default function MyMarketplacePage() {
  const [loading, setLoading] = useState(false);

  return (
    <Marketplace
      setIsLoading={setLoading}
      oemCompanyId={null}
      showFilters={true}
      showSearch={true}
    />
  );
}

With Custom Props

<Marketplace
  setIsLoading={setLoading}
  oemCompanyId={companyId}
  showFilters={true}
  showSearch={true}
  defaultSearchTerm="laptops"
  itemsPerPage={24}
/>

Component Props

Features

• Full-text search - Powered by Lucene.Net with fuzzy matching
• Faceted filtering - Multi-select filters within categories
• Analytics tracking - Automatic impression and click tracking
• Responsive design - Works on desktop and mobile
• Pagination - Built-in pagination support

Customizing Products

Mark your product model properties with [MarketplaceIndex] to make them searchable:

using AuthScape.Marketplace.Attributes;

public class Product
{
    public long Id { get; set; }

    [MarketplaceIndex]
    public string Name { get; set; }

    [MarketplaceIndex]
    public string Description { get; set; }

    [MarketplaceIndex]
    public string Category { get; set; }

    [MarketplaceIndex]
    public string Brand { get; set; }

    [MarketplaceIndex]
    public decimal Price { get; set; }
}

Example Page

Full marketplace page example:

import { useState } from 'react';
import Marketplace from 'authscape-marketplace';
import { Box, Container, Typography } from '@mui/material';

export default function MarketplacePage() {
  const [loading, setLoading] = useState(false);

  return (
    <Container maxWidth="xl">
      <Box sx={{ py: 3 }}>
        <Typography variant="h4" gutterBottom>
          Product Marketplace
        </Typography>

        <Marketplace
          setIsLoading={setLoading}
          oemCompanyId={null}
          showFilters={true}
          showSearch={true}
          itemsPerPage={24}
        />
      </Box>
    </Container>
  );
}

Troubleshooting

Search returns no results

• Verify Azure connection string is correct
• Ensure blob container lucene-indexes exists
• Check that product indexes have been generated

Filters not showing

• Ensure PropertyName matches product model properties
• Check showFilters prop is set to true
• Verify filter categories are configured

Analytics not tracking

• Check database connection is working
• Ensure user is authenticated if tracking user interactions

Next Steps

1. Set up Azure Storage Account and container
2. Add configuration to appsettings.json
3. Install npm package
4. Add component to your page
5. Customize product model with [MarketplaceIndex] attributes
6. Generate search indexes for your products