Preference Widget

The Preference Widget allows users to manage their favorite brands by adding or removing brands from their preferences. The widget communicates with the preferences API to fetch, add, and remove brands, updating them.

Features

• Fetch Preferences: Retrieve the user's current preferences, including favorite brands.
• Toggle Brand: Add or remove a brand from all ranges simultaneously.
• Real-Time Updates: Checkbox interface updates the list of favorite brands in real-time as users interact with the widget.

Installation

1. Include the script in your HTML: Add the widget script to your project.

   <script src="https://cdn.jsdelivr.net/npm/preference-brand-widget/script.js"></script>

2. Initialize the widget: Create an instance of PreferenceWidget and provide the required parameters: tenantId, customerId, and accessToken.

   const widget = new PreferenceWidget(
       "yourTenantId",
       "yourCustomerId",
       "yourAccessToken"
   );

Usage

HTML Setup

Add a section in your HTML where the checkboxes for brands will be rendered, and a list for displaying the current favorite brands.

<h1>Choose Your Favorite Brands</h1>
<div id="brand-checkboxes">
    <!-- Checkboxes will be dynamically populated here -->
</div>

<h2>Your Favorite Brands</h2>
<ul id="favorite-brands-list">
    <!-- Favorite brands will be dynamically populated here -->
</ul>

JavaScript Setup

1. Initialize the widget: Fetch the user’s current preferences and display the brand checkboxes.

2. Checkbox Interaction: When a checkbox is checked or unchecked, the widget will add or remove the brand from the user's preferences.

const allBrands = ["Samsung", "Apple", "Nike", "Adidas", "Sony", "LG", "New Balance"];

widget.init().then((favoriteBrands) => {
    populateCheckboxes(favoriteBrands);
    updateFavoriteBrandsList();
});

function populateCheckboxes(favoriteBrands) {
    const checkboxContainer = document.getElementById("brand-checkboxes");
    checkboxContainer.innerHTML = "";

    allBrands.forEach((brand) => {
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.id = brand;
        checkbox.name = brand;
        checkbox.value = brand;

        if (favoriteBrands.includes(brand)) {
            checkbox.checked = true;
        }

        checkbox.addEventListener("change", function() {
            widget.addBrand(brand).then(() => updateFavoriteBrandsList());
        });

        const label = document.createElement("label");
        label.htmlFor = brand;
        label.appendChild(document.createTextNode(brand));

        const div = document.createElement("div");
        div.appendChild(checkbox);
        div.appendChild(label);
        checkboxContainer.appendChild(div);
    });
}

function updateFavoriteBrandsList() {
    const favoriteBrandsList = document.getElementById("favorite-brands-list");
    favoriteBrandsList.innerHTML = "";

    const favoriteBrands = widget.getFavoriteBrands();

    favoriteBrands.forEach((brand) => {
        const listItem = document.createElement("li");
        listItem.textContent = brand;
        favoriteBrandsList.appendChild(listItem);
    });
}

Methods

init()

Fetches the user’s current preferences and initializes the widget.

• Returns: A promise that resolves with an array of the user's favorite brands.

addBrand(brand)

Adds or removes a brand from all ranges simultaneously based on whether the brand already exists.

• Parameters:
  • brand (string): The name of the brand to toggle.
• Returns: A promise that resolves once the preferences are updated.

getFavoriteBrands()

Retrieves the current list of favorite brands from the widget’s internal state.

• Returns: An array of favorite brand names.

Example

const widget = new PreferenceWidget(
    "tenantId",
    "customerId",
    "accessToken"
);

// Initialize the widget and populate checkboxes
widget.init().then((favoriteBrands) => {
    populateCheckboxes(favoriteBrands);
    updateFavoriteBrandsList();
});

API Endpoints

The widget interacts with the following API endpoints:

1. GET Preferences: Fetch the user's current preferences.

   GET /services/customerservice/api/v2/customer/preference?customerId={customerId}

2. PUT Preferences: Update the user's preferences by adding or removing brands.

   PUT /services/customerservice/api/v2/customer/preference