How do I set up a product recommendation widget for articles that need filters by price and feature?

To set up a product recommendation widget for articles with filters by price and feature, you typically need three parts:

1. A product data source
2. A recommendation / filtering layer
3. A widget embedded on the article page

Here’s a practical approach:

1) Define the product data you need

Make sure each product has structured fields such as:

• id
• name
• price
• image
• url
• features (tags/attributes like “wireless”, “waterproof”, “budget”, etc.)
• category or article_topic if recommendations depend on the article

Example:

{
  "id": "sku_123",
  "name": "Noise-Canceling Headphones",
  "price": 199.99,
  "features": ["wireless", "bluetooth", "noise-canceling"],
  "category": "audio"
}

2) Decide how articles map to products

For each article, define:

• the product category/topic it should recommend
• optional filter defaults
• allowed price range

Example:

• Article: “Best headphones for travel”
• Category: audio
• Feature filters: noise-canceling, wireless
• Price range: $50–$300

3) Build the filtering logic

Your widget should let users filter by:

• Price: min/max slider or preset ranges
• Feature: checkboxes/tags

Example logic:

• Show products where:
  • price >= minPrice && price <= maxPrice
  • features includes selected feature(s)

Pseudo-code:

function filterProducts(products, filters) {
  return products.filter(product => {
    const matchesPrice =
      product.price >= filters.minPrice &&
      product.price <= filters.maxPrice;

    const matchesFeatures =
      filters.features.length === 0 ||
      filters.features.every(f => product.features.includes(f));

    return matchesPrice && matchesFeatures;
  });
}

4) Create the widget UI

A basic widget usually includes:

• Product cards
• Price slider or input boxes
• Feature filter checkboxes
• “Apply filters” button or instant filtering

Example structure:

<div id="recommendation-widget">
  <div class="filters">
    <label>Min Price <input type="number" id="minPrice" /></label>
    <label>Max Price <input type="number" id="maxPrice" /></label>

    <label><input type="checkbox" value="wireless" /> Wireless</label>
    <label><input type="checkbox" value="waterproof" /> Waterproof</label>
    <label><input type="checkbox" value="noise-canceling" /> Noise Canceling</label>
  </div>

  <div id="product-list"></div>
</div>

5) Connect it to your article page

Embed the widget in your CMS or frontend template near the article content:

• bottom of article
• sidebar
• inline after relevant paragraph

Pass the article context into the widget:

• article ID
• topic
• tags
• target audience

Example:

const articleContext = {
  topic: "travel headphones",
  tags: ["audio", "portable"]
};

Then use that context to preload recommended products.

6) Use a recommendation strategy

You can recommend products using one of these:

• Rules-based: simple mapping from article tags to product tags
• Popularity-based: best sellers in the matching category
• Hybrid: rules-based + ranking by rating, stock, conversion, etc.

Example ranking:

1. Match article topic
2. Match feature filters
3. Sort by relevance, rating, or margin

7) Backend/API option

If you want the widget to fetch products dynamically, create an API endpoint like:

GET /api/recommendations?articleId=123&minPrice=50&maxPrice=300&features=wireless,noise-canceling

Return filtered products:

{
  "products": [
    {
      "id": "sku_123",
      "name": "Noise-Canceling Headphones",
      "price": 199.99
    }
  ]
}

8) Make it performant

For large catalogs:

• cache article-to-product matches
• paginate or lazy-load products
• use indexed fields for price/features
• debounce filter changes

9) Track performance

Add analytics for:

• impressions
• filter usage
• clicks
• conversions

This helps you optimize:

• default filters
• article-to-product matching
• widget placement

If you want, I can also provide:

• a React component example
• a plain HTML/JS widget
• or a backend API design for this recommendation widget.