preference-center
v1.0.1
Published
The **Preferences Widget** allows users to select and manage their product preferences, such as categories, sizes, colors, and brands. This widget can be easily embedded into any HTML page and is customizable via JavaScript. The widget fetches data from a
Downloads
129
Readme
Preferences Widget
The Preferences Widget allows users to select and manage their product preferences, such as categories, sizes, colors, and brands. This widget can be easily embedded into any HTML page and is customizable via JavaScript. The widget fetches data from a backend API, displays user preferences, and allows modifications to be saved back to the server.
Table of Contents
Installation
To use the Preferences Widget, include the JavaScript file in your project.
Manual Integration
- Add the widget script to your HTML file.
- Include any required backend credentials, such as tenant ID, access token, and customer ID.
<script src="https://cdn.jsdelivr.net/npm/preference-center/script.js"></script>Usage
To render the widget, simply call the PreferencesWidget.init() method after the DOM is ready. You will need to provide the following parameters:
containerId: The ID of the HTML element where the widget will be rendered.tenantId: Your tenant ID from the backend system.accessToken: The access token for API authentication.customerId: The customer ID for whom preferences are being managed.
HTML Structure
Make sure to have a container element where the widget will be rendered.
<div id="preferences-widget-container"></div>Example Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preferences Widget</title>
<script src="https://cdn.jsdelivr.net/npm/preference-center/script.js"></script>
</head>
<body>
<div id="preferences-widget-container"></div>
<script>
const tenantId = "your-tenant-id";
const accessToken = "your-access-token";
const customerId = "your-customer-id";
PreferencesWidget.init("preferences-widget-container", tenantId, accessToken, customerId);
</script>
</body>
</html>JavaScript Example (Using npm package)
import PreferencesWidget from 'preferences-widget';
document.addEventListener('DOMContentLoaded', () => {
const tenantId = "your-tenant-id";
const accessToken = "your-access-token";
const customerId = "your-customer-id";
PreferencesWidget.init("preferences-widget-container", tenantId, accessToken, customerId);
});Configuration
The widget requires the following parameters for initialization:
- containerId (string): The ID of the HTML container element where the widget will be rendered.
- tenantId (string): The tenant ID used to identify the backend service.
- accessToken (string): The access token required for authenticating API requests.
- customerId (string): The customer ID representing the user for whom preferences are being retrieved and updated.
API Configuration
Make sure the API endpoints and authentication tokens are properly configured. The widget interacts with the following APIs:
- GET preferences: Retrieves the current preferences for the customer.
- POST/PUT preferences: Updates or creates preferences for the customer.
Methods
init(containerId, tenantId, accessToken, customerId)
This method initializes the widget and renders it inside the specified container. It also handles API calls to fetch and update user preferences.
Parameters:
containerId(string): The ID of the container element in the DOM where the widget will be inserted.tenantId(string): The unique tenant ID for backend interaction.accessToken(string): A valid access token for API authentication.customerId(string): The ID of the customer whose preferences will be managed.
Example:
PreferencesWidget.init("preferences-widget-container", "tenantId123", "accessTokenABC", "customerIdXYZ");Widget UI Elements
The widget consists of the following components:
- Ranges: Buttons for switching between different product ranges (e.g., male/female).
- Categories and Sizes: Spoilers displaying available categories (e.g., shirts, shoes) and corresponding sizes (e.g., S, M, L).
- Colors: A section for selecting product colors.
- Brands: A section for selecting preferred brands.
- Save Button: A button for saving the selected preferences.
Examples
Here is a basic example to demonstrate how to initialize and use the Preferences Widget on a webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preferences Widget</title>
<script src="preferences-widget.js"></script>
</head>
<body>
<div id="preferences-widget-container"></div>
<script>
const tenantId = "your-tenant-id";
const accessToken = "your-access-token";
const customerId = "your-customer-id";
PreferencesWidget.init("preferences-widget-container", tenantId, accessToken, customerId);
</script>
</body>
</html>In this example, the widget is rendered in the #preferences-widget-container div, and the necessary data is fetched and managed via the backend API.