Favorites Feature

This guide will help you integrate AI Stylist's Favorites feature with your application. Follow the instructions below to set up and customize your favorite features.

Initialization

To integrate the AI Stylist Favorites feature with your application, pass the following parameters when initializing the widget:

const aiStylist = window.yesplz.aiStylist({
    // ...
    onFavoriteProduct: function ({ productId, isFavorite }) {
        // Check if user needs to be logged in to use the favorites feature
        if (!isLoggedIn) {
            // Show login confirmation or redirect to login page
            // showLoginConfirm();
            return;
        }
        
        // Check if the product's favorite status is already same as the new status
        if (isFavorite === isFavoriteProduct(productId)) {
            return;
        }
        
        // Update product favorite status
        if (isFavorite) {
            // Mark product as favorite
            // favoriteProduct(productId);
        } else {
            // Unmark product as favorite
            // unFavoriteProduct(productId);
        }
        
        // Note: Do not call window.yesplz.AiStylist.favoriteProduct(productId) directly here
    },
    onAccessFavoriteList: function () {
        // Check if login is required to access favorites list
        if (!isLoggedIn) {
            // Show login confirmation or redirect to login page
            // showLoginConfirm();
            return;
        }
    },
    isLoginRequiredForFavorites: true // Set to true if login is required
});

Callback Functions

• onFavoriteProduct: This callback is triggered when a user marks a product as a favorite or removes on AI Stylist. Implement this function to handle changes in the product's favorite status.

• onAccessFavoriteList: This callback is triggered when a user accesses favorites list of AI Stylist. Use this function to manage access control, such as requiring user login.

Configuration Options

• isLoginRequiredForFavorites: Set this option to true if users must be logged in to use the favorites feature. If set to true, ensure you implement both onFavoriteProduct and onAccessFavoriteList callbacks.

Product Favorites Methods

• setUserId: Use this method to associate a user ID with their favorites list. Call this method after a user logs in or logs out:

// When user logs in
window.yesplz.AiStylist.setUserId('USER_ID');

// When user logs out or session is expired
window.yesplz.AiStylist.setUserId(null);

• favoriteProduct: Call this method to add a product to the user's favorites list on the AI Stylist server:

// When a user favorites a product
window.yesplz.AiStylist.favoriteProduct('PRODUCT_ID');

• unFavoriteProduct: Call this method to remove a product from the user's favorites list on the AI Stylist server:

// When a user unfavorites a product
window.yesplz.AiStylist.unFavoriteProduct('PRODUCT_ID');

Conclusion

By following this guide, you can effectively implement and manage the favorite feature within your application using the AI Stylist. Adjust configurations and callbacks according to your application's specific requirements.