Rivo Favorites API Documentation

1. Adding Favorite Buttons to Product Pages

Basic Implementation

<!-- Add a favorite button to any product card or page -->
<rivo-favorite-button
  data-product-id="7234567890123"
  data-trigger-toast="true"
  data-update-button-text="false">
</rivo-favorite-button>

Available Attributes

  • data-product-id (required): The Shopify product ID
  • data-trigger-toast: Show notification when toggled (default: true)
  • data-update-button-text: Update button text on state change (default: false)
  • data-rivo-favorite-loaded: Auto-set by system to prevent duplicate initialization

2. JavaScript API Functions

Access and manipulate favorite data using Alpine stores when the customer is logged in.

// Get all favorite products
const favorites = RivoProfileAlpine.store("rivo_favorite_products");

// Get favorite collections
const collections = RivoProfileAlpine.store("rivo_favorite_collections");

// Check if customer is logged in
const customer = RivoProfileAlpine.store("rivo_profile_customer");

// Access loading states
const loadingStates = RivoProfileAlpine.store("loading_states");
loadingStates.global_favorite_buttons; // true when loading

// Access settings
const settings = RivoProfileAlpine.store("rivo_aw_settings");
settings.favorites_enabled; // Check if feature is enabled
settings.favorites_load_delay; // Delay before initializing buttons

3. RivoAPI Direct Access

For advanced use cases, access the API directly:

// Get favorite products
window.RivoAPI.favorite_products()
  .then(data => {
    console.log('Favorites:', data.products);
  });

// Get favorite collections
window.RivoAPI.favorite_collections("loggedin")
  .then(data => {
    console.log('Collections:', data.collections);
  });

// Update saved cart collection
window.RivoAPI.update_saved_cart_collection(
  productIds.join(","),
  "add",
  currencyCode
);